Swapping Multiple Instances of Image Variants

dashdavid
New Member
6 0 0

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)

 

0 Likes
tim
Shopify Expert
2846 115 935

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
dashdavid
New Member
6 0 0

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!

0 Likes
tim
Shopify Expert
2846 115 935

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 );

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
dashdavid
New Member
6 0 0

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!

0 Likes
dashdavid
New Member
6 0 0

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

0 Likes
tim
Shopify Expert
2846 115 935

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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
dashdavid
New Member
6 0 0

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.

0 Likes
tim
Shopify Expert
2846 115 935

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?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
dashdavid
New Member
6 0 0

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!

0 Likes