Products

Разметка

Атрибут	Назначение	Расположение
data-product-id	Обязательный атрибут для инициализации товара, принимает id товара	Тег form который является обёрткой для всех полей товара
action	Обязательный атрибут для формы добавления товара в корзину, принимает url корзины. Тег необходим для отправки формы при отключенном JavaScript в браузере	Тег form который является обёрткой для всех полей товара
data-product-variants	Обязательный атрибут для вывода Option Selectors	Тег select в котором выведены все модификации товара
data-quantity	Обязательный атрибут для обёртки кнопок изменения колличества и инпута quantity	Внутри формы с атрибутом data-product-id
data-quantity-change	Атрибут для кнопок +/-, принимает число	Внутри обёртки с атрибутом data-quantity
data-item-add	Добавление товара в корзину, для данного атрибута следует использовать тег button[type="submit"]	Внутри формы с атрибутом data-product-id
name="comment"	Комментарий к позиции заказа, для работы поля с данным атрибутом комментарии к заказам должны быть включены в бэк-офисе	Input[type="text"] внутри формы с атрибутом data-product-id

Liquid

        
          <form action="{{ cart_url }}" method="post" data-product-id="{{ product.id }}">
  {% if product.show_variants? %}
    <select name="variant_id" data-product-variants>
      {% for variant in product.variants %}
        <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
      {% endfor %}
    </select>
  {% else %}
    <input type="hidden" name="variant_id" value="{{product.variants.first.id}}" >
  {% endif %}
  <input type="text" name="comment" value="">
  <div data-quantity>
    <input type="text" name="quantity" value="1" />
    <span data-quantity-change="-1">-</span>
    <span data-quantity-change="1">+</span>
  </div>
  <button type="submit" data-item-add>
    Добавить в корзину
  </button>
</form>

Events

before:insales:product	Событие срабатывает перед любым взаимодействием с компонетом продукта
always:insales:product	Событие срабатывает после любого взаимодействия с компонетом продукта
change_quantity:insales:product	Обновление кол-ва в продукте
unchange_quantity:insales:product	Если введено кол-во больше доступного
update_variant:insales:product	Обновление варианта в продукте

Methods

get(id)

Получаем готовый к употреблению товар

getList(idLists)

Получение списка товаров

setConfig(settings)

Обновление настроек продуктов

js

        
          Products.get(123456)
   .done(function (onDone) { console.log('onDone', onDone) })
   .fail(function (onFail) { console.log('onFail', onFail) });


Products.getList([123456, 123455, 1234454, 123458])
   .done(function (onDone) { console.log('onDone', onDone) })
   .fail(function (onFail) { console.log('onFail', onFail) });

Products.setConfig({
 options: {
 default: 'option-default'
 },
 showVariants: true,
 hideSelect: true,
 initOption: true,
 fileUrl: {},
 filtered: true,
 selectUnavailable: true
})