Как нарисовать карточку в Zero Block и связать с каталогом
Кастомная карточка нужна, когда дизайн нельзя собрать настройками стандартного блока: своя композиция, типографика и несколько независимых карточек на одной странице. Рисовать её можно в Zero Block, но название, цену, фото и наличие нельзя надёжно копировать из соседней готовой карточки. Устойчивое решение связывает каждый шаблон с uid товара, получает данные каталога и оставляет корзину родному механизму Тильды.
Сначала проверьте стандартные блоки
Своя карточка оправдана не потому, что Zero Block «профессиональнее». Штатный каталог уже умеет загружать товары, варианты, остатки, скидки, попап и корзину. Каждая заменённая часть становится вашей ответственностью при сдаче сайта.
Оставайтесь на стандартной карточке, если задачу решают её сетка, отступы, CSS и настройки состава. Переходите к шаблону в Zero Block, когда клиент утвердил композицию, которую нельзя получить настройками, и эта разница действительно важна для проекта.
Как устроена безопасная связка
У каждой карточки есть два слоя:
- Шаблон — элементы Zero Block, которыми управляет дизайнер.
- Данные — один объект товара в явном JSON-списке.
В шаблоне заранее отмечают роли: название, цена, старая цена, изображение, наличие и кнопка. После загрузки страницы модификация проходит по всем контейнерам, берёт соответствующий объект из JSON и заполняет только внутренние роли этого экземпляра.
Так данные не зашиваются в визуальные элементы и тот же шаблон можно дублировать. Но JSON остаётся отдельным источником: автоматическая синхронизация с каталогом по uid в готовый MOD-180 не входит.
Почему нельзя парсить соседнюю карточку
Популярная заплатка — поставить стандартную карточку, скрыть её и скопировать из неё цену и картинку. У такого решения четыре слабых места:
- данные могут появиться позже вашего скрипта;
- класс внутреннего элемента меняется вместе с шаблоном Тильды;
- фильтр или пагинация перерисовывает карточку;
- при нескольких товарах легко скопировать данные первого во все шаблоны.
Рантайм каталога уже обращается к данным через getproductslist, getproduct и
getproductsbyuid, различая опубликованную страницу и edit/preview. Но это не
публичный контракт MOD-180: готовая версия принимает явный JSON рядом с шаблоном.
Если нужен единый каталог по uid, интеграцию проверяют отдельно на опубликованной
странице и не копируют экранный текст готового блока.
Несколько карточек на странице
Фраза «работает только один раз» почти всегда указывает на глобальный id,
document.querySelector() или одно общее состояние. В рабочей схеме каждый
контейнер обрабатывается отдельно:
document.querySelectorAll('[data-mk-product-card]').forEach((card, index) => {
const product = products[index];
const title = card.querySelector('[data-mk-role="title"]');
const price = card.querySelector('[data-mk-role="price"]');
// Данные из JSON записываются только в эту card.
});Это не готовая интеграция — в примере намеренно нет выдуманного адреса API и своей корзины. Он показывает архитектуру: список экземпляров, локальный поиск внутри карточки и отдельные структурированные данные для каждого шаблона.
Что оставить Тильде
Кастомный внешний вид не требует заменять магазин. Родному рантайму лучше оставить:
- выбранные варианты товара;
- проверку остатка;
- добавление совместимого объекта в корзину;
- товарный попап, если он участвует в сценарии;
- скидки, доставку и оформление заказа.
Если мод рисует цену самостоятельно, но добавляет в корзину другой объект, посетитель увидит одно число в карточке и другое при оформлении. Поэтому MOD-180 ограничивает задачу шаблоном, явными данными и передачей покупки в родную корзину, а не создаёт параллельный магазин.
Состояния, которые надо нарисовать заранее
Дизайнеру нужны не только идеальные данные из макета. Подготовьте:
- длинное название в две-три строки;
- товар без изображения;
- обычную и старую цену;
- нулевой остаток;
- ошибку загрузки;
- состояние до появления данных;
- активную и недоступную кнопку.
Если Zero Block работает в hug, после подстановки длинного названия и картинки
нужен пересчёт высоты. Иначе карточка наполнится правильно, но следующий блок
наедет на неё.
Проверка перед сдачей
Поставьте на одну страницу минимум три разных товара и один товар дважды. Затем проверьте публикацию и preview, изменение цены в каталоге, отсутствие фото, нулевой остаток, повторную инициализацию и добавление в родную корзину.
Клиенту оставьте простую инструкцию: где взять uid, куда вставить его в шаблон и какие элементы нельзя переименовывать. Карточка должна обновляться редактором каталога без участия разработчика — иначе дизайнерская свобода превратится в постоянную ручную поддержку.