Блок сравнения цен от разных продавцов на InSales

Что это за блок

Блок сравнения цен — это виджет на странице товара, где покупатель видит предложения от разных продавцов. Как в Яндекс.Маркете: один товар, но несколько магазинов с разными ценами и условиями.

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

Задача

Создать блок, который улучшает пользовательский опыт покупки. Покупатель видит все предложения, сравнивает, выбирает лучшее — не покидая сайт.

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

Как выглядит интерфейс

Первые предложения

Блок показывает первые 4-5 предложений сразу. Остальные скрыты под кнопкой "Показать еще". Можно раскрыть до 50 офферов.

Информация в каждом предложении

Цена — изначальная стоимость товара
Размер скидки — например, -15%
Финальная цена — цена после применения скидки
Логотип магазина — визуальная идентификация продавца
Название магазина — кто продает товар
Рейтинг продавца — звезды, отзывы покупателей
Кэшбэк — возврат части денег через сервисы (если есть)
Иконки кэшбэк-сервисов — LetyShops, Megabonus и т.д.

Без перезагрузки страницы

Блок работает динамически. При клике на "Показать еще" подгружаются дополнительные предложения без перезагрузки всей страницы.

Зачем это нужно покупателю

Покупатель хочет найти лучшую цену. Обычно он открывает несколько вкладок, сравнивает вручную. Блок сравнения делает это автоматически — все предложения в одном месте.

Фронтенд (клиентская часть)

Интерфейс пользователя

Создали блок, похожий на системы сравнения цен из Яндекс.Маркета. Покупатель видит предложения от разных продавцов на одной странице.

Отображение предложений

Первые 4-5 предложений показываются сразу. Остальные — по клику на кнопку "Показать еще". Можно раскрыть до 50 офферов.

Используем AJAX для подгрузки дополнительных предложений. Страница не перезагружается, данные приходят в фоне.

Подробная карточка предложения

Каждая карточка содержит:

Логотип магазина (загружаем изображение)
Название магазина и ссылку на него
Цену до скидки (зачеркнутую)
Процент скидки (в рамке)
Финальную цену (крупным шрифтом)
Рейтинг магазина (звезды)
Информацию о кэшбэке с иконками сервисов
Кнопку "Купить" с переходом в магазин

Бэкенд (серверная часть)

Система обработки данных

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

Как это работает:

Загружаем XML-фид с данными о товарах и предложениях
Парсим фид, извлекаем информацию о товарах
Сопоставляем товары по артикулу или названию
Сохраняем предложения в базу данных
Обновляем информацию при изменении цен

XML-фид с данными

Фид содержит полные данные о товарах:

Название товара
Описание
Артикул и штрихкод
Изначальная цена
Цена со скидкой
Процент скидки
Информация о продавце (название, логотип, рейтинг)
Информация о кэшбэке (процент, сервис)
Ссылка на товар в магазине продавца

Структура фида

Фид организован так: сначала идет информация о товаре, затем список всех предложений для этого товара.

<product>
  <id>12345</id>
  <name>Название товара</name>
  <offers>
    <offer>
      <shop>Магазин 1</shop>
      <price>1000</price>
      <discount>15</discount>
      <final_price>850</final_price>
      <rating>4.5</rating>
      <cashback>5%</cashback>
    </offer>
    <offer>
      <shop>Магазин 2</shop>
      <price>950</price>
      ...
    </offer>
  </offers>
</product>

Обновление предложений

Цены меняются — нужно регулярно обновлять данные. Определили процедуры для обновления существующих предложений:

Проверяем фид каждые 2-4 часа
Сравниваем новые цены с сохраненными
Если цена изменилась — обновляем запись в базе
Если предложение исчезло — помечаем как неактивное
Если появилось новое предложение — добавляем в базу

Не перезагружаем все данные полностью — только обновляем изменившиеся записи. Это экономит ресурсы и ускоряет процесс.

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

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

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

Сопоставляем по:

Артикулу (самый надежный способ)
Штрихкоду (если есть)
Названию товара (если артикула нет)

База данных предложений

Создали отдельную таблицу для хранения предложений. В ней:

ID товара в InSales
ID магазина-продавца
Название магазина
URL логотипа магазина
Изначальная цена
Процент скидки
Финальная цена
Рейтинг магазина
Информация о кэшбэке
Ссылка на товар в магазине
Дата последнего обновления
Статус (активно/неактивно)

API для получения предложений

Создали API-эндпоинт, который возвращает предложения для конкретного товара. Фронтенд запрашивает данные через AJAX.

Запрос: GET /api/offers?product_id=12345&limit=5&offset=0

Ответ: JSON с массивом предложений.

Результат

Покупатели видят предложения от разных продавцов на одной странице
Сравнивают цены, скидки, кэшбэк, рейтинги
Не уходят с сайта, чтобы искать лучшую цену
Увеличение конверсии за счет удобства сравнения
Уменьшение оттока пользователей на сайты конкурентов
До 50 предложений на одной странице
Автоматическое обновление цен каждые 2-4 часа
Динамическая подгрузка предложений без перезагрузки страницы