Swapping Multiple Instances of Image Variants

[dashdavid]

I'm trying to customize the Boundless theme to highlight multiple images at the top of the page in a Slick carousel with thumbnails to control the slides. I've got most all of the code working, but in order to wrap things up, I need to be able to swap out the large image and the small thumbnail used in the Slick carousel navigation when a variant is selected/changed. Where I'm running into issues is with the JS code that handles that swap.

The code (below) is what's built in to the tempalte by default and will swap out the first instance of the image, but I'm having trouble getting it to work to swap out each instance of the image. Does anyone have any thoughts? Thanks!

if (variant.featured_image) {
  var newImg = variant.featured_image;
  var el = theme.cache.$variantImage[0];
  Shopify.Image.switchImage(newImg, el);

//(more code goes here, but is irrelevant to this issue)

[tim]

Hi there,

I've also implemented a slider in the boundless theme, though I have no thumbs there. 

I use the slickGoTo  method to switch the slides to show the variant selected with drop-downs. The code is in the theme.js at line ~2015 (and other places), maybe it will help you.

You should not use switchImage, otherwise it will break your slider.

[dashdavid]

Tim - Thanks for the information. Unfortunately, I'm still not quite able to get this to work. If I add in your code between the "by tim for product page slider" comments, it breaks the ability to control the slider by clicking the thumbnails. Furthermore, when selecting a variant, I get an error in the console saying 

Uncaught TypeError: Cannot read property 'tiers' of undefined
    at sasoShowVolumeDiscountTiers (special-offers.js?1503691…:1)
    at special-offers.js?1503691…:1

JS isn't my strong suite, so I'm sure I'm missing something here. Hoping you can maybe point me in the right direction? Thanks!

[tim]

First thing to check is the version of Slick library -- the author moved from separate functions to methods at some time, so you may need to call something like:

 $element.slickGoTo( slideIndex );

instead of  cimilar code I have in my theme (I've upgraded to the latest version of Slick):

 $element.slick( 'slickGoTo', slideIndex );

[dashdavid]

That gets me closer. The slider behaves correctly again, but switching the variant still results in the console error:

Uncaught TypeError: Cannot read property 'tiers' of undefined
    at sasoShowVolumeDiscountTiers (special-offers.js?7670286848075419352:1)
    at special-offers.js?7670286848075419352:1

and the image it scrolls to is not the correct product variant image. Really appreciate the help here!

[dashdavid]

I should mention the console.log you have in there results in the message "Goto slide undefined" if that helps any...

[tim]

Yep, that means that the code can not find the proper element.

It's really hard to suggest anything without seeing the actual site, other than checking that there are classes and properties for which my code looks.

[dashdavid]

The site in question (with a product page w/ variants) is https://www.urbanoreganics.com/products/glam-gift-set 

In my case, the code we're discussing is in theme.js starting at line 1517. From what I can tell, all the selectors should be ok, but clearly something is not aligned.

[tim]

Ahh, now it's easy -- replace .data('index'); with .attr('index');

This is again because my slick is newer...

Cool -- you have two sliders -- I should probably implement this too.

Do not know about Special offers yet. Was it ok before my code?

[dashdavid]

Success - I really can't thank you enough!

I guess I had assumed the special-offers.js error was related to the slider stuff, but if I pull that code out I still seem to get the error, so it must be related to something else. Anyways, it doesn't seem to be causing any notable issues at this point so I'll leave that to another day to sort out.

Again - thanks so much for the help!