Ad

Javascript Jquery (in Shopify) Loop Is Not Working

- 1 answer

I'm trying to only show the product thumbnails from the products which ALT is the same as color swatch(product variant) where you can click on. Normally you see all the images from all product variants in Shopify. I made a really long code which works, but I wanted to make it better to maintain so I made a loop. And well, this loop isn't working but I can not figure out why it isn't working. Can anybody see the problem?

This is the code which is NOT WORKING

  // Only display the images from the first color variant
    var getAltName = document.getElementsByClassName('thumbnail')[0].alt;
    var imageAlt = '[alt="' + getAltName + '"]';
    $('.thumbnail').not(imageAlt).css("display", "none");



 var colorSwatchesArray = ["red","navy","pink","black","cobalt","yellow","white"];

 for (var i = 0; i < colorSwatchesArray.length; i++) {

     var imageAltLoop = '[alt="' + colorSwatchesArray[i] + '"]';
     var imageClassLoop = colorSwatchesArray[i];

     $("." + imageClassLoop).click(function(){
         $('.thumbnail').not(imageAltLoop).css("display", "none");
         $(imageAltLoop).css("display", "block");
     });
 }

This is the code which WORKS

 // When you go to the product page, only show the product images (thumbnails) which has the ALT tag that the first product image has
 var getAltName = document.getElementsByClassName('thumbnail')[0].alt;
 var imageAlt = '[alt="' + getAltName + '"]';
 $('.thumbnail').not(imageAlt).css("display", "none");

// red - Click on the color swatch and show all thumbnails whiteh the same ALT tag, and hide all thumbnails which hasn't the same ALT tag as the color swatch
 $(".red").click(function(){
     $('.thumbnail').not('[alt="red"]').css("display", "none");
     $('[alt="red"]').css("display", "block");
 });

 // Navy
 $(".navy").click(function(){
     $('.thumbnail').not('[alt="navy"]').css("display", "none");
     $('[alt="navy"]').css("display", "block");
 });

 // Pink
 $(".pink").click(function(){
     $('.thumbnail').not('[alt="pink"]').css("display", "none");
     $('[alt="pink"]').css("display", "block");
 });

 // black
 $(".black").click(function(){
     $('.thumbnail').not('[alt="black"]').css("display", "none");
     $('[alt="black"]').css("display", "block");
 });

 // Cobalt
 $(".cobalt").click(function(){
     $('.thumbnail').not('[alt="cobalt"]').css("display", "none");
     $('[alt="cobalt"]').css("display", "block");
 });

 // yellow
 $(".yellow").click(function(){
     $('.thumbnail').not('[alt="yellow"]').css("display", "none");
     $('[alt="yellow"]').css("display", "block");
 });

 // White
 $(".white").click(function(){
     $('.thumbnail').not('[alt="white"]').css("display", "none");
     $('[alt="white"]').css("display", "block");
 });
Ad

Answer

The problem lies in the loop you added, and the fact that you're initialising variables in the loop but then using them inside the click event handler. While this seems perfectly logical, when the click event handler is fired the variables will all have changed.

It's a simple fix to get round this - just wrap the code inside the loop in an anonymous function so that all the variables only have local scope and can't be affected outside the function...

for (var i = 0; i < colorSwatchesArray.length; i++) {
     (function() {
         var imageAltLoop = '[alt="' + colorSwatchesArray[i] + '"]';
         var imageClassLoop = colorSwatchesArray[i];

         $("." + imageClassLoop).click(function(){
             $('.thumbnail').not(imageAltLoop).css("display", "none");
             $(imageAltLoop).css("display", "block");
         });
     })();
}
Ad
source: stackoverflow.com
Ad