Help thumbnails don't work when I click on them

[rochelin_]

Hello friends, I have the following problem

I'm making a store with my client's shrine pro theme, but I realize that when I click on the thumbnails to change the main image, nothing happens. The arrows work, but the thumbnails don't work.

how to fix this i need your help friends
thank you.

[namphan]

Hi @rochelin_,

Please send the website link, I will check it for you

[steve_michael2]

Hi @rochelin_   , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[rochelin_]

the link : https://carnau.com/products/presbyopic-glasses

[rochelin_]

this is the link : https://carnau.com/products/presbyopic-glasses

[steve_michael2]

Hi @rochelin_ ,

I have checked and see you have added the SelecVariantByClickingImage code in the theme.js file, everything is working properly.

The only reason why the images you added won't work with this function is your handler function has this line:

const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');

It will take all the images that contain /products/ , then assign handlers to each of those images. However I see your images are formatted like this:

//cdn.shopify.com/s/files/1/0595/9339/2336/files/DSC_0051_150x150.jpg?v=1683938371

So that, it won't get the images you add -> Doesn't work.

There are 2 solutions given here:

1, Change another image containing /products/ and that code will work

2, You can try this code, replace productJson.forEach in if (productJson.length > 0){ in function _selectVariant:

productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const thumbnails1 = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');
        const thumbnails2 = document.querySelectorAll('#'+ sectionId + ' img[src*="/files/"]');
        if (thumbnails1.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails1.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }else if (thumbnails2.length > 1) {
          const productObject = JSON.parse(product.innerHTML);
          const variantImages = this._createVariantImage(productObject);
          // need to check variants > 1
          if (productObject.variants.length > 1) {
            thumbnails2.forEach((thumbnail) => {
              thumbnail.addEventListener('click', (e) =>
                this._updateVariant(e, sectionId, productObject, variantImages),
              );
            });
          }
        }
      });

Note: Make sure the number of brackets {} is still full. Since I don't have access to your store to test this code, I'm not sure if it works well in your case. Do if it still doesn't work, you can give me access to your store and I'll help you.

Hope this suggestion can help you.

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[rochelin_]

In which js or liquid file should I put this code?

[steve_michael2]

• Open the  theme.js (or the relevant JavaScript file mentioned in the issue).

• Search for the function _selectVariant (use Ctrl+F or Cmd+F) to locate where the productJson.forEach loop is written.

• Replace the existing productJson.forEach logic with the provided code snippet.

[rochelin_]

it's not working too

[namphan]

Hi @rochelin_,

Please go to secondary.js file and add code here:

Code:

function debounce(fn, wait) {
    let t;
    return (...args) = > {
        clearTimeout(t), t = setTimeout(() = > fn.apply(this, args), wait)
    }
}

Because it is currently saying function debounce is not defined.

[rochelin_]

it's not working

[namphan]

Hi @rochelin_,

This will need to be debugged in detail, can I send you a collaborator invite?

I will check it in detail