How to disable color variant that is not applicable to a size but available to other sizes

[Ann07]

Hi All, 

I have a product that comes in 3 sizes and each has color variants. I would like to know if it is possible that if a color does not apply to the 2nd size but is available in the 1st and 3rd sizes, how can I hide the certain color that doesn't apply to the specific size of that product? (I don't know if I make myself any sense but here's an example) 

For example:

The product is a T-shirt.

Size - Color Variants:

Small - red ; Small - white ; Small - black

XL - red ; XL - black

XXL red ; XXL - white ; XXL - black

The color white is only available for sizes Small and XXL. In the color variant selection, how I will disable to select the color white if in the size variant selection they choose the XL? and if they choose the sizes of small and XXL, the white variant will show up again? 

Appreciate your answer 🙂 Super thank you!

[EasifyApps]

Hi @Ann07,

If you're looking to hide unavailable variants, you can achieve this by adding custom code to the Custom Liquid section in 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>