In my store I have a product that has the following variants: color, size and length.
For example I have the following quantities (grouped by size) for this product:
- color: blue, size: 40/54, length: 32, quantity: 5
- color: blue, size: 40/54, length: 34, quantity: 5
- color: blue, size: 40/54, length: 36, quantity: 5
- color: blue, size: 42/56, length: 32, quantity: 5
- color: blue, size: 42/56, length: 34, quantity: 5
- color: blue, size: 42/56, length: 36, quantity: 5
- color: blue, size: 44/58, length: 32, quantity: 0
- color: blue, size: 44/58, length: 34, quantity: 5
- color: blue, size: 44/58, length: 36, quantity: 5
As you can see only the product with size 44/58 and length 32 is sold out, but in my store it displays that everything is available and if the user selects the size 44/58 with the length 32 a random length is chosen for him. How can I fix this? I have a third part theme that doesn't have support and I can't change it with another theme.
Here's the code of the file swatch.liquid that manages the display of the variants:
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% capture variantsswatch %} {% endcapture %}
{% if swatch == "Color" %}
{% capture variantsswatch %}{{ 'products.variants.color' | t }}{% endcapture %}
{% elsif swatch == "Size" %}
{% capture variantsswatch %}{{ 'products.variants.size' | t }}{% endcapture %}
{% else %}
{% capture variantsswatch %}{{ swatch }}{% endcapture %}
{% endif %}
{% if swatch == blank %}
<div class="swatch error">
<p>You must include the snippet swatch.liquid with the name of a product option.</p>
<p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
<p>Example: <code>{% raw %}{% include 'swatch' with 'Colore' %}{% endraw %}</code></p>
</div>
{% else %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign is_lunghezza = false %}
{% assign option_index = 0 %}
{% assign indexChild = 0 %}
{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
{% assign indexChild = forloop.index %}
<style rel="stylesheet" type="text/css">
.proVariants .selector-wrapper:nth-child({{ indexChild }}){display: none;}
.maxus-productdetail__options:not(:last-child) {
margin-right: 20px;
}
</style>
{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'colore' or downcased_option contains 'colour' or downcased_option contains 'color' %}
{% assign is_color = true %}
{% endif %}
{% if downcased_option contains 'lunghezza' or downcased_option contains 'length' %}
{% assign is_lunghezza = true %}
{% endif %}
{% endif %}
{% endfor %}
{% unless found_option %}
{% else %}
<div class="maxus-productdetail__options{% unless section.settings.spd_style == "pd_style2" %} {% endunless %} {% if is_color %}var-colore{% endif %}">
<div class="{% if settings.swatch_style == "sw_radio1" or settings.swatch_style == "sw_radio2" %} swatch_radio1 {% elsif settings.swatch_style == "sw_radio3" or settings.swatch_style == "sw_radio4" %} swatch_radio3 {% elsif settings.swatch_style == "sw_rectangle1" or settings.swatch_style == "sw_rectangle2" or settings.swatch_style == "sw_gallery" %} swatch_rectangle1 {% endif %}swatch clearfix {% if settings.po_style == "po_swatchs" %} align-center flex engoc-flex-wrap{% endif %}" data-option-index="{{ option_index }}">
<!-- <p class="text-uppercase title_variant" style="border-bottom:none;padding-bottom:none;">{{ variantsswatch }} </p> -->
{% if variantsswatch == 'Colore' %}
<p class="text-uppercase title_variant" style="border-bottom:none;padding-bottom:none;">Colore </p>
{% elsif variantsswatch == 'Taglia' %}
<p class="text-uppercase title_variant" style="border-bottom:none;padding-bottom:none;">Taglia </p>
{% elsif variantsswatch == 'Lunghezza' %}
<p class="text-uppercase title_variant" style="margin-left:6px;border-bottom:none;padding-bottom:none;">Lunghezza </p>
{% endif %}
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
{% assign unique_variant_id = variant.id | append: '-' | append: value | append: '-' | append: option_index %}
{% assign available = false %}
{% if variant.available %}
{% assign available = true %}
{% else %}
{% comment %}
Check if any other variant with the same size is available
{% endcomment %}
{% for other_variant in product.variants %}
{% if other_variant != variant and other_variant.options[option_index] == value and other_variant.available %}
{% assign available = true %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if is_color %}
<div data-value="{{ value | escape }}" data-style="square" class="maxus-color none color {{ value | handle }} {% if available %} available {% else %}soldout{% endif %}" {% if available %}{% else %}data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="Coming Soon <br> NOTIFY ME"{% endif %}>
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless available %}disabled{% endunless %} />
{% if settings.swatch_style == "sw_radio1" or settings.swatch_style == "sw_radio3" %}
<label class="radio_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
<label class="color_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
</label>
<span class="text_color">{{ value }}</span>
</label>
{% elsif settings.swatch_style == "sw_radio2" %}
<div class="radio_style2" data-toggle="tooltip" data-placement="top" data-original-title="{{value}}">
<label class="color_style2" for="swatch-{{ option_index }}-{{ value | handle }}" style="background-image: url({{ variant.image.src | product_img_url: 'grande' }}); background-size: cover;">
</label>
</div>
{% elsif settings.swatch_style == "sw_rectangle1" %}
<label class="rectangle_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
<span class="text_rec">{{ value }}</span>
</label>
{% elsif settings.swatch_style == "sw_gallery" %}
<div class="swatch_gallery">
<label class="bg_image" for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | file_url }}); background-size: cover;">
</label>
</div>
{% elsif settings.swatch_style == "default" or settings.swatch_style == "sw_radio4" or settings.swatch_style == "sw_rectangle2" %}
<div class=" border-color ">
<label class="link_color" for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | file_url }}); background-size: cover;">
</label>
</div>
{% endif %}
</div>
{% elsif is_lunghezza %}
<div data-value="{{ value | escape }}" data-style="square" class="maxus-color none length colora-nero {{ value | handle }} {% if available %} available {% else %}soldout{% endif %}" {% if available %}{% else %}data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="Coming Soon <br> NOTIFY ME"{% endif %}>
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% unless available %} disabled{% endunless %} />
{% if settings.swatch_style == "sw_radio1" or settings.swatch_style == "sw_radio2" or settings.swatch_style == "sw_radio3" or settings.swatch_style == "sw_radio4" %}
<label class="radio_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
<label class="color_style1" for="swatch-{{ option_index }}-{{ value | handle }}" >
</label>
<span class="text_color">{{ value }}</span>
</label>
{% elsif settings.swatch_style == "sw_rectangle1" or settings.swatch_style == "sw_rectangle2" or settings.swatch_style == "sw_gallery" %}
<label class="rectangle_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
<span class="text_rec">{{ value }}</span>
</label>
{% elsif settings.swatch_style == "default" %}
<label class="variant_other" for="swatch-{{ option_index }}-{{ value | handle }}" >
{{ value }}
</label>
{% endif %}
</div>
{% else %}
<div data-value="{{ value | escape }}" data-style="square" class="maxus-color none taglia {{ value | handle }} {% if available %} available {% else %}soldout{% endif %}" {% if available %}{% else %}data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="Coming Soon <br> NOTIFY ME"{% endif %}>
<input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}" {% unless available %} disabled{% endunless %} />
{% if settings.swatch_style == "sw_radio1" or settings.swatch_style == "sw_radio2" or settings.swatch_style == "sw_radio3" or settings.swatch_style == "sw_radio4" %}
<label class="radio_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
<label class="color_style1" for="swatch-{{ option_index }}-{{ value | handle }}" >
</label>
<span class="text_color">{{ value }}</span>
</label>
{% elsif settings.swatch_style == "sw_rectangle1" or settings.swatch_style == "sw_rectangle2" or settings.swatch_style == "sw_gallery" %}
<label class="rectangle_style1" for="swatch-{{ option_index }}-{{ value | handle }}">
<span class="text_rec">{{ value }}</span>
</label>
{% elsif settings.swatch_style == "default" %}
<label class="variant_other" for="swatch-{{ option_index }}-{{ value | handle }}" >
{{ value }}
</label>
{% endif %}
</div>
{% endif %}
{% endunless %}
{% endfor %}
</div>
</div>
{% endunless %}
{% endif %}
