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>

Я что-то упустил?


shopify shopify-template
person JMKelley    schedule 06.01.2019    source источник
comment
Есть ли где-то вызов для инициализации селекторов вариантов? (Пример: new Shopify.OptionSelectors('variant-select', { product: {{ product | liquid }}, onVariantSelected: someFunction })).   -  person Dave B    schedule 07.01.2019
comment
Один из способов проверить, делают ли что-либо ваши селекторы опций, - проверить документ с помощью инструментов разработчика вашего браузера, чтобы раскрыть поле выбора идентификатора варианта (и любые скрытые элементы оболочки, которые были введены кодом OptionSelector), чтобы сделать убедитесь, что поле вашего идентификатора обновляется правильно. Если нет идентификатора, то в корзину ничего не будет добавлено, что может объяснить ваши симптомы.   -  person Dave B    schedule 07.01.2019
comment
@DaveB - единственный код, указанный выше в вопросе.   -  person JMKelley    schedule 07.01.2019
comment
Ага, тогда вы включаете код option_selection, но не используете его :) Одна секунда, я приведу пример в качестве ответа для вас ...   -  person Dave B    schedule 07.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вам не хватает вызова для инициализации селекторов опций. Это, в сочетании с отсутствием значения по умолчанию для раскрывающегося списка вариантов, может привести к тому, что действительный идентификатор не будет опубликован в Shopify, когда вы попробуете добавить в корзину.

Единственное, что нужно сделать, - это автоматически выбрать соответствующий вариант в поле выбора. В объектах продукта Shopify есть поле selected_or_first_available_variant, которое здесь может пригодиться. Пример:

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

(Я часто возвращаюсь к отличному справочнику по объектам Liquid в Shopify, который может помочь дать вам идеи о том, что возможно)

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

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

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

Чтобы инициализировать 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 %}
person Dave B    schedule 07.01.2019
comment
Ах, это добавляется в корзину, но это выглядит следующим образом: imgur.com/LWK40ip - person JMKelley; 07.01.2019
comment
Хм. Я думал, что исходное поле ID было автоматически скрыто кодом OptionSelectors. В противном случае вам может потребоваться сделать это вручную. Также похоже, что вы используете продукт, который имеет только один (по умолчанию) вариант, поэтому вы также можете добавить код в свою форму, чтобы учесть это. Добавляем несколько небольших правок ... - person Dave B; 07.01.2019
comment
Как мне скрыть поле выбора, если вариантов не более 1? - person JMKelley; 07.01.2019
comment
Если вы хотите, чтобы основной идентификатор всегда был скрыт, просто установите где-нибудь стиль CSS (встроенный или в основном листе CSS), чтобы он отображался: none. Кроме того, вы можете изменить его с поля выбора на скрытый ввод. Пример: <input type="hidden" id="variant-select" name="id" value="{{ product.selected_or_first_available_variant.id }}" /> - person Dave B; 07.01.2019