Shopify 购买多种产品选项

我目前有以下表单，它们都很好，并生成多个变量下拉列表，但当尝试使用

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>


{product.variants%中的变量为%0}
{%if variant.available%}
{{variant.title}{{variant.price | money(货币)}{variant.price

我在这里遗漏了什么吗？
您似乎错过了初始化选项选择器的调用。再加上变体下拉列表中没有默认值，当您尝试添加到购物车时，可能会导致没有有效的ID发布到Shopify

要做的一件事是在选择框中自动选择适当的变量。Shopify的产品对象有一个名为“selected\u或“first\u available\u variant”的字段，在这里很有用。例如：

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

是否在某个地方调用了变量选择器初始化？（例如：
new shopfify.options选择器（'variant-select'，{product:{{product | liquid}，onVariantSelected:someFunction}）
）。检查选项选择器是否有任何作用的一种方法是使用浏览器的开发工具检查文档，以取消隐藏变体ID选择框（以及由OptionSelector代码注入的任何隐藏包装元素）以确保您的ID字段正确更新。如果没有ID，则不会向购物车中添加任何内容，以便解释您的症状。@DaveB唯一的代码是问题中的上述代码。啊哈-那么您包括选项选择代码，但不使用任何代码：）一秒钟，我将为您提供一个示例作为答案…啊，它正在添加到购物车中，但它看起来像下面的嗯。我认为原始ID字段被OptionSelectors代码自动隐藏。如果没有，您可能需要手动执行此操作。看起来您使用的产品只有一个（默认）变体，因此您可能还需要在表单中添加一些代码来说明这一点。添加一些小的编辑…如果没有超过1个变量，我如何将选择框全部隐藏？如果您希望主ID始终隐藏，只需在某个位置设置CSS样式（内联或主CSS表中）使其显示：无。或者，您可以将其从选择框更改为隐藏输入。示例：

{% 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 %}