AnyQuery — Разметка блоков рекомендаций

❓

Зачем нужны контейнеры

Преимущества подхода с заранее подготовленными селекторами

Для корректной интеграции блоков рекомендаций на сайте потребуется добавить в HTML-разметку контейнеры с уникальным идентификатором (id), по которому будет осуществляться привязка блоков.

🎯

Органичная вёрстка

AnyQuery не добавляет свой контейнер, способный повлиять на текущую вёрстку сайта

🔒

Изолированный селектор

При удалении или изменении других селекторов на странице блоки рекомендаций не пострадают

🔀

Лёгкое перемещение

Чтобы поменять расположение блока — достаточно перенести контейнер в нужное место вёрстки

🛠️

Как реализовать контейнер

Два шага для добавления блока рекомендаций

Расположить контейнер на странице в согласованном месте

Например: блок нужно разместить после описания товара, но до блока «Вы смотрели». В таком случае контейнер размещается после div.product-info и до div#lbrecentproduct.

product.html — пример расположения

</div>

<div id="digi-recs"></div> ← контейнер рекомендаций

</div>

⚠️

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

📱

После добавления контейнера проверьте его расположение как в десктопной, так и в мобильной версии — расположение может отличаться.

Указать уникальный идентификатор

Добавьте id="digi-recs" на элемент <div>. Если на странице несколько блоков — добавляйте цифровое обозначение в конце.

html

// Один блок на странице:
<div id="digi-recs"></div>
// Несколько блоков на странице:
<div id="digi-recs-1"></div>
<div id="digi-recs-2"></div>

✅

Итоговый вариант контейнера для одного блока:

html — готовый контейнер

<div id="digi-recs"></div>

Как проверить корректность разметки

Откройте инструменты разработчика браузера и введите в поиске по DOM digi-recs. После этого найдётся контейнер, расположенный в согласованном месте.

DevTools → Elements → поиск «digi-recs»

🔍 Найдено: 1 совпадение

<div id="digi-recs"></div> ← расположен в согласованном месте ✅

📡

Серверная интеграция — общее

Настройка трекинга при использовании API-эндпоинта рекомендаций

Если вы интегрируете блоки рекомендаций через API-эндпоинт, но нет возможности самостоятельно настроить трекинг — команда AnyQuery может настроить его самостоятельно. Для этого потребуется выполнить разметку блоков рекомендаций на фронте.

ℹ️

Трекинг настраивается через JS-код, установленный на сайте. Разметка выполняется командой партнёра по инструкции ниже.

📊

Трекируемые события

Что собирается с блоков рекомендаций

🎨Отрисовка блока

👁️Попадание блока в область видимости экрана пользователя (просмотр)

🖱️Клик на товар в блоке

🛒Добавление товара в корзину из блока рекомендаций (если есть кнопка)

🏷️

Разметка родительского блока

Атрибуты, которые необходимо добавить на родительский элемент блока

Родительскому элементу блока рекомендаций необходимо добавить следующие атрибуты:

#	Атрибут	Пример значения	Источник
1	id	any-recs-container	Произвольно; можно одинаковый для всех блоков от одного подрядчика
2	strategyMessage	Похожие товары	Из ответа API. Если заголовок задаётся партнёром — передаётся его значение
3	placement	item_page.alternatives	Из ответа API
4	strategyName	cf95b917-0924-3c9d-af9c-d2550c45e49b	Из ответа API

⚠️

Значения в таблице приведены для примера. Реальные данные необходимо брать из ответа API при каждом запросе рекомендаций.

Итоговый вид родительского элемента

html

<div
  id="any-recs-container"
  strategyMessage="Похожие товары"
  placement="item_page.alternatives"
  strategyName="cf95b917-0924-3c9d-af9c-d2550c45e49b"
>
  <!-- Контент блока рекомендаций -->
</div>

🃏

Разметка карточки товара внутри блока

Атрибуты для каждой карточки в блоке рекомендаций

Каждой карточке товара внутри блока рекомендаций необходимо добавить:

#	Что добавить	Пример	Описание
1	class	any-recs-product	Класс для идентификации карточек товара в блоке
2	any-offer-id или data-any-offer-id	33526	ID товара из YML-фида (`offer_id`)

Итоговый вид карточки товара

html

<div
  class="any-recs-product"
  any-offer-id="33526"
>
  <!-- Контент карточки товара -->
</div>

🧩

CSS Modules — дополнительная разметка

Если в проекте используется автоматическая генерация имён классов

Если в вашем проекте используются CSS Modules, имена классов генерируются автоматически и содержат хэш для изоляции стилей. В итоге в реальном DOM класс выглядит не как product-name, а как product-name__xK9p2 — и это имя меняется при каждой сборке.

Пример — CSS Modules

/* В коде компонента */

.productName { font-size: 16px; font-weight: 700; }

/* В реальном DOM после сборки */

<span class="productName__xK9p2">Название товара</span>

/* Хэш меняется при каждой пересборке — селектор ненадёжен */

⚠️

Из-за нестабильных хэшей JS-код трекинга не может надёжно найти нужные элементы карточки (название, цену, кнопки) по их CSS-классу.
Решение — добавить стабильные классы с префиксом any-recs-product__ непосредственно на нужные элементы.

Стабильные классы добавляются дополнительно к существующим — они не влияют на стили и не конфликтуют с CSS Modules, поскольку не несут стилевой нагрузки.

Рекомендуемые классы для элементов карточки

	Класс	Обязательность	Элемент	Примечание
🏷️	any-recs-product__name	обязателен	Название товара	Используется в трекинге кликов и отображении сниппета
💰	any-recs-product__price	обязателен	Актуальная цена товара. Если скидки нет — основная цена	При наличии скидки — цена со скидкой (итоговая к оплате)
🛒	any-recs-product__cart-button	обязателен	Кнопка «В корзину»	Основная кнопка добавления в корзину
➕	any-recs-product__cart-counter-add	если есть счётчик	Кнопка «+» в счётчике количества товара	Если товар добавляется через счётчик, а не через отдельную кнопку
❤️	any-recs-product__favorite-button	необязателен	Кнопка «В избранное»	Добавить, если кнопка избранного присутствует в карточке
⚖️	any-recs-product__compare-button	необязателен	Кнопка «В сравнение»	Добавить, если кнопка сравнения присутствует в карточке

💡

Если в карточке используется только счётчик (без отдельной кнопки «В корзину»), добавьте класс any-recs-product__cart-counter-add на кнопку «+» счётчика. Если есть и кнопка, и счётчик — добавьте оба класса на соответствующие элементы.

Пример карточки с классами для CSS Modules

html — карточка с CSS Modules классами

<div
  class="any-recs-product"
  any-offer-id="33526"
>

  <!-- Название товара -->
  <span class="productName__xK9p2 any-recs-product__name">
    Смартфон Samsung Galaxy A55
  </span>

  <!-- Цена (со скидкой, если есть; иначе — обычная) -->
  <span class="priceActual__mR3k any-recs-product__price">
    34 990 ₽
  </span>

  <!-- Кнопка «В корзину» -->
  <button class="addToCart__Lp7q any-recs-product__cart-button">
    В корзину
  </button>

  <!-- Счётчик количества (если есть) — кнопка «+» -->
  <button class="counterAdd__Yv2s any-recs-product__cart-counter-add">+</button>

  <!-- Кнопка «В избранное» (если есть) -->
  <button class="favoriteBtn__Qw1n any-recs-product__favorite-button">
    ♡
  </button>

  <!-- Кнопка «В сравнение» (если есть) -->
  <button class="compareBtn__Tz8e any-recs-product__compare-button">
    ⚖
  </button>

</div>

✅

Классы вида productName__xK9p2 — это сгенерированные CSS Modules классы. Классы вида any-recs-product__name — стабильные, добавляются рядом и не влияют на стили.

📋

Полный пример блока рекомендаций

Родительский контейнер + карточки с полной разметкой

html — полная разметка

<div
  id="any-recs-container"
  strategyMessage="Похожие товары"
  placement="item_page.alternatives"
  strategyName="cf95b917-0924-3c9d-af9c-d2550c45e49b"
>
  <h2>Похожие товары</h2>

  <!-- Карточка 1 -->
  <div class="any-recs-product" any-offer-id="33526">
    <span class="productName__xK9p2 any-recs-product__name">Товар 1</span>
    <span class="price__aB4r any-recs-product__price">1 990 ₽</span>
    <button class="btn__Lp7q any-recs-product__cart-button">В корзину</button>
    <button class="fav__Qw1n any-recs-product__favorite-button">♡</button>
  </div>

  <!-- Карточка 2 -->
  <div class="any-recs-product" any-offer-id="44812">
    <span class="productName__xK9p2 any-recs-product__name">Товар 2</span>
    <span class="price__aB4r any-recs-product__price">3 490 ₽</span>
    <button class="counterAdd__Yv2s any-recs-product__cart-counter-add">+</button>
    <button class="compare__Tz8e any-recs-product__compare-button">⚖</button>
  </div>

</div>

<!-- Легенда подсветки:
  зелёный  — название и цена (обязательны)
  жёлтый   — кнопки корзины / счётчика (обязательны)
  синий    — избранное и сравнение (если есть) -->