Shopify 多种产品选项

Question

我目前有以下表格，它很好，并生成多个变体下拉列表，但是当尝试使用 Cart.js 将其添加到购物车时，它实际上并没有向购物车添加任何东西。我不确定我是否在这里遗漏了一些代码，但我目前在我的主题中所做的是：

在我的header

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

加入购物车表格

      <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical" data-cart-submit>

        <select id="variant-select" name="id">
          {% for variant in product.variants %}
            {% if variant.available %}
              <option value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
            {% else %}
        <option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
            {% endif %}
          {% endfor %}
        </select>

        <input name="cart-add" type="submit" class="button" id="cart-add" value="Buy Now!">
        <span id="price-field"></span>
      </form>

我是不是漏掉了什么？

Answer 1

您似乎错过了初始化选项 selectors 的调用。再加上变体下拉菜单没有默认值，可能会导致在您尝试添加到购物车时没有有效 ID 发布到 Shopify。

要做的一件事是在您的 select 框中自动 select 适当的变体。 Shopify 的产品对象有一个名为 'selected_or_first_available_variant' 的字段，在这里很有用。示例：

<option value="{{variant.id}}"  {% if variant == product.selected_or_first_available_variant %} selected {%endif %}>{{ variant.title }}</option>

（我经常参考 Shopify 的优秀 reference for Liquid objects，它可以帮助您了解可能的想法）

如果您使用的是 Shopify 的 OptionSelectors，您可能还需要制作变体 ID 字段 display:none - 当 OptionSelectors 运行时，它会根据产品的选项自动为您创建 1-3 个下拉列表方面。

例如：有 3 种不同尺寸和 2 种不同颜色的产品最多有 6 种不同款式。您的初始 select 框将包含所有可用的组合，如 "Small / Red"、"Small / Blue"、"Medium / Red" 等。

运行上述示例产品的 OptionSelectors 代码将为您提供两个 selector：一个用于尺寸，一个用于颜色。在幕后，OptionSelectors 代码从每个单独的选项维度（例如："Small" 和 "Blue"）中获取值，以在（隐藏的）主列表中找到适当的变体 ID。

要初始化 Shopify 的 OptionSelectors，请尝试在表单后立即添加此脚本标签以查看是否有帮助：

{% if product.variants.size > 1 %}
<script>
function selectCallback(variant, selector){
  // This is where you would put any code that you want to run when the variant changes.
}

var variantIdFieldIdentifier = 'variant-select';
new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
  product: {{ product | json }},     // Product object required to know how options map to variants
  onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
  enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
})
</script>
{% endif %}

Shopify 多种产品选项

Shopify Multiple Product Options

shopify

shopify-template