![msAltCart](https://msaltcart.art-sites.ru/assets/components/msaltcart/logo.jpg)
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;
// тут можно инициализировать плагины, например для кастомизации селекта
// или делать что-то ещё
});
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));