Question

我目前具有以下形式，都很好，并且可以生成多个变体下拉列表，但是当尝试使用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>

我在这里想念东西吗？

Answer 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出色的reference for Liquid objects，它可以为您提供可能的想法）

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

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

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

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

{% 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多个产品选项

1 个答案: