Многое из того, что мерчанты просят у SDK, уже доступно в виде настройки. Прежде чем писать скрипт, проверьте, не решает ли задачу блок корзины, условия по рынку/стране/валюте или настройка корзины. Они продолжают работать при редизайне корзины, а ваш скрипт может перестать.
Глобальная точка входа
Каждый фрагмент кода в этой документации пишет
window.aftersell.cart полностью, поэтому любой из них работает сам по себе при вставке. Создать псевдоним один раз (const cart = window.aftersell.cart;) и дальше использовать cart тоже совершенно корректно и безопасно даже до загрузки корзины. Только не забудьте включить эту строку, если сокращаете фрагмент, поскольку одиночный cart сам по себе выбрасывает ошибку cart is not defined.Configure
Настройте поведение корзины: когда открывается панель, как форматируются суммы, перехватывает ли Aftersell добавление в корзину.
Events
Реагируйте на происходящее: корзина загрузилась, товар добавлен, панель открылась, нажата кнопка оформления заказа.
Actions
Читайте и изменяйте корзину: откройте её, добавьте товар, обновите количество, прочитайте текущее состояние.
Hooks
Меняйте работу самой корзины: скрывайте или переименовывайте строки, меняйте их порядок, прикрепляйте дополнительные данные, управляйте добавлением в корзину.
Если ваш скрипт перестал срабатывать при добавлении в корзину, начните с Перехвата добавления в корзину. Там объясняется, почему Aftersell берёт добавление на себя, и все способы исключить форму.
События, действия или хуки?
Самое важное различие: действие изменяет фактическую корзину покупателя (и его итоговую сумму), тогда как хук меняет только отображение. Скрытие строки хуком оставляет её в корзине и в итоговой сумме; удаление её действием убирает её по-настоящему.
Как и когда он загружается
- Небольшая заглушка сразу создаёт
window.aftersell.cart, поэтому он всегда доступен. - Полный SDK загружается чуть позже и берёт управление на себя, обновляя заглушку на месте, поэтому захваченная ранее ссылка продолжает работать.
Вызовы настройки: безопасны сразу
configure(...), events.on(...) и все вызовы hooks.register*. Буферизуются до загрузки и воспроизводятся по порядку после загрузки SDK. Размещайте их в начале скрипта.Действия: дождитесь ready()
Всё под
actions.*. Запускайте их внутри ready() или обработчика события. При слишком раннем вызове они выводят предупреждение в консоль и безопасно ничего не делают: асинхронные всё равно разрешаются, поэтому цепочка .then() не сломается.ready()
ready() возвращает Promise, который разрешается после того, как первая загрузка корзины завершится. Он разрешается как при неудаче, так и при успехе, поэтому у покупателя с нестабильным соединением ваш скрипт никогда не зависнет. Проверяйте getCart() на null, а не предполагайте, что корзина получена.
Вызов ready() после того, как корзина уже загружена, разрешается немедленно, поэтому его можно безопасно использовать как общий шлюз «корзина теперь существует» в любом месте вашего кода.
context
window.aftersell.cart.context содержит данные покупателя, отрендеренные сервером, доступные для синхронного чтения без ready(). Используйте его для ветвления по рынку или стране, которое должно произойти до загрузки корзины.
Чтобы показывать разные настройки блоков по рынку, стране или валюте, используйте вместо этого условия в редакторе корзины. Скрипт не требуется. Полный интерфейс Conditions сегодня доступен в Rewards.
shadowRoot
document.querySelector не видит ничего внутри панели. Чтобы добраться до элемента в корзине, выполняйте запрос к shadow root:
cart-external-*, которые использует Custom CSS. Это поддерживаемые точки входа. Двойники cart-internal-* — внутренняя механика корзины, поэтому используйте внешние классы.
Shadow root появляется только после загрузки корзины, поэтому читайте его внутри ready() или обработчика события, а не в начале скрипта.
Отладка
Когда ваш скрипт выбрасывает ошибку
configure, events.on и hooks.register* ниже этой строки никогда не выполняется. Корзина явно сообщает об этом:
aftersell-cart-init.js и aftersell-cart-cart-update.js. Вы можете открыть их на панели Sources и ставить точки останова, как в любом другом файле.
Канал отладки
Что дальше
Configure
Каждая опция с примером.
Events
Каждое событие, когда оно срабатывает и чего не следует делать в обработчике.
Actions
Каждое действие с примером кода.
Hooks
Каждый хук и как компонуются регистрации.
Cart object
Структура корзины и её строк.
Use cases
Полные, готовые к запуску решения типичных запросов.