Change product variant according to clicked image Brooklyn theme

Highlighted
Excursionist
12 0 5

Hey everyone,

 

I was able to get some help with my Brooklyn theme so that when a customer clicks on a variant image, the product is changed. However, I've noticed that it is not changing the actual product, only what is selected in the dropdown menu. For example, when a customer clicks an image, the variant is changed in the dropdown menu, but then if they choose to add that variant to their cart, the "original" product is selected rather than the one they have clicked on. Does anyone know how I might be able to fix this? 

 

Please visit www.robinblu.com and choose any product with variants to see what I am referring to. Click on an image thumbnail and once you try to add it to the cart, it will choose the first option unless you have specifically chosen that variant from the dropdown menu.

 

Thanks in advance. 

1 Like
Highlighted

@Abby_155 wrote:

Hey everyone,

 

I was able to get some help with my Brooklyn theme so that when a customer clicks on a variant image, the product is changed. However, I've noticed that it is not changing the actual product, only what is selected in the dropdown menu. For example, when a customer clicks an image, the variant is changed in the dropdown menu, but then if they choose to add that variant to their cart, the "original" product is selected rather than the one they have clicked on. Does anyone know how I might be able to fix this? 

 

Please visit www.robinblu.com and choose any product with variants to see what I am referring to. Click on an image thumbnail and once you try to add it to the cart, it will choose the first option unless you have specifically chosen that variant from the dropdown menu.

 

Thanks in advance. 


hey @Abby_155  did you implement the code discussed in this thread ? 

I will take a look on your store 

William Alencar
GoodFy Labs
Brazilian Shopify Experts
Getting Satisfied Customers around the World
Skype : william.br1
0 Likes
Highlighted
Excursionist
12 0 5

Thanks for your quick response! I can copy the code that was input. Please ignore the "notes" :)

 

// START NOTES FOR ABBY
  function setStyleVariant(alt) {
    if (alt) {
        // If there's an alt on the image, grab it and replace some funky text that's in there
        // for some reason, not sure why? It's like "Load image in Gallery viewer, E41"
        alt = alt.replace('Load image into Gallery viewer,', '').trim();
      console.log("alt->", alt);
        
        // This will set the "style/variant" to whatever value you want. I can't see any way to map the a tag that was clicked
        // to the values in the style/variant dropdown; maybe you can figure that part out?
        var exists = false;
        $('#SingleOptionSelector-0 option').each(function(){
            if (this.value == alt) {
                exists = true;
                return false;
            }
        });
        
        if (exists) {
        $('#SingleOptionSelector-0').val(alt);      
        }
      }
  }  
 
  var mobileImages = document.querySelectorAll(".mfp-image");
  // console.log("singlePreviewImages", singlePreviewImages);  
  for (i = 0; i < mobileImages.length; i++) {
    mobileImages[i].addEventListener('touchstart', function(e) {
      setStyleVariant(e.target.alt);     
    }, false);
  }
  
  var desktopImages = document.querySelectorAll(".change-variant"); 
  for (i = 0; i < desktopImages.length; i++) {
    desktopImages[i].addEventListener('click', function(e) {
      setStyleVariant(e.target.alt);     
    }, false);
  }
    
  
  // This next line meens wait until the browser has finished loading the html elements and it's "ready"
  $( document ).ready(function() {    
    // This attaches an event handler to the image preview a tags with the "change-variant" class on it (I added that class above)
    $('.change-variants').on("click", function() {
      // "this" is the actual a tag html element that was clicked
      console.log("change-variant->clicked", this);      
      
      // $this will be the a tag html element mentioned above but as a jquery object. 
      var $this = $(this);      
      console.log("change-variant->clicked as jquery object showing attribute", $this.attr("data-media-id"));
      
      // var $thumbnail = $this.find("img");
      var alt = $this.attr("alt");
      
      setStyleVariant(alt);      
    });
    // END NOTES FOR ABBY
0 Likes
Highlighted
Excursionist
12 0 5

Was able to get it resolved, thanks!

1 Like
Highlighted
Excursionist
20 0 4
How did you get it resolved? Can you now click on the variant image in Brooklyn theme, and the variant then changes in the drop down menu?
1 Like
Highlighted
Tourist
6 0 7

Looking for a solution to this as well.

1 Like
Highlighted
Tourist
3 0 3

I am facing the same issue, could you please let us know where in which section we need to input the code.

1 Like
Highlighted

@ATUP wrote:

I am facing the same issue, could you please let us know where in which section we need to input the code.


Hi @ATUP  the instructions has worked to my in Broklyn ... but you have to change variant selection to drop-down list ...

Did you implement the code ?

William Alencar
GoodFy Labs
Brazilian Shopify Experts
Getting Satisfied Customers around the World
Skype : william.br1
0 Likes
Highlighted
Tourist
3 0 3

@GoodfyLabs,

 

Thanks a lot for your response, No I have not implemented any code as of now. Could you please guide me, as I dnt know what code to implement and in which section i need to place the code.

 

Regards,

ATUP

1 Like
Highlighted

@ATUP wrote:

@GoodfyLabs,

 

Thanks a lot for your response, No I have not implemented any code as of now. Could you please guide me, as I dnt know what code to implement and in which section i need to place the code.

 

Regards,

ATUP


Hey Atup good morning 

 

Well first you should follow instructions HERE : https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-image...

 

Then, came back to this post and check @tim  post at first page ... and remember your variant selection must be changed to DROPDOWN ... this is the way I could get working for Brooklyn ... let me know if you have any trouble.

Best Regards 

William Alencar
GoodFy Labs
Brazilian Shopify Experts
Getting Satisfied Customers around the World
Skype : william.br1
0 Likes