JavaScript

События

Внимание

События, кроме msac:init, будут срабатывать столько раз сколько корзин есть на странице.

Подсказка

События предназначены для упрощения взаимодействия с DOM, но не для прерывания серверных действий. Если хотите прервать какое-то действие используйте событие si:send:before

document.addEventListener('si:send:before', (e) => {
  if (['cart_add','cart_remove','cart_clean'].includes(e.detail.headers['X-SIPRESET'])) {
    e.preventDefault();
    SendIt.Notify.error('It impossible!');
  }
})

msac:init - инициализация компонента

Событие возникает после загрузки всех модулей, указанных в JS конфигурации. Не имеет параметров. Не может быть отменено. Чтобы без проблем использовать все модули, подписывайте на это событие, так как после его срабатывания объект MsAltCart и его модули точно доступны.

Пример использования

document.addEventListener('msac:init', (e) => {
  console.log(MsAltCart);
});

msac:row:replace:after - замена ряда

Событие возникает после того как была произведена замена блока товара со старым ключом на блок с новым ключом. Не может быть отменено.

Передаваемые параметры

• cartName - имя корзины, оно же имя плейсхолдера.
• cart - DOM-элемент корзины.
• keyNew - новый ключ товара.

Пример использования

document.addEventListener('msac:row:replace:after', (e) => {
  const {cart, cartName, keyNew} = e.detail;

  const newRow = cart.querySelector(`data-msac-product="${keyNew}"`); // получаем вставленный ряд

  // тут можно инициализировать плагины, например для кастомизации селекта
});

msac:row:update:before - обновление ряда

Событие возникает перед обновлением блока товара. Не может быть отменено.

Передаваемые параметры

• cartName - имя корзины, оно же имя плейсхолдера.
• cart - DOM-элемент корзины.
• data - ответ сервера.
• row - DOM-элемент обновляемого ряда.
• html - HTML который будет вставлен.

Пример использования

document.addEventListener('msac:row:update:before', (e) => {
  const {cart, cartName, data, row, html} = e.detail;

  // тут можно инициализировать плагины, например для кастомизации селекта
  // или делать что-то ещё
});

msac:totals:update:before - обновление суммарных значений

Событие возникает перед обновлением суммарных значений. Не может быть отменено.

Передаваемые параметры

• cart - DOM-элемент корзины.
• data - ответ сервера.

Пример использования

document.addEventListener('msac:totals:update:before', (e) => {
  const {cart, data} = e.detail;

  // тут можно внести какие-то изменения в данные
});

msac:row:add:after - добавление нового товара

Событие возникает после добавления нового товара. Не может быть отменено.

Передаваемые параметры

• cartName - имя корзины, оно же имя плейсхолдера.
• cart - DOM-элемент корзины.
• newRow - DOM-элемент добавленного ряда.

Пример использования

document.addEventListener('msac:row:add:after', (e) => {
  const {cart, cartName, newRow} = e.detail;

  // тут можно инициализировать плагины, например для кастомизации селекта
  // или показать модалку с только что добавленным товаром
  const modalCartEl = document.getElementById('modalCart');
  if (e.detail.cartName === 'modal' && modalCartEl) {
    const modalCart = new bootstrap.Modal(modalCartEl, {})
    modalCart.show();
  }
});

msac:row:remove:before - удалением DOM-элемента товара

Событие возникает перед удалением DOM-элемента товара. Может быть отменено.

Передаваемые параметры

• cartName - имя корзины, оно же имя плейсхолдера.
• cart - DOM-элемент корзины.
• row - DOM-элемент удаляемого ряда.

Пример использования

document.addEventListener('msac:row:remove:before', (e) => {
  const {cart, cartName, row} = e.detail;

  // тут можно инициализировать плагины, например для кастомизации селекта
  // или делать что-то ещё
});

msac:html:prepare:after - подготовка html

Событие возникает после подготовки html для вставки. Не может быть отменено.

Передаваемые параметры

• element - подготовленный DOM-элемент.

Пример использования

document.addEventListener('msac:html:prepare:after', (e) => {
  const {element} = e.detail;

  // тут можно инициализировать плагины, например для кастомизации селекта
  // или делать что-то ещё
});

msac:cart:clean:before - подготовка html

Событие возникает перед очистко блока корзины и показом чанка пустой корзины. Может быть отменено.

Передаваемые параметры

• cartName - имя корзины, оно же имя плейсхолдера.
• cart - DOM-элемент корзины.

Пример использования

document.addEventListener('msac:cart:clean:before', (e) => {
  const {cartName, cart} = e.detail;

  // тут можно инициализировать плагины, например для кастомизации селекта
  // или делать что-то ещё
});

msac:cart:sync:before - синхронизация корзины по внешнему событию

Событие возникает перед тем, как корзина перерисует себя по событию стороннего компонента (см. Синхронизация с внешними источниками). Может быть отменено — тогда корзина не перерисовывается и событие источника не отменяется.

Передаваемые параметры

• products - состав корзины: данные товаров по ключу товара в корзине.
• totals - итоги корзины (total_count, total_cost и прочие ключи total_*).
• source - имя внешнего события, из-за которого началась синхронизация.

Пример использования

document.addEventListener('msac:cart:sync:before', (e) => {
  const {products, totals, source} = e.detail;

  // тут можно отрисовать корзину по-своему и отменить событие,
  // чтобы компонент не делал этого сам
});

Синхронизация с внешними источниками

Состав корзины может измениться не только по действию покупателя, но и на сервере — например, msProductDiscounts добавляет или снимает подарок. Такой компонент не должен трогать разметку корзины: он сообщает об изменении событием документа и передаёт в detail новый состав products и итоги totals.

msAltCart слушает такие события и перерисовывает корзину сам, после чего отменяет событие источника — для источника это признак «корзина перерисована, перезагружать страницу не нужно».

Список прослушиваемых событий лежит в MsAltCart.config.syncEvents, по умолчанию там одно событие — mspd:cart:changed. Добавить своё можно методом addSyncEvent:

document.addEventListener('msac:init', () => {
  MsAltCart.addSyncEvent('mycomponent:cart:changed');
});

Событие своего компонента нужно отправлять отменяемым и передавать в нём состав корзины:

const rendered = !document.dispatchEvent(new CustomEvent('mycomponent:cart:changed', {
  bubbles: true,
  cancelable: true,
  detail: {products, totals}
}));

if (!rendered) {
  window.location.reload(); // корзину рисовать некому
}

Формат products совпадает с составом корзины miniShop2: ключ — ключ товара в корзине, значение — данные товара, в которых поле html содержит разметку ряда по имени корзины (html[cartName]). Товары, которых в products нет, из корзины удаляются; для новых берётся разметка из html, у остальных обновляются значения полей.

API

Компонент предоставляет возможность взаимодействовать с корзиной из JavaScript, используя ряд простых методов.

Добавление товара

MsAltCart.add(product_id, count, {
  option_key: option_value,
})

Объект опций является необязательным параметром.

Изменение товара

MsAltCart.change(product_cart_key, count, {
  option_key: option_value,
})

Объект опций является необязательным параметром.

Удаление товара

MsAltCart.remove(product_cart_key)

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

const promise = MsAltCart.status();
promise.then((result) => console.log(result));