I need to make variant active or inactive on there availablity

Aashish_Bhatt
Excursionist
40 1 1

Hi I need help

I need to show variant options on there availability on product

sending you the code sample if product variant is not available I want to cross the variant size on the basis of adding class disabled

{%- assign swatch_file_extension = 'png' -%}
{%- assign is_color = false -%}
{%- assign color_swatch_drop = option_drop -%}
{%- assign color_option_index = 0 -%}

{%- if settings.product_color_swatches -%}
  {%- for option in product.options_with_values -%}
    {%- if option == color_swatch_drop -%}
      {%- assign color_option_index = forloop.index0 -%}
      {%- assign downcased_option = color_swatch_drop.name | downcase -%}
      {%- if downcased_option contains 'color' or downcased_option contains 'colour' -%}
        {%- assign is_color = true -%}
      {%- endif -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

<div class="variant-wrapper variant-wrapper--{{ settings.variant_type }} js">
  <label class="variant__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}{% unless settings.variant_labels_enable %} hidden-label{% endunless %}"
    for="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
    {{ option.name }}
    {%- if is_color -%}
      <span class="variant__label-info">
        &mdash;
        <span
          id="VariantColorLabel-{{ section_id }}-{{ forloop.index0 }}"
          data-option-index="{{ color_option_index }}">
          {{ option.selected_value }}
        </span>
      </span>
    {%- endif -%}
  </label>
  {%- assign option_index = forloop.index -%}
  <fieldset class="variant-input-wrap"
    name="{{ option.name }}"
    data-index="option{{ option_index }}"
    id="ProductSelect-{{ section_id }}-option-{{ forloop.index0 }}">
    {%- for value in option.values -%}
      {%- assign product_available = true -%}
      {%- if product.options.size == 1 -%}
        {%- assign product_available = product.variants[forloop.index0].available -%}
      {%- endif -%}
      <div
        class="variant-input"
        data-index="option{{ option_index }}"
        data-value="{{ value | escape }}">
        <input type="radio"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          value="{{ value | escape }}"
          data-index="option{{ option_index }}"
          name="{{ option.name }}"
          class="variant__input-{{ section_id }}{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch-{{ section_id }}{% endif %}"
          {% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
          {% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
          id="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">
        {%- if is_color -%}
          {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
          {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label color-swatch color-swatch--{{ value | handle }}{% unless product_available %} disabled{% endunless %}"
            style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};"
          >
            {{ value | escape }}
          </label>
        {%- else -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label{% unless product_available %} disabled{% endunless %}">{{ value | escape }}
        </label>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </fieldset>
</div>

 

eg: if product is not avilable i want to add class disabled to variant__button-label

If helpful then please Like and Accept Solution.
Want to modify or custom changes, Hire me.
- Feel free to contact me on Email: development.aashish@gmail.com regarding any help.
Shopify Expert | Skype : aashish.bhatt91
0 Likes