Why isn't the price changing after selecting a product variant on Simple theme?

Technical Q&A
1

Hello community

I am using Simple them for my store. I was about to release it but noticed some products with variants the price is not changing after clicking the image. And also noticed when picking a different variant from the drop down menu the image dont change neither. I have been looking around for solutions and changes in the code but nothing seems to work.

Can any of you give me a hand?

You can access my store preview here
https://vytbglggz1coxi3c-58840252566.shopifypreview.com

Thanks in advance.

2

Just in case this help. I have tried the Minimal theme as well and it is having the same issue. No changes to the code on this theme so I dont think the changes I made to the Simple theme may be causing the problem.

Once again, any help will be greatly appreciated. Thanks!

3

So I realized the variants didnt have images assigned so I uploaded them, however this was only one part of the solution.

The second part was to add this code into Assets - Theme.JS.Liquid and that fixed the issue

const selectVariantByClickingImage = {
// Create variant images from productJson object
_createVariantImage: function (product) {
const variantImageObject = {};
product.variants.forEach((variant) => {
if (
typeof variant.featured_image !== ‘undefined’ &&
variant.featured_image !== null
) {
const variantImage = variant.featured_image.src
.split(‘?’)[0]
.replace(/http(s)?:/, ‘’);
variantImageObject[variantImage] =
variantImageObject[variantImage] || {};
product.options.forEach((option, index) => {
const optionValue = variant.options[index];
const optionKey = option-${index};
if (
typeof variantImageObject[variantImage][optionKey] === ‘undefined’
) {
variantImageObject[variantImage][optionKey] = optionValue;
} else {
const oldValue = variantImageObject[variantImage][optionKey];
if (oldValue !== null && oldValue !== optionValue) {
variantImageObject[variantImage][optionKey] = null;
}
}
});
}
});
return variantImageObject;
},
updateVariant: function (event, id, product, variantImages) {
const arrImage = event.target.src
.split(‘?’)[0]
.replace(/http(s)?:/, ‘’)
.split(‘.’);
const strExtention = arrImage.pop();
const strRemaining = arrImage.pop().replace(/[[email removed] ‘’);
const strNewImage = ${arrImage.join('.')}.${strRemaining}.${strExtention};
if (typeof variantImages[strNewImage] !== ‘undefined’) {
product.variants.forEach((option, index) => {
const optionValue = variantImages[strNewImage][option-${index}];
if (optionValue !== null && optionValue !== undefined) {
const selects = document.querySelectorAll(‘#’+ id + ’ [class*=single-option-selector]‘);
const options = selects[index].options;
for (let option, n = 0; (option = options[n]); n += 1) {
if (option.value === optionValue) {
selects[index].selectedIndex = n;
selects[index].dispatchEvent(new Event(‘change’));
break;
}
}
}
});
}
},
_selectVariant: function() {
const productJson = document.querySelectorAll(’[id^=ProductJson-‘);
if (productJson.length > 0) {
productJson.forEach((product) => {
const sectionId = product.id.replace(“ProductJson-”, “shopify-section-”);
const thumbnails = document.querySelectorAll(’#‘+ sectionId + ’ img[src*=“/products/”]’);
if (thumbnails.length > 1) {
const productObject = JSON.parse(product.innerHTML);
const variantImages = this._createVariantImage(productObject);
// need to check variants > 1
if (productObject.variants.length > 1) {
thumbnails.forEach((thumbnail) => {
thumbnail.addEventListener(‘click’, (e) =>
this._updateVariant(e, sectionId, productObject, variantImages),
);
});
}
}
});
}
},
};
if (document.readyState !== ‘loading’) {
selectVariantByClickingImage._selectVariant();
} else {
document.addEventListener(
‘DOMContentLoaded’,
selectVariantByClickingImage._selectVariant(),
);
}