I have created a custom Javascript for auto-selecting the first available variant options combination when the user selects any option value on the product page. This works great in Chrome, Egde, and even Safari on Mac, however, for some unknown reason, it does not work in Safari on iPhone. I have checked iPhone's Safari setting to allow Javascript and also I have the latest IOS & Safari version in use.
I have already debugged the iPhone version with desktop Developer tools and Javascript is loaded indeed, however, no action fires. Tried with console.log as well and it really seems that for some reason Safari does not run any of my custom Javascript on iPhone & Safari combo. E.g. Chrome works just fine on iPhone.
I am using Empire theme.
Any thoughts on what might be wrong?
The product page preview can be accessed here: https://31p8oaencfgfgcv7-62656381116.shopifypreview.com/products/apple-iphone-12?variant=42421168373...
Javascript code is referred to in the theme.liquid file before the closing </body> tag as follows:
<script src="{{ 'custom.js' | asset_url }}" type="text/javascript"></script>
My custom Javascript code:
document.addEventListener('DOMContentLoaded', function() {
var productJsonElement = document.getElementById('ProductJson-product-template');
if (!productJsonElement) return;
var productJson = JSON.parse(productJsonElement.innerHTML);
var variants = productJson.variants;
var optionInputs = document.querySelectorAll('input[data-variant-option-value]');
function selectVariantBasedOnChangedOption(changedOptionIndex, changedOptionValue) {
var matchingVariant = variants.find(function(variant) {
var isSelectedOptionValue = variant.options[changedOptionIndex].toLowerCase() === changedOptionValue.toLowerCase();
return isSelectedOptionValue && variant.available;
});
if (!matchingVariant) return;
var optionIndex = 0;
matchingVariant.options.forEach(function(option) {
if (optionIndex !== changedOptionIndex) {
var matchingInput = Array.from(optionInputs).find(function(input) {
return (
input.getAttribute('data-variant-option-value-index') == optionIndex &&
input.value.toLowerCase() === option.toLowerCase()
);
});
if (matchingInput) {
matchingInput.checked = true;
matchingInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
}
}
optionIndex++;
});
}
optionInputs.forEach(function(input) {
input.addEventListener('change', function(event) {
if (event.cancelable) {
event.preventDefault();
return;
}
var changedOptionIndex = parseInt(input.getAttribute('data-variant-option-value-index'));
selectVariantBasedOnChangedOption(changedOptionIndex, input.value);
});
});
});
