Продвинутый модуль, который позволяет создать кастомный каталог товаров в 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-блоке
Похожие товары
Похожие товары работают по той же механике, что и каталог: карточки-шаблоны размножаются под данные из каталога Тильды. Разница в подборе — модификация берёт не весь раздел, а товары из категории текущего товара, поэтому блок обычно ставят на странице товара. Если подходящих товаров меньше, чем карточек в блоке, лишние скрываются.
Подробнее: Страница курсов в Zero-блоке
Корзина и избранное
Иконки корзины и избранного работают поверх штатных блоков Тильды — ST100 (корзина) и ST110 (избранное): их стандартные иконки скрываются, а вместо них в любом Zero-блоке размещается своя кнопка со счётчиком. Счётчик берёт актуальное количество товаров из этих блоков и обновляется при каждом изменении корзины или избранного; для корзины можно вывести и общую сумму заказа. За счёт связи со штатными блоками вся логика заказа остаётся на стороне Тильды, а оформление полностью своё.
Подробнее: Иконка корзины и избранного в Zero-блоке
Особенности SEO
Интернет-магазин в Zero-блоке работает по той же механике, что и стандартный каталог Тильды, и как следствие, индексируется так же. Карточки каталога и похожих товаров подставляются скриптом после ответа API магазина, поэтому в исходном коде страницы их нет, и поисковики сами решают, как индексировать контент: после рендеринга JavaScript или до него (чаще всего – до). Если данные каталога важно отдавать поисковику, можно включить обработку JS в настройках вебмастера.
Для карточки товара в Zero-блоке механика немного отличается и зависит от того, где она размещена. На стандартной странице /tproduct/ все данные товара автоматически попадают в исходный код при публикации, поэтому такая карточка индексируется полностью: модификация только синхронизирует эти данные с Zero-блоком. На любой другой странице они, как и в каталоге, подставляются скриптом и в индекс попадают по усмотрению поисковиков.
Несколько нюансов:
Для карточки товара в 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>Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоят страницы магазина. Они задаются и настраиваются в интерфейсе Тильды. Набор зависит от собираемой страницы.
Каталог товаров
* – обязательные элементы
Карточка товара
* – обязательные элементы
Похожие товары
* – обязательные элементы
Иконки корзины и избранного
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой магазина. Подгружаются асинхронно как функции объекта store: загрузчик сам подключает нужный подмодуль при первом вызове.
Аргументы, которые передаются в функциях инициализации, подробно описаны на страницах модификаций:
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить функцию магазина по срабатыванию события
Отложить инициализацию любой функции можно с помощью параметров event и timeout. Например, запустить каталог через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию любой функции можно с помощью параметров 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, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как функция магазина полностью отработает, добавьте слушатель события её отрисовки. Имя события строится из названия функции и класса блока без префикса uc или rec: каталог — storeinit-id, карточка товара — storeproduct-id, хлебные крошки — storebreadcrumbs-id, похожие товары — storerelevants-id. Например, если у блока с каталогом класс .uc-store, то слушатель события добавляется следующим образом:
window.addEventListener("storeinit-store", function(){ ... })Функции корзины, избранного и оплаты отправляют события storecart, storewishlist без идентификатора блока.
Запустить другую модификацию после отрисовки каталога
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки каталога можно через событие storeinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить вкладки после отрисовки каталога можно через событие 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-блоке
