Документация — модификации для Zero-блоков

2026-06-09 17:21

Интернет-магазин в Zero-блоке

Модификации

Интернет-магазин

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

20 минут

Продвинутый модуль, который позволяет создать кастомный каталог товаров в Zero-блоке и собственные детальные страницы с нативной логикой и гибкой вёрсткой.

Как работает модификация

Общие механики

В основе модуля лежит общий принцип: данные о товарах берутся из стандартного каталога Тильды через её API, а Zero-вёрстка блока используется только как шаблон оформления. Модификация находит в блоке размеченные элементы, берёт их расположение и размеры как образец, при необходимости клонирует карточку под нужное число товаров и подставляет в элементы реальные значения из каталога. За счёт этого внешний вид полностью определяется вёрсткой блока и не зависит от стандартного дизайна магазина Тильды.

Пока данные подгружаются из каталога, на месте контента показываются скелетоны — заглушки в форме элементов, которые сменяются реальными значениями после загрузки. Размеры блока и сетки карточек пересчитываются автоматически, в том числе при изменении размера окна.

Модуль не заменяет стандартный магазин Тильды, а работает поверх него: за корзину, избранное и оформление заказа по-прежнему отвечают штатные блоки ST100 (корзина) и ST110 (избранное), а функции модуля синхронизируются с ними.

Каталог товаров

Каталог выводит товары выбранного раздела Тильды в Zero-блок, оформляя их собственными карточками. Карточка верстается один раз как шаблон, а модификация запрашивает товары раздела через API Тильды и размножает шаблон по их количеству, подставляя в каждую карточку реальные данные — название, цену, изображение, остаток. Если в разделе нет товаров или поиск ничего не нашёл, вместо каталога показывается отдельный блок пустого состояния.

Каталог дополняется тремя независимыми блоками — пагинацией, разделами и поиском:

Пагинация появляется, когда товаров больше, чем помещается на одной странице (params.perpage, по умолчанию 12), и подгружает следующую порцию товаров без перезагрузки страницы. Внешний вид страниц и стрелок берётся из кнопок-шаблонов в самом блоке.
Разделы фильтруют каталог по категориям: переключение раздела заново запрашивает товары и перерисовывает карточки. Раздел определяется по тексту кнопки (он должен совпадать с названием в каталоге) или по заданному номеру.
Поиск ищет товары по введённому запросу в пределах текущего раздела и так же перерисовывает выдачу.

Чтобы результат фильтрации или поиска можно было открыть по прямой ссылке, текущий раздел и запрос сохраняются в адресной строке (params.urlparams).

Подробнее: Каталог товаров в Zero-блоке

Определение раздела каталога

Раздел каталога, из которого выводятся товары, задаётся параметром params.storepart — это внутренний идентификатор раздела в Тильде. Он нужен каталогу, карточке товара и похожим товарам. Определить его можно двумя способами.

В генераторе кода есть возможность автоматически определить номер раздела по ссылке на опубликованную страницу. Для этого на временную страницу необходимо добавить блок каталога ST300, выбрать нужный раздел, опубликовать страницу и вставить ссылку на неё в генератор кода. После нажатия на кнопку 🔄, номер раздела автоматически подтянется в код.

Номер раздела также можно получить вручную, если нужен конкретный раздел (для раздела «Все товары» способ не подходит): в проекте по пути «Товары → выбранный раздел» адрес страницы имеет вид https://store.tilda.ru/store/?projectid=0000000&storepartuid=000000000000, где значение после storepartuid= и есть нужный идентификатор.

Карточка товара

Карточка товара заменяет стандартную страницу /tproduct/ собственной вёрсткой. Модификация определяет, какой товар показывать, по его идентификатору и подставляет данные из каталога в размеченные элементы блока — название, описание, артикул, цену, остаток, изображение или галерею. На стандартной странице товара идентификатор определяется автоматически из адреса; для отдельной страницы его задают вручную (номер берётся в проекте по пути «Настройки товаров → Товар → Product ID»).

Кроме основных данных карточка показывает опции и характеристики товара. Опции — это варианты по свойствам (цвет, размер и т.д.): модификация подставляет в их элементы реальные значения из каталога, а если у товара нет какого-то свойства, его опции скрываются. Характеристики устроены так же, как карточки каталога: пара «название — значение» верстается как шаблон и размножается под количество характеристик товара.

Хлебные крошки выводятся отдельным блоком и заполняются уровнями навигации товара, начиная с последних: если уровней больше, чем кнопок, показываются ближайшие к товару. Их можно отрисовать вместе с карточкой или независимо от неё.

Подробнее: Карточка товара в Zero-блоке

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

Иконки корзины и избранного работают поверх штатных блоков Тильды — ST100 (корзина) и ST110 (избранное): их стандартные иконки скрываются, а вместо них в любом Zero-блоке размещается своя кнопка со счётчиком. Счётчик берёт актуальное количество товаров из этих блоков и обновляется при каждом изменении корзины или избранного; для корзины можно вывести и общую сумму заказа. За счёт связи со штатными блоками вся логика заказа остаётся на стороне Тильды, а оформление полностью своё.

Подробнее: Иконка корзины и избранного в Zero-блоке

Особенности SEO

Интернет-магазин в Zero-блоке работает по той же механике, что и стандартный каталог Тильды, и как следствие, индексируется так же. Карточки каталога и похожих товаров подставляются скриптом после ответа API магазина, поэтому в исходном коде страницы их нет, и поисковики сами решают, как индексировать контент: после рендеринга JavaScript или до него (чаще всего – до). Если данные каталога важно отдавать поисковику, можно включить обработку JS в настройках вебмастера.

Для карточки товара в Zero-блоке механика немного отличается и зависит от того, где она размещена. На стандартной странице /tproduct/ все данные товара автоматически попадают в исходный код при публикации, поэтому такая карточка индексируется полностью: модификация только синхронизирует эти данные с Zero-блоком. На любой другой странице они, как и в каталоге, подставляются скриптом и в индекс попадают по усмотрению поисковиков.

Несколько нюансов:

Если в заглушках используются заголовки H1–H3, их текст может попасть в индекс до js-обработки и снизить качество выдачи. Поэтому в карточках их лучше не применять.
При переключении вариантов товара контент карточки обновляется динамически в рамках одной страницы, поэтому её исходный код не меняется. Поисковики в таком случае увидят только главный вариант товара. Спойлер: в стандартной Тильде это работает точно так же.

Начало работы

Установка библиотеки

Для работы магазина необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.

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

Если карточка товара или похожие товары размещаются на стандартной странице товара (URL /tproduct/...), перед кодом инициализации дополнительно подключается скрипт магазина:

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

Дальнейшая настройка производится по инструкции к каждому из вариантов:

Элементы

Ниже приведены элементы, из которых состоят страницы магазина. Они задаются и настраиваются в интерфейсе Тильды. Набор зависит от собираемой страницы.

Каталог товаров

Элемент	Описание	Класс/Ссылка
Блок каталога*	Zero-блок с одним рядом карточек-шаблонов. Модификация клонирует карточки под товары из каталога	.uc-store
Карточка товара*	Содержимое карточки, объединённое в группу типа Object. Рекомендуется верстать через автолэйаут	.product, #product
Изображение товара	Image или Gallery. Для галереи с одним изображением стрелки и точки скрываются автоматически	.product-image
Название	Название товара	.product-title
Описание	Короткое описание товара	.product-descr
Цена	Цена товара	.product-price
Старая цена	Скрывается автоматически, если не задана	.product-priceold
Скидка	Скидка в процентах. Можно задать в нужном формате (например, −20%). Скрывается без старой цены	.product-discount
Остаток на складе	Количество товаров на складе	.product-quantity
Метка/тег	Скрывается автоматически, если не задана в каталоге	.product-tag
Опция товара	Опции (цвет, размер и др.). Привязываются к свойству каталога через атрибут [data-option]	.product-option
Кнопка избранного	Работает при наличии на странице блока ST110	.product-like
Кнопка «В корзину»	Работает при наличии на странице блока ST100	#order
Блок пагинации	Отображается, если товаров больше, чем помещается на странице	.uc-store-pagination
Номер страницы	Номер страницы для пагинации	#page
Разделитель	Разделитель «...» между страницами пагинации	.page-separator
Кнопки «Назад»/«Вперёд»	Переключают страницы пагинации	#prev, #next
Блок разделов	Zero-блок с кнопками фильтрации каталога по категориям	.uc-store-tabs
Кнопка «Все»	Сбрасывает фильтр по разделам	#tab-all
Кнопка раздела	Текст кнопки должен совпадать с названием раздела или быть задан через [data-storepart]	#tab
Блок поиска	Отдельный блок поиска (если поиск не находится в блоке разделов)	.uc-store-search
Поле поиска	Поле формы с именем переменной search	search
Кнопка поиска	Запускает поиск по товарам	#search
Кнопка сброса поиска	Сбрасывает поисковую строку	#search-reset
Блок пустого состояния	Показывается, когда товаров нет или поиск ничего не нашёл	.uc-store-empty

* – обязательные элементы

Карточка товара

Элемент	Описание	Класс/Ссылка
Блок карточки товара*	Zero-блок с карточкой. Для автоподстройки высоты — автолэйаут (Display: Flex)	.uc-product
Изображение товара	Image или Gallery (для галереи подгружаются все фото товара)	.product-image
Название	Название товара, заданное в настройках каталога	.product-title
Короткое описание	Поле «Описание» товара, заданное в настройках каталога	.product-descr
Полное описание	Поле «Текст» товара, заданное в настройках каталога. Подгружается в формате HTML	.product-text
Артикул	Артикул товара	.product-sku
Цена	Текущая цена товара. Валюта указывается в генераторе кода или передаваемых в функцию параметрах	.product-price
Старая цена	Скрывается автоматически, если не задана	.product-priceold
Скидка	Скрывается автоматически, если не задана	.product-discount
Остаток на складе	Количество товаров на складе	.product-quantity
Метка/тег	Скрывается автоматически, если не задана	.product-tag
Кнопка избранного	Добавляет товар в избранное. Работает при наличии блока ST110	.product-like
Кнопка «В корзину»	Добавляет товар в корзину. Работает при наличии блока ST100	#order
Группа опций	Группа Object, объединяющая опции одного свойства. Скрывается, если у товара нет доступных значений	.product-option-group
Название опции	Текст с названием свойства (например, «Цвет»)	.product-option-title
Опция	Button/Shape/Form. Привязывается к свойству через атрибут [data-option]	.product-option
Группа характеристик	Группа Object, объединяющая характеристики. Скрывается целиком, если у товара нет характеристик	.product-chars-group
Характеристика	Пара «название — значение», клонируется под доступные характеристики	.product-char, .product-char-value
Блок хлебных крошек	Отдельный Zero-блок с навигацией по разделам	.uc-product-header
Уровень навигации	Кнопка уровня. Заполняется с последних уровней	#breadcrumb
Кнопка «Назад»	Возврат на предыдущую страницу или по заданной ссылке	#return

* – обязательные элементы

Похожие товары

Элемент	Описание	Класс/Ссылка
Блок похожих товаров*	Zero-блок с карточками-шаблонами	.uc-relevants
Карточка товара*	Группа Object с содержимым карточки	.product, #product
Элементы карточки	Размечаются так же, как в каталоге (.product-image, .product-title, .product-price и др.)	.product-*

* – обязательные элементы

Иконки корзины и избранного

Элемент	Описание	Класс/Ссылка
Иконка открытия корзины*	Кнопка/шейп/группа с любым внешним видом. Для работы необходим блок ST100	#cart
Счетчик товаров в корзине	Текстовый элемент, в который подставляется текущее количество товаров	.cart-counter
Сумма заказа	Общая стоимость товаров в корзине. При пустой корзине скрывается	.cart-total
Иконка открытия избранного*	Кнопка/шейп/группа с любым внешним видом. Для работы необходим блок ST110	#wishlist
Счетчик товаров в избранном	Текстовый элемент, в который подставляется текущее количество товаров	.wishlist-counter

* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой магазина. Подгружаются асинхронно как функции объекта store: загрузчик сам подключает нужный подмодуль при первом вызове.

Функция	Описание	Триггер
store.init(selector, params)	Инициализирует каталог товаров в Zero-блоке	DOM Content Loaded, Window Resize
store.product(selector, params)	Инициализирует карточку товара в Zero-блоке	DOM Content Loaded
store.breadcrumbs(selector, params)	Инициализирует хлебные крошки для товара	DOM Content Loaded; store.product() Init
store.relevants(selector, params)	Инициализирует похожие товары в Zero-блоке	DOM Content Loaded
store.cart(selector, params)	Инициализирует иконку корзины со счётчиком	DOM Content Loaded
store.wishlist(selector, params)	Инициализирует иконку избранного со счётчиком	DOM Content Loaded
store.paysystem(paysystem)	Выбирает способ оплаты в корзине и скрывает остальные	DOM Content Loaded

Аргументы, которые передаются в функциях инициализации, подробно описаны на страницах модификаций:

Параметры для каталога: ссылка
Параметры для карточки товара и хлебных крошек: ссылка
Параметры для похожих товаров: ссылка
Параметры для иконки корзины: ссылка
Параметры для иконки избранного: ссылка

События

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

Запустить функцию магазина по срабатыванию события
Отложить инициализацию любой функции можно с помощью параметров event и timeout. Например, запустить каталог через 100ms после срабатывания customEvent можно таким образом:

store.init(".uc-store", { storepart: "000000000000", event: "customEvent", timeout: 100 })

Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".

Запустить сторонний код после отрисовки каталога
Если код нужно выполнить после того, как функция магазина полностью отработает, добавьте слушатель события её отрисовки. Имя события строится из названия функции и класса блока без префикса uc или rec: каталог — storeinit-id, карточка товара — storeproduct-id, хлебные крошки — storebreadcrumbs-id, похожие товары — storerelevants-id. Например, если у блока с каталогом класс .uc-store, то слушатель события добавляется следующим образом:

window.addEventListener("storeinit-store", function(){ ... })

Функции корзины, избранного и оплаты отправляют события storecart, storewishlist без идентификатора блока.

Запустить другую модификацию после отрисовки каталога
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки каталога можно через событие storeinit:

tabs.init(".uc-store", { event: "storeinit-store" })

Инициализация

Код инициализации каждой страницы вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить вручную. В исходном виде он выглядит так (на примере каталога):

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

Примеры использования

Каталог товаров в Zero-блоке

В блоке .uc-store создаётся ряд карточек-шаблонов с классом .product и элементами .product-*; рядом — блоки .uc-store-tabs (разделы), .uc-store-search (поиск) и .uc-store-pagination (пагинация). В коде инициализации указывается класс блока и номер раздела каталога:

<script>store.init(".uc-store", { storepart: "000000000000" })</script>

Пример: Каталог товаров в Zero-блоке

Карточка товара в Zero-блоке

В блоке .uc-product собираются элементы товара, опции .product-option с атрибутом data-option, характеристики и кнопка «В корзину» #order. Блок добавляется в подвал каталога, чтобы заменить стандартную страницу /tproduct/:

<script>store.product(".uc-product")</script>

Пример: Карточка товара в Zero-блоке

Интернет-магазин в Zero-блоке