Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello, maybe you know how to make the first option different from the second option, for example: the first option (Android, iPhone). Second depending on the first choice, if iPhone, then in the second choice iPhone models, if Android then in the second option would be Android models, for example Samsung. There should be a free way, I know there are paid apps that do it, but I would like it for free.
if you don't mind rolling up your sleeves https://shopify.dev/docs/themes/product-merchandising/variants
also https://shopify.dev/docs/themes/architecture/templates/product#line-item-properties
I can't find the code or the part what I need, could you send it here?
Hi @Danielyzas,
You don't need to use an app to hide irrelevant variants; just add some custom code to the Custom Liquid of your theme.
<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];
variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();
// gather a list of valid combinations of options, check to see if the input passed to it matches in a chain of valid options.
function validCombo(inputValue, optionLevel) {
for(let i = 0; i < productJson.length; i++) {
if(optionLevel == 1){
if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) { return true; }
} else {
if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) { return true; }
}
}
return false;
}
function rebuildOptions() {
selectedOptions = fieldsets.map((fieldset) => {
return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
});
//loop through the option sets starting from the 2nd set and disable any invalid options
for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');
inputs.forEach(input => {
input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
if(pickerType == 'radios'){
//get the label for the current input (this is what the user clicks, the "pill")
const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);
label.style.display = (input.disabled) ? "none" : ""; //Hide the option, or comment this line out and use the following lines to style it..
//label.style.opacity = (input.disabled) ? 0.5 : 1;
//label.style.borderStyle = (input.disabled) ? "dashed" : "solid";
//label.style.textDecoration = (input.disabled) ? "none" : "";
} else {
input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
}
});
}
//if the default selected option is disabled with the function above, select the first available option instead
for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
if(pickerType == 'radios'){
if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
}
} else {
if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
}
}
//if a new option has been selected, restart the whole process
if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
}
}
</script>
I putted the liquid code into the product information and it doesin't work, can you help?
It's worth noting that after adding the custom code, immediate updates may not reflect on the preview panel. To view the changes, simply save your work and refresh the page.
I've retested the code, and it continues to function effectively.
What theme are you using? I did even publish the store it still didn't work.
I've got it working with Dawn, Refresh, and Sense themes. Which theme are you using?
I use studio theme
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024