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

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

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

Создайте Zero-блок с одним рядом карточек товаров

В одном ряду может быть любое количество карточек. Модификация будет использовать их расположение и размеры как шаблон и автоматически клонировать карточки для каждого товара из каталога. См. пример
Задайте блоку с карточками товаров класс .uc-store

Как задать класс блокам/элементам?
Объедините содержимое каждой карточки в группу с типом 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-option – опции товара (цвет, размер и др.). Чтобы привязать опцию к определенному свойству в каталоге, задайте ей атрибут data-option="Имя", где имя будет соответствовать названию свойства в каталоге. В карточке может быть несколько элементов с одинаковым классом и атрибутом — при отсутствии в каталоге они скроются автоматически
- .product-like — кнопка добавления товара в избранное. Работает при наличии на странице блока ST110 («Избранное»)
- #order— кнопка добавления товара в корзину. Работает при наличии на странице блока ST100 («Корзина»)
Как задать элементам data-атрибут?
Задайте в настройках каталога шапку и подвал для товаров и включите опцию «Открывать страницу вместо попапа»

Каталог работает только с карточками, которые открываются на отдельных страницах. В дальнейшем их можно кастомизировать через Zero-блок с помощью отдельной модификации. Подробнее
Как открывать товар в отдельной странице?
Задайте в настройках модификации параметры, стили и поведение каталога
Скопируйте код и вставьте его в блок T123 в конец страницы

Пагинация

4 шага

Создайте Zero-блок с пагинацией и присвойте ему класс .uc-store-pagination

Блок будет отображаться, если общее количество товаров превышает количество товаров, доступных на одной странице.
Как задать класс блокам?
Добавьте в блок кнопки с номерами страниц и задайте им ссылку #page

В качестве кнопок рекомендуется использовать элементы с типом Button. Их можно расположить в любом месте блока. Первой кнопке задайте стили активного состояния, второй — неактивного: модификация будет использовать их как шаблон для всех остальных элементов.
Для того, чтобы сделать разделитель «...», добавьте между страницами ещё одну кнопку и присвойте ей класс .page-separator.
Добавьте в блок кнопки переключения страниц и задайте им ссылки: кнопке «вперёд» ссылку #next, кнопке «назад» — #prev
Объедините получившиеся элементы в группу с типом Object и Auto Layout

Как создать группу c автолэйаутом?

Разделы

3 шага

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

Как задать класс блокам?
Добавьте кнопку для раздела «Все» и задайте ей ссылку #tab-all
Добавьте кнопки остальных разделов и задайте им ссылку #tab

Текст кнопок должен совпадать с реальным названием раздела в каталоге. Если вы хотите его изменить, используйте для привязки кнопок атрибут data-storepart="0000", где вместо 0000 укажите номер раздела из каталога.
Как определить номер раздела?

Поиск

3 шага

Добавьте форму с поиском в блок с разделами каталога .uc-store-tabs

Если разделов на странице нет или поиск нужно разместить отдельно, создайте для формы отдельный Zero-блок и задайте ему класс .uc-store-search.
Как задать класс блокам?
Добавьте в форму поле с типом One line input field и названием переменной search
Добавьте в блок кнопки управления поиском и задайте им ссылки: кнопке «найти» ссылку #search, кнопке сброса — #search-reset

Пустое состояние

2 шага

Создайте Zero-блок для пустого состояния и присвойте ему класс .uc-store-empty

Блок будет отображаться автоматически, когда в каталоге нет товаров или поиск по нему не нашёл результатов. По умолчанию он скрыт.
Как задать класс блокам?
Если вы хотите разместить в блоке кнопку сброса поиска, задайте ей ссылку #search-reset

Как настроить:
Товары → Настройки каталога → Открывать страницу вместо поп-апа

<script>store.init('.uc-store', { storepart: '585579740252', style: { tabs: { active: { backgroundColor: '#FFFFFF', color: '#18181B' } }, pagination: { inactive: { opacity: 0.5 } }, 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
Выберите нужный раздел в настройках и опубликуйте страницу
Вставьте ссылку в поле и нажмите на кнопку 🔄. Номер раздела синхронизируется автоматически

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

Валюта

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

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

Каталог

Товаров на странице

Отключить скролл к началу раздела

Сохранять историю перемещения

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

Количество товаров, отобращающихся на одной странице. Максимальное значение — 100

Сохраняет историю перемещения по разделам и поиску в в адресной строке

Отключает перемещение к началу блока при переключении разделов и поиске по каталогу

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

Пагинация

Цвет фона активной стрелки

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

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

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

Цвет текста активного раздела

Непрозрачность неактивного раздела

Разделы

Цвет фона активного раздела

Позволяет задать свою иконку для стрелок в активном состоянии.

Примечание: для того, чтобы у кнопки «назад» иконка отображалась корректно, задайте ей такое же изображение, что и для кнопки «вперёд», и поверните её на 180º в настройках элемента

Избранное

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

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

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

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

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

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

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

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

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

Особенности

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

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

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

Встроенные фильтрация по разделам и поиск по каталогу

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

Элементы

Параметры

params.empty;Класс блока пустого состояния;string;selector + '-empty' params.perpage;Количество товаров на странице;number;12 params.scrolltotop;Прокручивать страницу к началу при переключении разделов/страниц;boolean;true params.urlparams;Сохранять состояние разделов и поиска в URL;boolean;true params.currency.placeholder;Символ валюты;string;'руб.' params.currency.separator;Разделитель между ценой и валютой;string;' ' params.currency.side;Расположение валюты ('left' / 'right');string;'right' params.transition;Скорость переходов;number;300 params.easing;Тип анимации переходов;string;'ease-in-out' params.pagination.selector;Класс блока пагинации;string;selector + '-pagination' params.pagination.page;Ссылка номеров страниц;string;'#page' params.pagination.prev;Ссылка кнопки «Назад»;string;'#prev' params.pagination.next;Ссылка кнопки «Вперёд»;string;'#next' params.pagination.separator;Класс разделителя страниц;string;'.page-separator' params.tabs.selector;Класс блока разделов;string;selector + '-tabs' params.tabs.tab;Ссылка кнопок разделов;string;'#tab' params.tabs.all;Ссылка кнопки «Все»;string;'#tab-all' params.search.selector;Класс блока поиска;string;selector + '-search' params.search.input;Имя поля поиска;string;'search' params.search.button;Ссылка кнопки поиска;string;'#search' params.search.reset;Ссылка кнопки сброса поиска;string;'#search-reset' params.style.skeleton.backgroundColor;Цвет скелетона при загрузке;string;'#F3F3F3' params.style.favorite.backgroundColor;Цвет фона кнопки избранного в активном состоянии;string;- params.style.favorite.borderColor;Цвет бордера кнопки избранного в активном состоянии;string;- params.style.favorite.backgroundImage;Иконка кнопки избранного в активном состоянии;string;- params.style.tabs.active.backgroundColor;Цвет фона активного раздела;string;- params.style.tabs.active.borderColor;Цвет бордера активного раздела;string;- params.style.tabs.active.color;Цвет текста активного раздела;string;- params.style.tabs.inactive.opacity;Непрозрачность неактивных разделов;number;- params.style.pagination.active.backgroundColor;Цвет фона активной страницы;string;- params.style.pagination.active.backgroundImage;Изображение активной страницы;string;- params.style.pagination.active.borderColor;Цвет бордера активной страницы;string;- params.style.pagination.active.opacity;Непрозрачность активной страницы;number;- params.style.pagination.inactive.opacity;Непрозрачность неактивных страниц;number;- params.event;Событие, после которого запускается модификация;string;- params.timeout;Задержка после срабатывания события;number;0