在 shopify 网站中为数量选择器创建下拉列表

Question

您好，我在我的 Shopify 网站中创建了一个下拉列表作为数量选择器。

<select name="quantity" id="quantity">
         {% for i in (1..10) %}
                  <option value="{{ i }}">{{ i }}</option>
          {% endfor %}         
</select>

这是我的数量选择器代码。它工作正常。所以我有疑问。是否可以反映我库存中的总数量。现在我正在使用 1..10。这就是为什么它在我的下拉列表中显示 1 到 10

Answer 1

是的，你可以。

如果您的产品没有任何选项，您可以使用 product.first_available_variant.inventory_quantity 例如：

<select name="quantity" id="quantity">
         {% for i in (1..product.first_available_variant.inventory_quantity) %}
                  <option value="{{ i }}">{{ i }}</option>
          {% endfor %}         
</select>

但是，如果您有选项，则需要依靠 Javascript 来生成 select。

在这种情况下，您可以生成一个包含所有变体及其 invetory_quantity:

的 Javascript 对象

<script>
    var qtyVaraints = {
        {% for variant in product.variants %}
            {{variant.id}}: {{variant.inventory_quantity}}{% unless forloop.last %},{% endfor %}
        {% endfor %}
    }
</script>

并且基于 selected 变体，您将以对象 qtyVaraints[VARIANT_ID] 为目标，并根据上述对象的 return 数字为 select 生成新选项.

在 shopify 网站中为数量选择器创建下拉列表

Creating a drop down for quantity selector in shopify website

javascript

performance

shopify