Shopify несколько вариантов продукта

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

Похоже, вы пропустили вызов для инициализации селекторов опций. Это, в сочетании с отсутствием значения по умолчанию для вашего раскрывающегося списка вариантов, может привести к тому, что при попытке добавить Add-To-Cart в 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 по жидким объектам , который может помочь вам дать идеи о том, что возможно)

Если вы используете OptionSelectors Shopify, вам также может потребоваться указать поле идентификатора варианта display:none - при запуске OptionSelectors автоматически создаст 1-3 раскрывающихся списка для вас на основе параметров опции продукта.

Например: продукт, который поставляется в 3 разных размерах и 2 разных цветах, может иметь до 6 разных вариантов. В вашем начальном окне выбора будут доступны все доступные комбинации: «Маленький / Красный», «Маленький / Синий», «Средний / Красный» и т. Д.

Выполнение кода OptionSelectors в приведенном выше примере продукта даст вам два селектора: один для размера, другой для цвета. Под капотом код OptionSelectors принимает значения из каждого отдельного измерения параметра (например, «Маленький» и «Синий»), чтобы найти соответствующий идентификатор варианта в (скрытом) основном списке.

Чтобы инициализировать OptionSelectors в Shopify, попробуйте добавить этот тег сценария сразу после формы, чтобы увидеть, помогает ли он:

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