Shopify多变体产品部分售罄显示异常问题求助

问题根源 #

当前代码中判断变体可用性的逻辑存在错误：当单个变体售罄时，它会检查同属性下的其他变体是否可用，只要存在可用变体就标记该属性值为可用。这导致尺寸44/58和长度32的属性值被错误标记为可用，即使它们的组合实际售罄。

修改后的swatch.liquid代码 #

{% 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 %}

                {% comment %} 移除原错误逻辑，直接使用当前变体的库存状态 {% endcomment %}
                {% assign available = variant.available %}

                    {% 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 %}

修改说明 #

• 修正可用性判断逻辑：删除了原代码中检查同属性其他变体的循环，直接使用variant.available获取当前变体的真实库存状态。
• 保留原有UI样式：所有渲染、样式相关代码未改动，仅调整核心判断逻辑。
• 验证效果：修改后，尺寸44/58+长度32的组合会被正确标记为售罄，用户选择该组合时不会被分配其他变体，其余可用组合正常显示。

内容的提问来源于stack exchange，提问作者liz14