无法根据 Shopify 上的库存水平更新“添加到购物车”按钮答案

【问题标题】：Can't update Add to Cart button based on inventory levels on Shopify无法根据 Shopify 上的库存水平更新“添加到购物车”按钮
【发布时间】：2021-04-05 18:24:55
【问题描述】：

我正在尝试这样做，以便当某些产品的库存水平低于 1 时，它会将按钮更改为“按订单生产”而不是“添加到购物车”，这意味着它们不会立即发货。

我制作了一个新的产品模板和产品表单以及与之相关的所有内容，但是当我更改按钮代码时，它似乎没有任何作用。

我正在使用最新版本的 Palo Alto 主题。

    <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn" data-add-to-cart>
        <span id="AddToCartText" data-add-to-cart-text>
            {%- if variants_count < 1 -%}
                {{- 'products.product.made_to_order' | t -}}
            {%- else -%}
                {{- 'products.product.add_to_cart' | t -}}
            {%- endif -%}
        </span>
        {%- render 'icon-loading' -%}
    </button>

【问题讨论】：

标签： html css shopify liquid

【解决方案1】：

您可能想发布一个小代码来告诉您液体变量 variants_count 的值。目前还不清楚这是什么设置。它是库存中当前变体的数量吗？如果是这样，那么您的代码应该可以工作。如果不是，你为什么用它作为支票？您始终可以使用变体渲染循环中的当前变体访问变体的数量。 variant.inventory_quantity 是您可能应该使用的值。

因此，您可能做得不对的第一件事是检查 product.variants 渲染循环之外的变体数量。 “添加到购物车”按钮通常不在此循环的范围内，因为它通常与使用表单提交将产品添加到购物车有关。

因此，现在您的挑战是聆听客户当前选择的变体。选择该变体时，将使用数量来决定在按钮上打印的内容。所以你需要一些 Javascript 来改变按钮文本。

这有意义吗？除非您只有一个变体，否则更改一次文本永远不会起作用，在这种情况下，检查数量会起作用，但正如我所说，对于大多数商店来说，只有一个变体是很少见的。

【讨论】：

因此，通过在按钮代码中使用 if 语句，它不能引用变体的库存水平吗？如果我把 if 语句放在外面，只是用不同的名字复制按钮代码，这应该有效吗，还是我在这里还缺少什么？
可能是这样的？ {%- if variant.inventory_quantity > 0 -%} {%- else -%} {%- endif -%}

【解决方案2】：

试试这个，代码没有经过测试；
基本上，添加data-qty当清单小于1.选择该选项时，请使用js检查attr并更改按钮的文本。

 <select name="id" id="productSelect" class="product-single__variants">
   {% for variant in product.variants %}
     {% if variant.available %}

       <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" 
            {% if variant.inventory_quantity < 1 %}
                data-qty="qty"
            {% endif %}
       >{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

     {% else %}
       <option disabled="disabled">
         {{ variant.title }} - {{ 'products.product.sold_out' | t }}
       </option>
     {% endif %}
   {% endfor %}
 </select>

 <div class="form__column{% if section.settings.enable_payment_button %} form__column--shopify-payment-btn{% endif %}">
   <label>&nbsp;</label>
   <button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--fill btn--regular btn--color{% if section.settings.enable_payment_button %} btn--shopify-payment-btn btn--secondary-accent{% endif %}">
     <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
   </button>
   {% if section.settings.enable_payment_button %}
     {{ form | payment_button }}
   {% endif %}
 </div>


<script>
    $(document).ready(function(){
        var qty = $("#productSelect option:selected").attr('data-qty');
        if (qty){
            $('#AddToCartText').text('Made to Order');
        }
        else {
            $('#AddToCartText').text('Order Now');
        }

        $('#productSelect').on('change', function (){
            qty = $("#productSelect option:selected").attr('data-qty');
            if (qty){
                $('#AddToCartText').text('Made to Order');
            }
            else {
                $('#AddToCartText').text('Order Now');
            }
        });
    });
</script>

【讨论】：