API

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 автоматически:

  1. Обновляет счетчики (.js-wishlist-count): скрывает при count = 0, показывает актуальное количество

  2. Обновляет кнопки товаров: меняет состояние иконок (активное/неактивное), обновляет title кнопок; поддерживает как кнопки темы .js-add-wishlist, так и кнопки плагина wishlist

  3. Показывает уведомления с информацией о товаре и ссылкой на страницу избранного

  4. Запускает анимацию при добавлении товаров

Событие 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.