Виджеты на сайте

Готовые блоки рекомендаций: вёрстка, карусель, адаптив, «В корзину» и аналитика показов и кликов уже внутри. Внешний вид настраивается в личном кабинете.

Установка

Одной строкой (рекомендуется)

Один скрипт подключает трекер и виджеты, а блоки вставляются на страницы по правилам из личного кабинета (Виджеты → Установка): «на карточке товара после блока с ценой», «на главной перед футером».

<script defer src="https://cdn2.searchbooster.net/scripts/trade-widgets/PROJECT_UUID/init.js"></script>

Код на страницах менять не нужно — достаточно указать в правиле тип страницы (home, catalog, product, cart, notFound), CSS-селектор контейнера и откуда брать ID товара и категории.

Вручную

1. Подключите трекер и скрипт виджетов в <head> всех страниц:

   <script defer src="https://cdn2.searchbooster.net/scripts/tracker/PROJECT_UUID/searchbooster.js"></script>
   <script defer charset="utf-8" src="https://cdn2.searchbooster.net/scripts/widgets/PROJECT_UUID/searchbooster.js"></script>

2. Вставьте блок в нужное место страницы:

   <sb-widget id="WIDGET_ID" product-id="110166"></sb-widget>

PROJECT_UUID — UUID проекта, WIDGET_ID — ID виджета из личного кабинета.

Примеры по типам

<!-- Главная: персональные и популярные -->
<sb-widget id="402"></sb-widget>
<sb-widget id="405" category-id="0"></sb-widget>

<!-- Карточка товара: похожие и сопутствующие -->
<sb-widget id="410" product-id="110166"></sb-widget>
<sb-widget id="411" product-id="110166" vendor-from-product></sb-widget>

<!-- Категория: популярные в категории -->
<sb-widget id="405" category-id="8145"></sb-widget>

<!-- Корзина: «С этим покупают» -->
<sb-widget id="420" cross-sale-ids="110166, 99839"></sb-widget>

Атрибуты

Атрибут	Описание
id	ID виджета. Обязательный.
product-id	ID товара на странице (как в фиде). Нужен похожим и персональным в карточке.
cross-sale-ids	ID товаров в корзине через запятую — для «С этим покупают».
product-ids	ID товаров, которые нужно исключить из блока.
category-id	ID категории; 0 — без категории.
vendors	Только эти бренды, через запятую.
vendor-from-product	Только бренд текущего товара (product-id). vendors важнее.
with-not-available	true — показывать и товары не в наличии. По умолчанию — только в наличии.
price-more-this / price-less-this	Дороже / дешевле текущего товара.
price-near-this + price-percent="10"	Цена в пределах ±N% от текущего товара.
price-min, price-max	Абсолютные границы цены — отменяют относительные.
regionId	Регион для цен и наличия.

Динамические страницы и SPA

Если страница меняется без перезагрузки (React, Vue), при смене товара вставляйте новый элемент <sb-widget> с новым product-id вместо изменения атрибутов старого. Для полностью своей вёрстки используйте API рекомендаций.

Проверить без установки

Перед установкой покажите виджет на живом сайте через расширение User JavaScript and CSS для Chrome:

const s = document.createElement('script');
s.src = 'https://cdn2.searchbooster.net/scripts/widgets/PROJECT_UUID/searchbooster.js';
document.head.appendChild(s);

const w = document.createElement('sb-widget');
w.id = 'WIDGET_ID';
w.setAttribute('product-id', '110166');
document.querySelector('.product-description')?.after(w);

Корзина и избранное

Чтобы кнопка «В корзину» в блоке добавляла товар в вашу корзину и показывала актуальное количество, задайте код события «Добавление в корзину» в настройках виджета и источник корзины (window.sbEvents.getCart или скрипт в общих настройках) — см. Корзина и избранное.