Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>

Создайте Zero-блок с карточками похожих товаров и задайте ему класс .uc-relevants

Добавьте в блок столько карточек, сколько товаров должно отображаться на странице. Модификация заполнит их данными из каталога или скроет карточки при их отсутствии.
Как задать класс блокам/элементам?
Объедините содержимое каждой карточки в группу с типом Object

Внутри карточки может быть любое количество элементов. Карточки рекомендуется верстать через автолэйаут — это позволит им динамически подстраивать размеры под контент, подгружаемый из каталога.
Как создать группу Object?
Присвойте получившимся группам класс .product и ссылку #product

Если вы хотите открывать детальную страницу товара по определенной кнопке в карточке, задайте ссылку #product только ей
Задайте элементам в карточках соответствующие классы и ссылки:
Все элементы опциональны — можно добавить только те, которые нужны в вашем дизайне:
- .product-title — название товара
- .product-descr — короткое описание товара
- .product-image — изображение товара (Image или Gallery). Для галереи с одним изображением стрелки и точки пагинации скрываются автоматически
- .product-price — цена
- .product-priceold — старая цена. Скрывается автоматически, если скидка не задана
- .product-discount — скидка в процентах. Можно задать значение в нужном формате (например, −20%). Скрывается автоматически, если отсутствует старая цена
- .product-quantity — остаток на складе
- .product-tag — метка/тег товара. Скрывается автоматически, если не задана
- .product-like — кнопка добавления товара в избранное. Работает при наличии на странице блока ST110 («Избранное»)
- #order — кнопка «В корзину». Работает при наличии на странице блока ST100 («Корзина»)
Задайте в настройках модификации параметры и стили похожих товаров
Скопируйте код и вставьте его в блок T123 в конец страницы

Если страница товара открывается по стандартному URL /tproduct/…, добавьте перед скопированным кодом:

<script src="https://cdn.postnikovmd.com/tilda@1.6/store.min.js"></script>

<script>store.product('.uc-product', { storepart: '585579740252', productuid: '250742017322', style: { skeleton: { backgroundColor: "#F3F2F7" }, favorite: { backgroundColor: '#FDECEE', backgroundImage: 'https://static.postnikovmd.com/img/icon-favorite.svg' } } })</script>
<script>store.relevants('.uc-relevants', { storepart: '585579740252', productuid: '250742017322', style: { skeleton: { backgroundColor: "#F3F2F7" }, favorite: { backgroundColor: '#FDECEE', backgroundImage: 'https://static.postnikovmd.com/img/icon-favorite.svg' } } })</script>
<script>store.cart('#cart')</script>
<script>store.wishlist('#wishlist', { hidecounter: true, style: { active: { backgroundColor: '#FDECEE', backgroundImage: 'https://static.postnikovmd.com/img/like-active.svg' } } })</script>

Все примеры

93

Настройки модификации

Скорость и тип переходов:

Класс блока*

Идентификатор продукта

Номер раздела каталога*

Получить раздел с сайта

Раздел синхронизирован

Номер раздела каталога, из которого нужно вывести товары. Можно определить автоматически:

Создайте новую (временную) страницу и добавьте на неё блок ST300
Выберите нужный раздел в настройках и опубликуйте страницу
Вставьте ссылку в поле и нажмите на кнопку 🔄. Номер раздела синхронизируется автоматически

ID продукта, для которого нужно подобрать похожие товары. Можно найти в Настройках товаров -> Товар -> Product ID.

Если вы размещаете блок на стандартной странице товара /tproduct/, идентификатор подтянется из ссылки автоматически

+ Настройки поведения

Валюта

Разделитель между тысячами

Положение и символ валюты

Формат отображения стоимости товаров. Можно задать положение и валюту, например: «1000 руб.» или «$50»

+ Настройки стилей

Избранное

Цвет фона активной иконки

Бордер активной иконки

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

Индикаторы загрузки

Цвет скелета загрузки

Цвет «заглушки», которая отображается вместо основного контента на время загрузки данных.

Отображается в карточке товара, когда он добавлен в избранное

<!--store.js Похожие товары в Zero-блоке. https://postnikovmd.com/mods/store-->
<script>store.relevants(".uc-relevants")</script>

Скопировать код

Особенности

Работает с любой вёрсткой

Карточки товаров можно оформить без ограничений по вёрстке
Синхронизируется с каталогом

Подтягивает релевантные товары в зависимости от текущего
Работает с корзиной и избранным

Позволяет добавлять товары в корзину (ST100) и избранное (ST110)