// making sure correct variant image shows up
$(document).ready(function () {
// This ensures all selects will fire their 'change' event (in order)
let isUpdating = false;
function updateAllFromSelect() {
if (isUpdating) return;
isUpdating = true;
var s = document.getElementsByTagName('select');
for (let i = 0; i < s.length; i++) {
setTimeout(el => {
const e = document.createEvent('HTMLEvents');
e.initEvent('change', false, true);
el.dispatchEvent(e);
if (i === s.length - 1) isUpdating = false;
}, i * 10, s[i]);
}
}
// Sync data-wf-sku-bindings across images
var skuValue = $('[product-image="true"][data-wf-sku-bindings]').first().attr('data-wf-sku-bindings');
if (skuValue) {
$('[product-image="true"]').attr('data-wf-sku-bindings', skuValue);
storedSKUValue = skuValue;
}
const selects = $('select.variant-select');
selects.on('change', function (event) {
const selectedVal = $(this).val();
// restoreVariants()
if (selectedVal && selectedVal !== '' && selects.length >= 2) {
selects.each(function () {
if (this === event.target) return;
const currentVal = $(this).val();
if (!currentVal || currentVal === '') {
const firstValidOption = $(this).find('option[value]:not([value=""])').first();
if (firstValidOption.length) {
$(this).val(firstValidOption.val()).trigger('change');
}
}
});
updateAllFromSelect(); // <--- This is what drives full variant/image sync in your case!
}
updateProductImage($("[product-image='main']").attr('src'))
});
});