shopify - 将 CartJS 与多个变体下拉列表一起使用

Question

我被困在让 CartJS 使用 Shopify 中的多个变体下拉列表。每当我尝试将产品添加到购物车时，它当前都会给出 400(错误请求)。我猜这是因为我的 Variant 是空的。我目前的代码是:

{% for product_option in product.options_with_values %}
  <label>
    {{ product_option.name }}
    <select>
      {% for value in product_option.values %}
        <option {% if product_option.selected_value == value %}selected{% endif %}>
          {{ value }}
        </option>
      {% endfor %}
    </select>
  </label>
{% endfor %}

和 option_selector 代码。

<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };

  (function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>

Answer 1

链接选项可能是要走的路。

它匹配来自选择器(下拉列表)的值以获得正确的变体。

https://help.shopify.com/en/themes/customization/products/variants/link-product-options-in-menus