Wishlist API
Описание
API для работы со списком избранных товаров. Управляет cookie shop_wishlist, автоматически обновляет счетчики в интерфейсе и показывает уведомления при добавлении товаров.
Доступ к API
API входит в состав минифицированного бандла темы assets/js/site.theme.min.js, инициализируется автоматически и доступен глобально:
window.waTheme.wishlistAPI
Публичные методы
addToWishlist(productId)
Добавляет товар в список избранного.
Параметры:
productId(number|string) — ID товара
Возвращает: boolean — успешность операции
Пример использования:
const success = wishlistAPI.addToWishlist(123);
if (success) {
console.log('Товар добавлен в избранное');
}
removeFromWishlist(productId)
Удаляет товар из списка избранного.
Параметры:
productId(number|string) — ID товара
Возвращает: boolean — успешность операции
Пример использования:
wishlistAPI.removeFromWishlist(123);
toggleWishlist(productId)
Переключает состояние товара в списке избранного.
Параметры:
productId(number|string) — ID товара
Возвращает: boolean — новое состояние (true — добавлен, false — удален)
Пример использования:
const isAdded = wishlistAPI.toggleWishlist(123);
console.log(isAdded ? 'Добавлен' : 'Удален');
isInWishlist(productId)
Проверяет, находится ли товар в списке избранного.
Параметры:
productId(number|string) — ID товара
Возвращает: boolean
Пример использования:
if (wishlistAPI.isInWishlist(123)) {
console.log('Товар в избранном');
}
getWishlist()
Получает полный список ID товаров из избранного.
Возвращает: number[] — массив ID товаров
Пример использования:
const wishlist = wishlistAPI.getWishlist();
console.log('Товары в избранном:', wishlist);
getCount()
Получает количество товаров в списке избранного.
Возвращает: number
Пример использования:
const count = wishlistAPI.getCount();
console.log(`В избранном ${count} товаров`);
clearWishlist()
Очищает весь список избранного.
Пример использования:
wishlistAPI.clearWishlist();
Автоматические обновления
Wishlist API автоматически:
-
Обновляет счетчики (
.js-wishlist-count): скрывает при count = 0, показывает актуальное количество -
Обновляет кнопки товаров: меняет состояние иконок (активное/неактивное), обновляет title кнопок; поддерживает как кнопки темы
.js-add-wishlist, так и кнопки плагина wishlist -
Показывает уведомления с информацией о товаре и ссылкой на страницу избранного
-
Запускает анимацию при добавлении товаров
Событие wishlist:changed
API генерирует кастомное событие wishlist:changed:
document.addEventListener('wishlist:changed', (event) => {
const { action, productId, count, wishlist } = event.detail;
console.log(`Действие: ${action}, Товар: ${productId}, Всего: ${count}`);
});
Возможные действия:
-
added— товар добавлен -
removed— товар удален -
cleared— список очищен
Селекторы DOM-элементов
| Селектор | Описание |
|---|---|
.js-wishlist-count | Счетчики количества товаров |
.js-add-wishlist | Кнопки добавления в избранное |
.wishlist-list-button | Кнопки плагина wishlist (добавить) |
.wishlist-list-active-button | Кнопки плагина wishlist (удалить) |
Хранение данных
Данные сохраняются в cookie shop_wishlist в формате:
-
Строка с разделителями:
"123,456,789" -
Совместимость с форматом Webasyst
-
Срок хранения: 30 дней
Уведомления
Показываются с информацией о товаре:
-
Изображение товара
-
Название товара
-
Статус операции
-
Ссылка на страницу избранного (при добавлении)
Интеграция с data-атрибутами
Кнопка должна содержать data-product-id. Остальные атрибуты опциональны: если data-product-name и data-product-image не заданы, API ищет данные товара на странице; если не заданы data-title-normal и data-title-active, для title кнопки используются стандартные строки локализации темы («В избранное» / «В избранном»).
<button class="js-add-wishlist"
data-product-id="123"
data-product-name="Название товара"
data-product-image="/path/to/image.jpg"
data-title-normal="В избранное"
data-title-active="В избранном">
<i class="icon"></i>
</button>
Обработка ошибок
API корректно обрабатывает:
-
Некорректные ID товаров
-
Поврежденные cookie
-
Отсутствие DOM-элементов
-
Ошибки парсинга данных
При ошибках выводятся предупреждения в консоль и выполняется безопасный fallback.