← На главную

Функциональные кнопки в инструментах Any

Интеграция глобальных функций для управления корзиной, избранным и сравнением через window.digiLayer

📋
Описание работы функций
Принцип взаимодействия между платформой и сайтом

Для добавления или удаления товара в корзину/избранное/сравнение необходимо передать id товара через глобальную функцию. Операции по добавлению/удалению происходят на вашей стороне. Со своей стороны передаётся только информация по товару:

🔹
id товара из фидаобязательно
🔸
Количество товаров — необязательно
🔸
Параметр из фида — необязательно
📌 Требования к вызову функций
1
Функции должны вызываться со всех страниц сайта
2
Функции должны быть доступны для вызова с нашей стороны
3
Функции должны быть реактивными (без обновления страницы)
4
Функции должны возвращать promise (быть в него обёрнуты)
⚙️
Реализация
Перечень всех доступных функций window.digiLayer

В зависимости от того, какие необходимо реализовать функции, названия будут отличаться, но начинаться все будут одинаково — window.digiLayer.###.

🛒 Функции корзины
window.digiLayer.addToCart() Добавление в корзину
window.digiLayer.removeFromCart() Удаление из корзины
window.digiLayer.cartState() Получение актуального состояния корзины
❤️ Функции избранного
window.digiLayer.addToFavorites() Добавление в избранное
window.digiLayer.removeFromFavorites() Удаление из избранного
window.digiLayer.favoritesState() Получение актуального состояния избранного
⚖️ Функции сравнения
window.digiLayer.addToCompare() Добавление в сравнение
window.digiLayer.removeFromCompare() Удаление из сравнения
window.digiLayer.comparesState() Получение актуального состояния сравнения
🌐
Что такое window и как с ним работать
Способы добавления функций в глобальный объект

Для того чтобы положить функцию в глобальный объект window, достаточно присвоить функцию как свойство этого объекта. Вот пример:

javascript
function sayHello() {
    console.log('Hello, world!');
}
// Положить функцию в window
window.sayHello = sayHello;
// Теперь функция доступна глобально
window.sayHello(); // Выведет: Hello, world!
Функция как выражение

Если вы создаёте функцию через функциональное выражение или стрелочную функцию, можно сразу добавить её в window:

javascript
window.greet = function(name) {
    console.log(`Hello, ${name}!`);
};
window.greet('Alice'); // Выведет: Hello, Alice!
ES6 / TypeScript (модули)

В ES6+, если вы работаете в модульной системе (import/export), глобальный объект window не обновляется напрямую, так как модульный код имеет собственные области видимости. В этом случае требуется явное присвоение:

javascript
// Определяем функцию
const logMessage = (message) => console.log(`Message: ${message}`);
// Делаем функцию глобальной
window.logMessage = logMessage;
// Вызываем
logMessage('Module-bound function exported to window!');

Теперь функция будет доступна в глобальной области видимости через window.logMessage.

⚠️
Использовать глобальные переменные и функции (window) следует с осторожностью, чтобы избежать конфликтов или загрязнения глобального объекта.
🔧
Логика работы
Поведение функций состояния, добавления и удаления
📊 Функция состояния

Все функции состояния должны возвращать Promise. При разрешении через await возвращают следующие типы данных:

Функция Возвращаемый тип Формат
await window.digiLayer.cartState() Object {id: количество, id: количество, ...}
await window.digiLayer.favoritesState() Array [id, id, ...]
await window.digiLayer.compareState() Array [id, id, ...]
➕ Функция добавления

window.digiLayer.addToCart(offer_id, amount) — происходит добавление товара в корзину. На стороне сайта, внутри метода addToCart, необходимо обновить состояние корзины cartState, после чего вернуть promise со значением result = true.

⚠️
При повторном вызове функции количество товаров в корзине должно суммироваться, а не перезаписываться.

Например: в корзине лежит товар в количестве двух штук. Пользователь решил добавить ещё три. В корзине после выполнения функции должно остаться пять единиц товара (2+3), а не перезаписаться на три.
ℹ️
Если на сайте реализована возможность ввода количества товаров в инпут, то добавляется именно то число товаров, что указал пользователь.

Для функции добавления в избранное переменная amount не нужна — достаточно только offer_id.
Порядок выполнения
1
Вызываем window.digiLayer.addToCart(offer_id, amount)
2
Не обновляем страницу и актуализируем значения иконки в шапке сайта, отвечающей за количество товаров в корзине
3
Вызываем функцию состояния window.digiLayer.cartState()
4
Получаем список товаров в корзине, ожидая увидеть только что добавленный товар из первого пункта
➖ Функция удаления

window.digiLayer.removeFromCart(offer_id, amount) — происходит удаление товара из корзины. На стороне сайта, внутри метода removeFromCart, необходимо обновить состояние корзины cartState, после чего вернуть promise со значением result = true.

⚠️
При повторном вызове функции количество товаров в корзине должно вычитаться, а не перезаписываться.

Например: в корзине лежит товар в количестве трёх штук. Пользователь решил удалить два. В корзине после выполнения функции должна остаться одна единица товара (3−2), а не перезаписаться на два или полностью удалиться товар.
ℹ️
Если в функции removeFromCart передаётся значение меньше единицы (0, -1 и т.д.) — товар полностью удаляется из корзины.

Для функции удаления из избранного переменная amount не нужна — достаточно только offer_id.
Порядок выполнения
1
Вызываем window.digiLayer.removeFromCart(offer_id, amount)
2
Не обновляем страницу и актуализируем значения иконки в шапке сайта, отвечающей за количество товаров в корзине
3
Вызываем функцию состояния window.digiLayer.cartState()
4
Получаем список товаров в корзине, ожидая увидеть только что удалённый товар из первого пункта
Способы проверки работоспособности
Критерии корректной реализации функций

При добавлении или удалении товара необходимо убедиться в следующем:

1️⃣
Происходит обновление значения цифровой иконки кнопки корзины/избранного/сравнения
2️⃣
При последующем вызове состояния State возвращается объект с актуальным количеством товаров в следующем формате:
Для состояния корзины:
json
{id: количество, id: количество, ...}
Для состояния избранного / сравнения:
json
[id, id, ...]
3️⃣
На странице (корзины, продукта, избранного и т.д.) после нажатия кнопки «Назад» в браузере сохраняются итоги вызванных функций
4️⃣
Корзина не очищается (при удалении) и не хранит только последний добавленный товар (при добавлении)