Announcement

Collapse
No announcement yet.

attribute images popup

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    attribute images popup

    Trying to see if Suviant is a viable option. Using attribute images seems to work on the PROD page until you want to open the large view of individual colors and then it doesn't popup the correct one. What's missing to make this work the way it should?
    Mark Hood
    Vermont Gear

    #2
    Re: attribute images popup

    Hi Mark,

    Good catch, looks like that particular use case got by me. With the following changes in the "scripts.js" file, variant images will now work in the zoom image light box.

    Around line 271 in the jsPROD function, replace this...
    Code:
    var thumbnails = document.getElementById('js-thumbnails');
    for (var i = 0; i < thumbnails.children.length; i++) {
        (function (index) {
      thumbnails.children[i].onclick = function () {
       document.getElementById('js-main-image-zoom').setAttribute('data-index', index);
      }
        })(i);
    };
    ...with this:
    Code:
    var mainImageZoom = $('#js-main-image-zoom'),
        thumbnails = $('#js-thumbnails');
        
    thumbnails.on('click', 'div', function () {
        var thumbnailIndex = $(this).attr('data-index');
        mainImageZoom.attr('data-index', thumbnailIndex);
    });
    Then around line 498 in the jsPROD function, add these lines within the "MivaEvents.SubscribeToEvent" function:
    Code:
    mainImageZoom.attr('data-index', 0);
    thumbnailIndex = 0;
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Re: attribute images popup

      still not working after these changes
      Mark Hood
      Vermont Gear

      Comment


        #4
        Re: attribute images popup

        Hi Mark,

        Can you post a link to your test product? Here is the demo from the Suivant site [http://suivant-theme.mivamerchantdev...t/peeptoe.html]. The two variants are based on being size 5 and you can switch between the two colors.
        Last edited by Matt Zimmermann; 01-30-15, 11:33 AM.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          Re: attribute images popup

          I sent you a private message with a link... I hate having a dev site get indexed.

          On a side note your example is a mess since when I click tan I get red and black and when I click black I get black and tan.
          Mark Hood
          Vermont Gear

          Comment


            #6
            Re: attribute images popup

            Hi Mark,

            Yeah, I just threw some images in there for testing. Are you assigning the image type of "main" to your product and variants? The path to the large image does not appear to be updating.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Re: attribute images popup

              Must have been something else I was missing or the order I added the last part because I just stole the file from your template site and all works now.

              Thank you!
              Last edited by Mark Hood; 01-30-15, 12:09 PM.
              Mark Hood
              Vermont Gear

              Comment


                #8
                Re: attribute images popup

                I take it back it's still not quite working the way I need and no I'm using an image type of codea. I understand you want to use main but what are people supposed to use when they have more than one image per item?
                Mark Hood
                Vermont Gear

                Comment


                  #9
                  Re: attribute images popup

                  Hi Mark,

                  The main image type is just for pulling the primary image for the product. You can have as many images as you would like, typed and untyped, assigned to a product. If you want to use a different image type for the primary image, you will just need to update the product display code to reflect the change in image type.
                  Matt Zimmermann

                  Miva Web Developer
                  Alchemy Web Development
                  https://www.alchemywebdev.com
                  Site Development - Maintenance - Consultation

                  Miva Certified Developer
                  Miva Professional Developer

                  https://www.dev4web.net | Twitter

                  Comment


                    #10
                    Re: attribute images popup

                    I did to this
                    <span data-icon="&#x54;" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimag ecustomfields:codea;" /></span>
                    Mark Hood
                    Vermont Gear

                    Comment


                      #11
                      Re: attribute images popup

                      Well it looks like you have your example working so I can't figure out what i am still missing?

                      Products with more than one image per variant enlarge ok.
                      Products with only one image per variant do not.
                      Mark Hood
                      Vermont Gear

                      Comment


                        #12
                        Re: attribute images popup

                        Hi Mark,

                        Looks like this should take care of it. In the "Product Display Layout Image Machine" section of the product display page, replace this...
                        Code:
                        <script>
                            var gallery = [],
                                thumbnailIndex = 0;
                        
                            ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
                                var thumbnail,
                                    img;
                            
                                thumbnail = document.createElement('div');
                                thumbnail.className = 'column one-third medium-one-fourth';
                                thumbnail.setAttribute('data-index', thumbnailIndex++);
                                
                                if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
                                    img = document.createElement('img');
                                    img.src = thumbnail_image;
                                    thumbnail.appendChild(img);
                                    gallery.push({
                                        src: closeup_image,
                                        title: '&mvt:clean:product:name;'
                                    });
                                };
                                return thumbnail;
                            };
                        </script>
                        ... with this ...
                        Code:
                        <script>
                            var gallery = [],
                                thumbnailIndex = 0;
                        
                            ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
                                var thumbnail,
                                    img;
                            
                                thumbnail = document.createElement('div');
                                thumbnail.className = 'column one-third medium-one-fourth';
                                thumbnail.setAttribute('data-index', thumbnailIndex++);
                                
                                if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
                                    img = document.createElement('img');
                                    img.src = thumbnail_image;
                                    thumbnail.appendChild(img);
                                };
                                gallery.push({
                                    src: closeup_image,
                                    title: '&mvt:clean:product:name;'
                                });
                                return thumbnail;
                            };
                        </script>
                        Matt Zimmermann

                        Miva Web Developer
                        Alchemy Web Development
                        https://www.alchemywebdev.com
                        Site Development - Maintenance - Consultation

                        Miva Certified Developer
                        Miva Professional Developer

                        https://www.dev4web.net | Twitter

                        Comment

                        Working...
                        X