Solved

How to display only available options for product variants?

Tomo-chimahaga
Shopify Partner
1 0 0

Hello.
We are facing a problem regarding the display of options.
We are using the 1.9.9. version of the Modular theme.

 

In one product, we have two options.
For example
Option 1: red, blue, black, yellow
Option 2: S, M, L, XL
When a customer selects one of option 1, I want to hide the variant of option 2 that is out of stock or not sold in the first place from the options.

I'm not sure where to improve this due to the old theme I'm using, a lot of app insert code and me not being a coding savvy person.
I have copied and pasted the form part of the product, but let me know if you need any other information.

 

{%- form 'product', product, data-productid: product.id, class: 'productForm', data-enable-color-swatches: enable_color_swatches, data-product-id: product.id -%}
<!-- Begin ReCharge code -->
{% if product.available %}{% render 'subscription-product' with product as product %}{% endif %}
<!-- End ReCharge code -->

	<div class="productForm-block{% unless enable_variant_boxes %} productForm-block--options-inline{% endunless %}{% if enable_color_swatches %} productForm-block--swatches{% endif %}">
		{%- unless product.has_only_default_variant -%}
			{%- if enable_variant_boxes -%}
				{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- assign first_variant = product.selected_or_first_available_variant -%}
これー:{{ product.selected_or_first_available_variant.url }}
{%- for option in product.options_with_values -%}
	{%- assign option_index = option.position | minus: 1 -%}
	{%- assign downcased_option = option.name | downcase -%}
	{%- assign is_color = false -%}
	{%- if color_label contains downcased_option -%}
		{%- assign is_color = true -%}
	{%- endif -%}

    {%- liquid
        assign variants_available_arr = product.variants | map: 'available'
        assign variants_option1_arr = product.variants | map: 'option1'
        assign variants_option2_arr = product.variants | map: 'option2'
        assign variants_option3_arr = product.variants | map: 'option3'
                    
        assign product_form_id = 'product-form-' | append: section.id
    -%}

	{%- if is_color and enable_color_swatches -%}
		{%- comment -%} /partials/product-swatch.liquid {%- endcomment -%}

{%- assign file_extension = 'png' -%}
{%- assign first_variant = product.selected_or_first_available_variant -%}

<div class="variant-wrapper variant-wrapper--color" data-option="option{{ option.position }}">
	<label class="variant-label--color" for="SingleOptionSelector-{{ forloop.index0 }}-{{ product.id }}">
		{{- option.name -}}
		<span class="variant-label__value" data-color-label>
			{{- option.selected_value -}}
		</span>
	</label>

	<fieldset
		id="SingleOptionSelector-{{ forloop.index0 }}-{{ product.id }}"
		class="variant-input-wrap"
		data-index="option{{ option.position }}">
		<div class="swatch{% if settings.color_swatches_style == 'square' %} swatch--square{% endif %}">
			{%- for value in option.values -%}
              {%- liquid
                  assign option_disabled = true
              
                  for option1_name in variants_option1_arr
                    case option.position
                      when 1
                        if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 2
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 3
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                    endcase
                  endfor -%}
				<div data-value="{{ value | escape }}" class="swatch__element">
					<input
						id="option-{{ value | handle }}-{{ forloop.index0 }}-{{ section.id }}"
						class="swatch__input{% if option_disabled %} disabled{% endif %}"
						type="radio"
						name="{{ option.name }}"
						value="{{ value | escape }}"
						data-color-swatch
						data-single-option-selector
						data-index="option{{ option.position }}"
						{% if first_variant.options[option_index] == value %}checked="checked"{% endif %}>
					<label class="variant__button-label--color swatch__label" for="option-{{ value | handle }}-{{ forloop.index0 }}-{{ section.id }}">
						<span class="swatch__color swatch__color--{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})"></span>
						<span class="accessible-label">{{ value }}</span>
					</label>
				</div>
			{%- endfor -%}
		</div>
	</fieldset>
</div>

	{%- else -%}
		<div class="variant-wrapper{% if enable_variant_boxes %} variant-wrapper--boxes{% endif %}" data-option="option{{ option.position }}">
			<label class="variant-label" for="SingleOptionSelector-{{ forloop.index0 }}-{{ product.id }}">
				{{- option.name -}}
			</label>

			<fieldset
				id="SingleOptionSelector-{{ forloop.index0 }}-{{ product.id }}"
				class="variant-input-wrap variant-input-wrap--boxes"
				data-index="option{{ option.position }}">
				{%- for value in option.values -%}
                {%- liquid
                  assign option_disabled = true
              
                  for option1_name in variants_option1_arr
                    case option.position
                      when 1
                        if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 2
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 3
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                    endcase
                  endfor -%}
					<div class="variant-field">
						<input
							id="option-{{ value }}-{{ forloop.index0 }}-{{ section.id }}"
							class="visually-hidden variant-input{% if option_disabled %} disabled{% endif %}"
							type="radio"
                            form="{{ product_form_id }}"
							name="{{ option.name }}"
							value="{{ value | escape }}"
							data-single-option-selector
							data-index="option{{ option.position }}"
							first-or-selected-option={{ first_variant.options[option_index] }}
							{% if option.selected_value == value %}
                                checked
                            {% endif %}
                            >
						<label class="variant__button-label" for="option-{{ value }}-{{ forloop.index0 }}-{{ section.id }}">
							{{- option.position -}}の{{- value -}}
						</label>
					</div>
				{%- endfor -%}
			</fieldset>
		</div>
	{%- endif -%}
{%- endfor -%}
			{%- else -%}
				{%- for option in product.options_with_values -%}
					{%- if enable_color_swatches -%}
						{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
						{%- assign downcased_option = option.name | downcase -%}
						{%- if color_label contains downcased_option -%}
							{%- comment -%} /partials/product-swatch.liquid {%- endcomment -%}

{%- assign file_extension = 'png' -%}
{%- assign first_variant = product.selected_or_first_available_variant -%}

<div class="variant-wrapper variant-wrapper--color" data-option="option{{ option.position }}">
	<label class="variant-label--color" for="SingleOptionSelector-{{ forloop.index0 }}-{{ product.id }}">
		{{- option.name -}}
		<span class="variant-label__value" data-color-label>
			{{- option.selected_value -}}
		</span>
	</label>

	<fieldset
		id="SingleOptionSelector-{{ forloop.index0 }}-{{ product.id }}"
		class="variant-input-wrap"
		data-index="option{{ option.position }}">
		<div class="swatch{% if settings.color_swatches_style == 'square' %} swatch--square{% endif %}">
			{%- for value in option.values -%}
                {%- liquid
                  assign option_disabled = true
              
                  for option1_name in variants_option1_arr
                    case option.position
                      when 1
                        if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 2
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 3
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                    endcase
                  endfor -%}
				<div data-value="{{ value | escape }}" class="swatch__element">
					<input
						id="option-{{ value | handle }}-{{ forloop.index0 }}-{{ section.id }}"
						class="swatch__input{% if option_disabled %} disabled{% endif %}"
						type="radio"
						name="{{ option.name }}"
						value="{{ value | escape }}"
						data-color-swatch
						data-single-option-selector
						data-index="option{{ option.position }}"
						{% if first_variant.options[option_index] == value %}checked="checked"{% endif %}>
					<label class="variant__button-label--color swatch__label" for="option-{{ value | handle }}-{{ forloop.index0 }}-{{ section.id }}">
						<span class="swatch__color swatch__color--{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})"></span>
						<span class="accessible-label">{{ value }}</span>
					</label>
				</div>
			{%- endfor -%}
		</div>
	</fieldset>
</div>

						{%- else -%}
							{%- comment -%} /partials/product-option.liquid {%- endcomment -%}
{%- capture selector_id -%}
	{%- if shop_bar -%}
		ShopBar-
	{%- else -%}
		Product-
	{%- endif -%}
	SingleOptionSelector-{{- forloop.index0 -}}-{{- product.id -}}
{%- endcapture -%}

<div class="selector-wrapper" data-option="option{{ option.position }}">
	<label for="{{ selector_id }}">
		{{- option.name -}}
	</label>

	<select
		id="{{ selector_id }}"
		data-single-option-selector
		data-index="option{{ option.position }}">
		{%- for value in option.values -%}
            {%- liquid
                  assign option_disabled = true
              
                  for option1_name in variants_option1_arr
                    case option.position
                      when 1
                        if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 2
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 3
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                    endcase
                  endfor -%}
			<option
                class="{% if option_disabled %}disabled{% endif %}"
				value="{{ value | escape }}"
				{% if option.selected_value == value %}selected="selected"{% endif %}>
				{{- value -}}
			</option>
		{%- endfor -%}
	</select>
	{%- render 'icon-arrow' -%}
</div>
						{%- endif -%}
					{%- else -%}
						{%- comment -%} /partials/product-option.liquid {%- endcomment -%}
{%- capture selector_id -%}
	{%- if shop_bar -%}
		ShopBar-
	{%- else -%}
		Product-
	{%- endif -%}
	SingleOptionSelector-{{- forloop.index0 -}}-{{- product.id -}}
{%- endcapture -%}

<div class="selector-wrapper" data-option="option{{ option.position }}">
	<label for="{{ selector_id }}">
		{{- option.name -}}
	</label>

	<select
		id="{{ selector_id }}"
		data-single-option-selector
		data-index="option{{ option.position }}">
		{%- for value in option.values -%}
            {%- liquid
                  assign option_disabled = true
              
                  for option1_name in variants_option1_arr
                    case option.position
                      when 1
                        if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 2
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                      when 3
                        if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
                          assign option_disabled = false
                        endif
                    endcase
                  endfor -%}
			<option
                class="{% if option_disabled %}disabled{% endif %}"
				value="{{ value | escape }}"
				{% if option.selected_value == value %}selected="selected"{% endif %}>
				{{- value -}}
			</option>
		{%- endfor -%}
	</select>
	{%- render 'icon-arrow' -%}
</div>
					{%- endif -%}
				{%- endfor -%}
			{%- endif -%}
		{%- endunless -%}

		<label for="product-select--{{ section.id }}" class="accessible-label">{{ 'general.accessibility.select_variant' | t }}</label>
		{%- if variants_count > 1 -%}
			<select
				name="id" data-productid="{{ product.id }}"
				id="product-select--{{ section.id }}"
				class="product-single__variants"
				data-product-id="{{ product.id }}"
				data-product-select>
				{%- for variant in product.variants -%}
{% comment %} Wholesale_Club_Product_Prices Start {% endcomment %}
{% assign base_product = product %}
{% assign base_variant = variant %}

{% if shop.metafields.sawholesale['base_price'] == blank %}
  {% assign base_price = 'compare_at_price' %}
{% else %}
  {% assign base_price = shop.metafields.sawholesale['base_price'] %}
{% endif %}

{% assign saw_discount = 0 %}{% assign saw_has_discount = false %}

{% if customer.tags != blank %}
  {% for mf in base_product.metafields.sawholesale %}
    {% capture product_customer_tag %}{{ mf | first | replace: 'discount_', '' }}{% endcapture %}
    {% if customer.tags contains product_customer_tag %}
      {% assign saw_has_discount = true %}
      {% assign discount_key = product_customer_tag | prepend: 'discount_' %}
      {% assign price_key = product_customer_tag | prepend: 'price_' %}
      {% assign saw_discount = base_product.metafields.sawholesale[discount_key] | divided_by: 100.0 %}
    {% endif %}
  {% endfor %}
{% endif %}

{% assign saw_discount = 1 | minus: saw_discount %}

{% if base_price == 'price' or base_variant.compare_at_price == blank  or base_variant.compare_at_price == 0 or base_variant.compare_at_price < base_variant.price %}
  {% assign saw_variant_compare_at_price = base_variant.price %}
{% else %}
  {% assign saw_variant_compare_at_price = base_variant.compare_at_price %}
{% endif %}

{% assign cpe = shop.metafields.sawholesale['cpe'] | default: "true" %}
{% if base_variant.metafields.sawholesale[price_key] != blank and cpe == "true" %}
  {% assign saw_variant_price = base_variant.metafields.sawholesale[price_key] %}
{% else %}
  {% assign saw_variant_price = saw_variant_compare_at_price | times: saw_discount %}
{% endif %}

{% if saw_has_discount == false or saw_variant_price >= saw_variant_compare_at_price %}
  {% assign WCProduct_Price = base_product.price %}
  {% assign WCProduct_ComparePrice = base_product.compare_at_price %}
  {% assign WCProduct_PriceMin = base_product.price_min %}
  {% assign WCProduct_ComparePriceMin = base_product.compare_at_price_min %}
  {% assign WCProduct_PriceMax = base_product.price_max %}
  {% assign WCProduct_ComparePriceMax = base_product.compare_at_price_max %}
  {% assign WCProduct_VariantPrice = base_variant.price %}
  {% assign WCProduct_VariantComparePrice = base_variant.compare_at_price %}
{% else %}   
  {% assign WCProduct_Price = saw_variant_price %}
  {% assign WCProduct_PriceMin = base_product.price_min | times: saw_discount %}
  {% assign WCProduct_PriceMax = base_product.price_max | times: saw_discount %}
  {% assign WCProduct_ComparePrice = saw_variant_compare_at_price %}
  {% if base_product.compare_at_price_min != 0 %}{% assign WCProduct_ComparePriceMin = base_product.compare_at_price_min %}{% else %}{% assign WCProduct_ComparePriceMin = base_product.price_min %}{% endif %}
  {% if base_product.compare_at_price_max != 0 %}{% assign WCProduct_ComparePriceMax = base_product.compare_at_price_max %}{% else %}{% assign WCProduct_ComparePriceMax = base_product.price_max %}{% endif %}
  {% assign WCProduct_VariantPrice = saw_variant_price %}
  {% assign WCProduct_VariantComparePrice = saw_variant_compare_at_price %}
{% endif %}
{% comment %} Wholesale_Club_Product_Prices End {% endcomment %}

					{%- if variant.available -%}
						<option
							{% if variant == first_variant %} selected="selected" {% endif %}
							data-sku="{{ variant.sku }}"
							value="{{ variant.id }}">{{ variant.title }} - {{ WCProduct_VariantPrice | money_with_currency }}</option>
					{%- else -%}
						<option disabled="disabled">{{ variant.title }} - {{ 'products.labels.sold_out' | t }}</option>
					{%- endif -%}
				{%- endfor -%}
			</select>
		{%- else -%}
			<input name="id" data-productid="{{ product.id }}" id="product-select--{{ section.id }}" data-product-id="{{ product.id }}" type="hidden" value="{{ first_variant.id }}">
		{%- endif -%}
	</div>

	<div class="productForm-block">
		<div class="qty__adjust">
			<input type="number" class="qty__adjust-input" name="quantity" id="quantity--{{ section.id }}" value="1" min="1">
			<button type="button" class="qty__adjust-btn js-qty__adjust-btn decrease" aria-label="{{ 'general.accessibility.decrease' | t }}">{% render 'icon-minus' %}</button>
			<button type="button" class="qty__adjust-btn js-qty__adjust-btn increase" aria-label="{{ 'general.accessibility.increase' | t }}">{% render 'icon-plus' %}</button>
		</div>

		<div class="productForm-buttons{% if settings.color_button_primary_bg == settings.color_background_new %} productForm-buttons--alt{% endif %}">
			<button class="productForm-submit{% if section.settings.enable_payment_button and settings.enable_accept_terms == false %} button--alt{% endif %}" data-ajax="{{ settings.enable_ajax_cart }}" type="submit" data-handle="{{product.handle}}" {% if sold_out %}disabled{% endif %} data-add-to-cart>
				<span data-add-to-cart-text>
					{%- unless sold_out -%}
						{{- 'products.form.submit' | t -}}
					{% else %}
						{{- 'products.form.sold_out' | t -}}
					{%- endunless -%}
				</span>
			</button>
		</div>

		{%- unless settings.enable_accept_terms -%}
			{%- comment -%} Show payment button if section level setting is true or the global setting for Quick view is true {%- endcomment -%}
			{%- if section.settings.enable_payment_button or settings.enable_payment_button -%}
				<div class="productForm-buttons{% if settings.color_button_primary_bg == settings.color_background_new %} productForm-buttons--alt{% endif %}" data-payment-button="{{ section.settings.enable_payment_button }}" data-payment-button-quickview="{{ settings.enable_payment_button }}">
					{{- form | payment_button -}}
				</div>
			{%- endif -%}
		{%- endunless -%}

	</div>
{%- endform -%}

thank you.

Accepted Solution (1)

EasifyApps
Shopify Partner
541 16 42

This is an accepted solution.

Hi @Tomo-chimahaga,

You can try adding the following custom code into your Custom liquid to hide available variants:

 

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

 

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

View solution in original post

Replies 2 (2)

EasifyApps
Shopify Partner
541 16 42

This is an accepted solution.

Hi @Tomo-chimahaga,

You can try adding the following custom code into your Custom liquid to hide available variants:

 

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

 

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

Naren1
Shopify Partner
54 1 27

Hi @Tomo-chimahaga 

We've launched an app to hide sold out variants to solve this common problem

HiVar : Hide Sold Out Variants

https://apps.shopify.com/hivar-hide-sold-out-variants

currently it supports all Online Store 2.0 themes like Modular theme
App is free for single-option free themes and paid if you have 2-3 options
Check it out and feel free to reach out to customer support if you have any queries