Compare API

Описание

API для работы со списком сравнения товаров. Управляет cookie shop_compare, автоматически обновляет счетчики в интерфейсе и показывает уведомления при добавлении товаров.

Доступ к API

API входит в состав минифицированного бандла темы assets/js/site.theme.min.js, инициализируется автоматически и доступен глобально:

window.waTheme.compareAPI

Публичные методы

addToCompare(productId)

Добавляет товар в список сравнения.

Параметры:

• productId (number|string) — ID товара

Возвращает: boolean — успешность операции

Пример использования:

const success = compareAPI.addToCompare(123);
if (success) {
  console.log('Товар добавлен к сравнению');
}

removeFromCompare(productId)

Удаляет товар из списка сравнения.

Параметры:

• productId (number|string) — ID товара

Возвращает: boolean — успешность операции

Пример использования:

compareAPI.removeFromCompare(123);

toggleCompare(productId)

Переключает состояние товара в списке сравнения.

Параметры:

• productId (number|string) — ID товара

Возвращает: boolean — новое состояние (true — добавлен, false — удален)

Пример использования:

const isAdded = compareAPI.toggleCompare(123);
console.log(isAdded ? 'Добавлен' : 'Удален');

isInCompare(productId)

Проверяет, находится ли товар в списке сравнения.

Параметры:

• productId (number|string) — ID товара

Возвращает: boolean

Пример использования:

if (compareAPI.isInCompare(123)) {
  console.log('Товар в сравнении');
}

getCompareList()

Получает полный список ID товаров для сравнения.

Возвращает: number[] — массив ID товаров

Пример использования:

const compareList = compareAPI.getCompareList();
console.log('Товары для сравнения:', compareList);

getCount()

Получает количество товаров в списке сравнения.

Возвращает: number

Пример использования:

const count = compareAPI.getCount();
console.log(`В сравнении ${count} товаров`);

clearCompareList()

Очищает весь список сравнения.

Пример использования:

compareAPI.clearCompareList();

Автоматические обновления

Compare API автоматически:

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

2. Обновляет кнопки товаров (.js-add-compare): меняет состояние иконок (активное/неактивное), обновляет title кнопок, добавляет/убирает класс products-compare--active

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

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

Событие compare:changed

API генерирует кастомное событие compare:changed:

document.addEventListener('compare:changed', (event) => {
  const { action, productId, count, compareList } = event.detail;
  console.log(`Действие: ${action}, Товар: ${productId}, Всего: ${count}`);
});

Возможные действия:

• added — товар добавлен

• removed — товар удален

• cleared — список очищен

Селекторы DOM-элементов

Хранение данных

Данные сохраняются в cookie shop_compare в формате:

• Строка с разделителями: "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-compare"
        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.