Hide unavailable variants with craft theme

[Cosydayscrochet]

Is it possible to hide unavailable variants with the Craft theme?

I had my shop built for me, but I'm struggling with this one issue mostly.

A lot of my items have two drop down options. One being type of item and the other a size guide. Different types of items need different sizes. You can see what I mean in this photo:

Is there a way to hide the 'unavailable' options? 

I've tried using the HiVar app but it doesn't seem to work

I just want to keep it clean

Thanks!

[steve_michael2]

Hi @Cosydayscrochet  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[Cosydayscrochet]

https://cosydayscrochet.com/

 password is: cosydays24

[Moeed]

Hey @Cosydayscrochet 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
document.addEventListener("DOMContentLoaded", function () {
    const selectElement = document.querySelector(".select__select"); 
    if (selectElement) {
        const options = selectElement.querySelectorAll("option");
        options.forEach(option => {
            if (option.textContent.includes("Unavailable")) {
                option.style.display = "none"; 
            }
        });
    }
});
</script>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Cosydayscrochet]

Sorry to say this didn't work

[steve_michael2]

Steps to Locate global.js or Equivalent File

1. Go to Shopify Admin > Online Store > Themes.
2. Click on "Actions" > "Edit Code".
3. Navigate to the Assets folder in the left-hand sidebar.
4. Look for a file named:
   • global.js and paste the code

const variantSelects = (document.querySelector('variant-selects')) ? document.querySelector('variant-selects') : document.querySelector('variant-radios');
const pickerType = (variantSelects.querySelectorAll('fieldset').length > 0) ? 'radios' : '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();

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; }
    }
  }
}

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);
    });
    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'){
            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;
        }
        });
    }
    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(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
    }
}

[Cosydayscrochet]

Sorry to say this didn't work

[Moeed]

Hey @Cosydayscrochet 

Share your store URL and Password if enabled.

Best Regards,

Moeed

[Cosydayscrochet]

still trying to solve this. I'm wondering if I've just set up my variants incorrectly as I've tried all the options I can find on here and youtube and still no success

I've grouped them by style then added the size variants that apply to each style. Is this incorrect? I'm really stumped and just want a smooth running and cohesive store.

Thanks

[vancouver_k]

did you ever solve this? I have the same issue with the same theme