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.