0

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

在我的标题中

{{ '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>

我在这里错过了什么吗？

4

1 回答 1

1

您似乎错过了初始化选项选择器的调用。这与您的变体下拉列表没有默认值相结合，可能会导致在您尝试添加到购物车时没有有效的 ID 发布到 Shopify。

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

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

（我经常参考 Shopify对 Liquid objects 的出色参考，它可以帮助您了解可能的情况）

如果您使用 Shopify 的 OptionSelectors，您可能还需要设置您的变体 ID 字段display:none- 当 OptionSelectors 运行时，它会根据产品的选项尺寸自动为您创建 1-3 个下拉菜单。

例如：具有 3 种不同尺寸和 2 种不同颜色的产品将有多达 6 种不同的变体。您的初始选择框将包含“小/红”、“小/蓝”、“中/红”等所有可用组合。

在上面的示例产品上运行 OptionSelectors 代码将为您提供两个选择器：一个用于大小，一个用于颜色。在后台，OptionSelectors 代码从每个单独的选项维度（例如：“小”和“蓝色”）中获取值，以在（隐藏的）主列表中找到适当的变体 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 %}
于 2019-01-07T18:03:08.147 回答