Skip to content

Корзина

API Корзины (далее API Cart) позволяет без особых знаний в программировании, сделать основные действия с товаром в корзине, а также содержит обязательную разметку для товара в корзине.

В API Cart есть 3 больших раздела:

  • Разметка для формы товара - обязательная размета формы для обработки информации о товаре, который мы собираемся отправлять в заказ.
  • События (Events) - события с товаром, к которым мы можем прицепиться для наблюдения через ШинуСобытий (EventBus).
  • Методы (Methods) - методы для "ручной" работы с Корзиной.

Далее мы рассмотрим каждый раздел подробнее.

Разметка для формы товара

Для добавления товаров в заказ нужно создавать элемент <form> </form>, в котором будет содержаться динамически изменяемая (количество товара, модификация, доступность и т.д.) информация о добавляемых товарах. К каждому динамически изменяемому элементу (которое может менять свое значение в процессе взаимодействия пользователя с сайтом, например доступность при изменении модификации товара) должен добавляться соответствующий data-атрибут. Например к html-тегу <form> нужно обязательно добавлять data-атрибут data-cart-form.

Пример встраивания data-атрибута:

<form action="{{ cart_url }}" method="post" data-cart-form >

Список data-атрибутов для API Cart:

Название Назначение Расположение (куда поместить)
data-cart-form Обязательный атрибут для тега form Тег form для корзины
data-item-id Обязательный атрибут для позиций товаров в корзине. Атрибут принимает id позиции (модификации) товара в корзине. Обертка для позиции товара в корзине
data-product-id Обязательный атрибут для инициализации товара. В атрибут передаётся id товара (Именно товара, не модификации). Обертка для позиции товара в корзине (лучше всего указывать в том же элементе, где и data-item-id)
data-item-delete Удаление позиции из корзины Обертка для кнопки удаления в корзине
data-cart-update Обновление состояния корзины Обертка для кнопки обновления корзины
data-cart-clear Очищение корзины Обертка для кнопки очистки корзины
data-coupon-submit Отправка купона (например скидочного) Обертка для кнопки отправки купона
data-quantity Обязательный атрибут для обёртки кнопок изменения количества и поля ввода количества товара (quantity) Внутри обертки с атрибутом data-product-id и data-item-id
data-quantity-change Атрибут для кнопок +/-, принимает число Внутри кнопок с атрибутом data-quantity

Пример вывода корзины c использованием API Cart:

<form action="{{ cart_url }}" method="post" data-cart-form >
  <input type="hidden" name="method" value="put" />
  <input type="hidden" name="make_order" value="" />

  {% for item in cart.items %}
    <div data-product-id="{{ item.product.id }}" data-item-id="{{ item.id }}">
      <div data-quantity>
        <input type="text" name="cart[quantity][{{ item.id }}]" value="{{ item.quantity }}" />
        <span data-quantity-change="-1">-</span>
        <span data-quantity-change="1">+</span>
      </div>
      <span data-item-delete="{{ item.id }}">X</span>
    </div>
  {% endfor %}

  <div>
    <label> Купон </label>
    <input type="text" name="cart[coupon]" value="{{ cart.coupon }}" />
    <input type="button" value="Применить" data-coupon-submit />
  </div>

  <input type="submit" value="Оформить" data-cart-submit />
  <button data-cart-clear> Очистить </button>
  <button data-cart-update> Обновить </button>
</form>

События корзины (Events)

Если нужна возможность произвольно реагировать на события, которые происходят в корзине, была сделана ШинаСобытий (EventBus). Через нее можно подцепиться для прослушивания события корзины. Для этого были прописаны основные события для прослушивания (если не понятно о чем речь, настоятельно советуем прочитать статью о шине событий).

События для работы с корзиной:

Название Назначение
before:insales:cart Перед любым взаимодействием с корзиной
add_items:insales:cart Товар добален в корзину
update_items:insales:cart Обновление корзины
always:insales:cart Событие срабатывает после любого взаимодействия с компонетом корзины
delete_items:insales:cart Удаление позиции (модификации)
remove_items:insales:cart Удаление заданного кол-ва позиций
clear_items:insales:cart После полного очищения корзины
set_coupon:insales:cart После установки купона
set_items:insales:cart После установления кол-ва товаров в корзине для каждой позиции
before:insales:item Событие срабатывает перед любым взаимодействием с компонентом продукта
change_quantity:insales:item Обновление кол-ва в продукте
unchange_quantity:insales:item Если введено кол-во больше доступного
update_variant:insales:item Обновление варианта в продукте
always:insales:item Событие срабатывает после любого взаимодействия с компонентом продукта

Методы, для работы с корзиной (Methods)

Иногда бывает нужно в какой-либо ситуации программно взаимодействовать с корзиной. На эти случаи есть методы, через которые можно сделать основные действия с товарами и корзиной, используя js-скрипты. Метод начинается с глобальной переменной Cart, после чего следует название метода. Например Cart.add({ items }), где add - название метода (в данном случае добавление позиций в корзину).

Список методов

Метод Назначение
add(task) Добавить в корзину заданное кол-во товаров
clear() Полностью очистить корзину
delete(task) Удалить позиции из корзины
remove(task) Удадить из корзины заданное кол-во позиций
set(task) Устанавливает кол-во товаров в корзине для каждой позиции
setCoupon(task) Устанавливаем купон

Примеры применения методов

Добавление позиций:

Cart.add({
  items: {
    123456: 2,
    123457: 1
  },
  comments: {
    123457: 'Мой комментарий'
  },
  coupon: 'Мой купон'
});

Удаление позиции:

Cart.delete({items: [160549240]})