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.
Hi @rochelin ,
Please send the website link, I will check it for you
Hi @rochelin , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
this is the link : https://carnau.com/products/presbyopic-glasses
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!
In which js or liquid file should I put this code?
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.
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.
it’s not working
it’s not working too
Hi @rochelin ,
This will need to be debugged in detail, can I send you a collaborator invite?
I will check it in detail
