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

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

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

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

Карточку можно сверстать через автолэйаут — это позволит ей динамически подстраивать размеры под контент. Для того, чтобы весь блок изменял свою высоту под содержимое карточки, включите в настройках автолэйаут (Display: Flex).
Как включить автолэйаут у блока?
Задайте элементам в блоке соответствующие классы и ссылки:
Все элементы опциональны — можно добавить только те, которые нужны в вашем дизайне:
- .product-image — изображение товара (Image или Gallery). Для Gallery подгрузятся все фотографии из карточки товара в каталоге
- .product-title — название товара
- .product-descr — короткое описание товара (поле «Описание» в карточке товара)
- .product-text — полное описание товара (поле «Текст» в карточке товара)
- .product-sku — артикул товара
- .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>

Опции

4 шага

Добавьте в блок элементы для переключения опций товаров и задайте им класс .product-option
По ним можно переключать варианты товаров в зависимости от выбранных свойств. Поддерживаются три типа элементов:
- Кнопка (Button) — для текстовых значений (например, размер, память и др.). Модификация подставит в текст кнопки реальное значение из каталога. Первую кнопку можно оформить в активном состоянии — её стиль станет шаблоном для всех выбранных опций.
- Шейп (Shape) — для опций с выбором цвета. Модификация заменит фоновую заливку шейпа на цвет, заданный в каталоге. Чтобы цвета подтягивались, в настройках свойства товара должна быть включена опция «Свойство имеет цвет». Первый шейп можно оформить в активном состоянии — по аналогии, её стиль будет применяться для всех выбранных опций.
- Форма (Form) — для опций с выпадающим списком. Добавьте в форму поле с типом Dropdown и задайте ему произвольное имя и значения. После синхронизации с каталогом в выпадающем списке появятся доступные у товара варианты.
В карточке товара может быть одновременно несколько групп опций с разными типами.
Как задать класс элементам?
Задайте для каждой опции атрибут data-option с названием соответствующего ей свойства

Для корректной синхронизации значение атрибута должно в точности совпадать с названием свойства в каталоге.
Как задать элементам data-атрибут?
Задайте получившимся группам с опциями класс .product-option-group (опционально)
Объедините получившиеся элементы в группу с типом Object и Auto Layout

При отсутствии у товара доступных опций группы с этим классом скроются автоматически. Если этот класс не задан, скроются только отдельные элементы .product-option.

Если у свойств есть текстовые элементы с названиями (например, «Цвет»), задайте им класс .product-option-title, объедините их с группами опций и только затем присвойте получившимся группам класс .product-option-group.
Как создать группу c автолэйаутом?

Миниатюры

2 шага

Добавьте галерею в качестве изображения товара и задайте ей класс .product-image

Как задать класс элементам?
Включите точки пагинации Dots в настройках галереи

Миниатюры просто появятся на их месте. Расположение, цвет обводки и расстояние между ними можно задать в настройках галереи; размер миниатюр, их выравнивание и отступы – в настройках модификации.

Характеристики

4 шага

Создайте в блоке несколько пар элементов с названиями и значениями характеристик

Модификация будет использовать их как шаблон и клонировать под доступное количество характеристик товара. Текст внутри них может быть любым — в дальнейшем он синхронизируется с реальными значениями в каталоге
Задайте названиям характеристик класс .product-char, их значениям – класс .product-char-value

Как задать класс элементам?
Объедините каждую пару «название характеристики–значение» в общую группу с типом Object

Как создать группу Object?
Объедините получившиеся группы с характеристиками в общую группу Object и задайте ей класс .product-chars-group (опционально)

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

Хлебные крошки

3 шага

Создайте Zero-блок с хлебными крошками и задайте ему класс .uc-product-header

Как задать класс блокам?
Добавьте в блок кнопки для уровней навигации и задайте им ссылку #breadcrumb

В качестве кнопок рекомендуется использовать элементы с типом Button. Модификация заполнит их названиями и ссылками, начиная с последних уровней.
Например, если у товара три уровня навигации (Каталог → Категория → Товар), а в блоке две кнопки — отобразятся два последних уровня: Категория → Товар
Добавьте в блок кнопку «Назад» и задайте ей ссылку #return (опционально)

По клику она будет возвращать пользователя на предыдущую страницу в браузере. Чтобы сделать переход в конкретный раздел каталога, задайте кнопке прямую ссылку на него

Как настроить:
Товары → Настройки каталога → Выбрать подвал для товаров

<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.

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

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

Валюта

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

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

Хлебные крошки

Название корневого раздела

Текст, который будет отображаться для основного раздела каталога в хлебных крошках. По умолчанию — «Все категории»

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

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

Скругление углов

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

Выравнивание миниатюр

Миниатюры

Размер миниатюр

Внутренний отступ

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

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

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

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

Непрозрачность (неактивные)

Избранное

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

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

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

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

<!--store.js Карточка товара в Zero-блоке. https://postnikovmd.com/mods/store-->
<script>store.product(".uc-product")</script>

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

Доступно в подписке Pro

Чтобы скопировать код, оформите подписку

Подключить Pro

от 550 руб./мес

Особенности

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

Карточки товаров можно оформить без ограничений по вёрстке
Поддерживает свойства и характеристики

Встроенная поддержка свойств, вариантов и характеристик товара
Интегрируется с корзиной и избранным

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

Документация

Элементы

Параметры

params.char;Класс названия характеристики;string;'.product-char' params.charvalue;Класс значения характеристики;string;'.product-char-value' params.like;Класс кнопки избранного;string;'.product-like' params.order;Ссылка для кнопки «В корзину»;string;'#order' params.autoheight;Подстраивать высоту блока под содержимое;boolean;true params.miniatures;Использовать миниатюры вместо точек галереи;boolean;true params.currency.placeholder;Символ валюты;string;'руб.' params.currency.separator;Разделитель между ценой и валютой;string;' ' params.currency.side;Расположение валюты ('left' / 'right');string;'right' params.currency.decimal;Разделитель дробной части;string;'.' params.breadcrumb;Ссылка для хлебных крошек;string;'#breadcrumb' params.back;Ссылка для кнопки «Назад»;string;'#return' params.root;Название корневого раздела для хлебных крошек;string;'Все категории' params.transition;Скорость переходов;number;300 params.easing;Тип анимации переходов;string;'ease-in-out' params.style.skeleton.backgroundColor;Цвет скелетона при загрузке;string;'#F3F3F3' params.style.favorite.backgroundColor;Цвет фона кнопки избранного в активном состоянии;string;- params.style.favorite.borderColor;Цвет бордера кнопки избранного в активном состоянии;string;- params.style.favorite.backgroundImage;Иконка кнопки избранного в активном состоянии;string;- params.style.miniatures.size;Размер миниатюр в пикселях;number;48 params.style.miniatures.borderRadius;Скругление углов миниатюр;number;0 params.style.miniatures.opacity;Непрозрачность неактивных миниатюр;number;0.6 params.style.miniatures.align;Выравнивание миниатюр;string;'left'|'center'|'right' params.style.miniatures.padding;Отступы вокруг миниатюр;number;0 params.event;Событие, после которого запускается модификация;string;- params.timeout;Задержка после срабатывания события;number;-