Переключение вариантов товара по цвету для Ucontay.kz

Задача

Магазин Ucontay.kz продает одежду с вариантами разных цветов. Проблема: когда покупатель выбирает цвет в фильтре, товар показывает главное фото, а не фото выбранного цвета.

Например, есть футболка в красном, синем и зеленом цвете. Покупатель выбирает в фильтре "синий". Видит список товаров, но все футболки показывают главное фото (красный цвет), хотя в фильтре выбран синий.

Нужно сделать так, чтобы при выборе цвета товары автоматически переключались на вариант с этим цветом.

Что реализовали

1. Поле "Цвет категории"

Добавили в админ-панели InSales дополнительное поле для категорий — "Цвет категории".

Зачем это нужно: некоторые категории показывают товары определенного цвета. Например, категория "Красные футболки" должна показывать все футболки в красном варианте.

Важно: название цвета в поле должно точно совпадать с параметром товара, включая регистр. Если в товаре написано "Красный", в поле категории тоже должно быть "Красный", а не "красный".

2. Алгоритмы переключения

Настроили несколько сценариев работы:

Сценарий 1: Указан цвет в категории

Если в категории установлен цвет, после загрузки страницы все товары автоматически переключаются на вариант с этим цветом.

Сценарий 2: Выбран один цвет в фильтре

Покупатель выбирает в фильтре один цвет. Товары переключаются на вариант с выбранным цветом.

Сценарий 3: Выбрано несколько цветов

Покупатель выбирает несколько цветов одновременно (например, красный и синий). В этом случае показываются главные изображения товаров.

Почему так: если выбрано несколько цветов, система не знает, какой именно вариант показать. Поэтому показывает главное фото.

Сценарий 4: Фильтры сброшены

Покупатель сбрасывает фильтры. Товары возвращаются к первым доступным вариантам или к цвету, установленному для категории (если он указан).

Зачем это нужно

Покупатель выбирает синий цвет, потому что хочет видеть синие товары. Если показывать красные фото, это сбивает с толку. Автоматическое переключение вариантов улучшает пользовательский опыт.

3. Оптимизация каталога

Убрали отвлекающие элементы:

Автоматическое перелистывание изображений — раньше фото товаров в каталоге автоматически переключались. Это отвлекало. Убрали эту функцию.
Индикаторы пагинации — точки под изображениями товаров, показывающие количество фото. Они тоже занимали место и отвлекали. Удалили.

4. Кнопка "Показать ещё"

На странице категории есть кнопка "Показать ещё" — она подгружает дополнительные товары без перезагрузки страницы.

Настроили скрипт так, чтобы новые товары, загруженные через эту кнопку, тоже автоматически переключались на варианты с выбранным цветом.

Технические детали

JavaScript для управления фильтрами

Написали скрипт, который отслеживает изменения в фильтрах. Когда покупатель выбирает цвет, скрипт:

Читает выбранный цвет из фильтра
Проходит по всем товарам на странице
Для каждого товара ищет вариант с выбранным цветом
Переключает изображение на этот вариант
Обновляет цену (если варианты имеют разные цены)

API InSales для дополнительных полей

Использовали API InSales для создания дополнительного поля "Цвет категории". Это поле хранится в настройках категории и доступно через API.

При загрузке страницы скрипт читает значение этого поля и применяет его к товарам в категории.

Сопоставление цветов

Главная сложность — сопоставить цвет из фильтра с вариантом товара.

В InSales варианты товара хранятся как массив. У каждого варианта есть параметры (размер, цвет и т.д.). Скрипт ищет вариант, у которого параметр "Цвет" совпадает с выбранным в фильтре.

// Пример структуры варианта
{
  id: 12345,
  title: "Футболка красная M",
  price: 1000,
  image: "red-shirt.jpg",
  properties: {
    "Цвет": "Красный",
    "Размер": "M"
  }
}

Обработка AJAX-загрузки

Кнопка "Показать ещё" загружает товары через AJAX. После загрузки нужно применить переключение вариантов к новым товарам.

Использовали MutationObserver — он отслеживает изменения в DOM. Когда добавляются новые товары, скрипт автоматически применяет к ним логику переключения по цвету.

Оптимизация производительности

Скрипт работает на каждой странице категории. Если товаров много (50-100), скрипт может тормозить.

Оптимизировали:

Кэшируем результаты поиска вариантов
Используем debounce для событий фильтрации
Обрабатываем товары пакетами, а не все сразу
Используем requestAnimationFrame для плавных изменений

Результат

Категории автоматически показывают товары с заданным цветом
При выборе цвета в фильтре товары переключаются на нужный вариант
При выборе нескольких цветов показываются главные изображения
Убрано автоматическое перелистывание и индикаторы пагинации
Плавная работа с кнопкой "Показать ещё"
Фильтрация по цвету стала интуитивно понятной
Покупатели видят именно те варианты, которые выбрали

О проекте Ucontay.kz

Ucontay.kz — интернет-магазин одежды в Казахстане. Продают одежду с множеством вариантов цветов и размеров. Для них важно, чтобы покупатель сразу видел нужный цвет.