NLM213 • Время настройки: 3 минуты
Кастомная карточка товара в Zero Block на Тильде
Эта модификация связывает остаток товара из стандартного блока магазина Тильды с элементами в вашем Zero Block. При наличии товара она делает кнопку кликабельной для добавления в корзину и показывает остаток. Когда товар заканчивается, она меняет текст и внешний вид кнопки в Zero Block, опционально превращая ее в ссылку на предзаказ или другую страницу.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Верстка на Тильде с нуля до Pro
SKU: 700.954.29
25000
р.
р.
When we first checked out our new headphones, we noticed the box said “improved bass”. We had to wonder if this was marketing jargon or the real thing? But it only took a moment to realize that bass was not kidding.
Интернет-магазин на Тильде
SKU: 700.954.29
25000
р.
р.
When we first checked out our new headphones, we noticed the box said “improved bass”. We had to wonder if this was marketing jargon or the real thing? But it only took a moment to realize that bass was not kidding.
00
Осталось мест:
Изучи уникальную методику, чтобы брать проекты с большими чеками от 100 тысяч рублей.
Курс «Интернет-магазин на Тильде»
Научись создавать страницу профиля в Зеро блоке —
и получи обратную связь!
00
Осталось мест:
Курс «Верстка на Тильде с нуля до Pro»
Смотрите, как быстро установить модификацию
Инструкция
Эти настройки позволяют связать конкретные товары из стандартных блоков магазина с элементами в вашем Zero Block и настроить их поведение.
- Создайте на странице Zero Block с нужной версткой дизайна.
- Добавьте на страницу столько блоков ST200, сколько планируете настраивать товаров. В настройках блока укажите ID товара из каталога, который необходимо выводить в Zero Block. Как это сделать? Шаг 1 и Шаг 2.
- ID блока ST200: Вставьте сюда полный ID стандартного блока Тильды (например, #rec123456789), в котором находится товар, остаток которого вы хотите отслеживать.
- Класс кнопки «В корзину»: Вставьте сюда CSS класс элемента кнопки в вашем Zero Block, которую вы хотите привязать к этому товару.
- Класс элемента с остатком: Вставьте сюда CSS класс элемента в вашем Zero Block, который содержит элемент с классом .tn-atom, где должен отображаться остаток товара или текст "Нет в наличии". Скрипт будет искать этот класс внутри элемента с этим классом и менять его текст.
- Текст кнопки «Нет в наличии»: Укажите текст, который будет отображаться в элементе с остатком (внутри .tn-atom, найденного по предыдущему пункту) при нулевом остатке товара.
- Непрозрачность кнопки «Нет в наличии» от 0% до 100%: Укажите значение прозрачности кнопки в Zero Block при нулевом остатке. Используйте число от 0 до 1, где 0 — полностью прозрачная, а 1 — полностью непрозрачная (например, 0.7 для 70%).
- Ссылка для кнопки нет «Нет в наличии»: (Опционально) Вставьте сюда полную ссылку (URL, например https://ваша-ссылка.ru, или ссылку на попап Тильды, например #popup:ваш_id_попапа), на которую будет вести кнопка в Zero Block, когда у товара нулевой остаток. Если это поле заполнено, кнопка при нулевом остатке станет обычной кликабельной ссылкой на этот адрес, с указанной прозрачностью и текстом. Если поле оставлено пустым, кнопка при нулевом остатке станет некликабельной, с указанной прозрачностью и текстом.
- Убедитесь, что в вашем Zero Block кнопка, которую вы привязываете (по полю "Класс кнопки «В корзину»"), содержит внутри себя элемент с классом заданным в генераторе.
- Убедитесь, что элемент, который вы указываете в поле "Класс элемента с остатком", также содержит внутри себя элемент с классом .заданным в генераторе.
- Используйте только один из двух сценариев для кнопки при нулевом остатке: либо оставляйте поле "Ссылка для кнопки нет «Нет в наличии»" пустым (кнопка станет некликабельной), либо заполняйте его (кнопка станет ссылкой).
- Не ставьте вручную ссылки на кнопках в Zero Block, если вы используете поле "Ссылка для кнопки нет «Нет в наличии»" в настройках — скрипт сам задаст нужную ссылку при нулевом остатке.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Заявка на следующий поток
P.S. Внимание, это фейковая кнопка, мы не принимаем заявки на следующий поток
Копируем ID товара
Вставляем ID товара в блок ST200 на странице.
+ нажимаем "Заполнить поля данными товара из каталога и сохранить."
Карточка товара в Zero Block — как связать свой дизайн с магазином Tilda
Стандартная карточка товара в Tilda подходит для обычного каталога, но не всегда вписывается в макет. Иногда нужно собрать карточку в Zero Block: по-своему разместить фото, цену, описание, бейджи, кнопку покупки и блок с остатком.
Модификация NLM213 помогает связать такой кастомный дизайн со стандартным магазином Tilda. Товар остаётся в каталоге и работает через стандартную корзину, а кнопка и остаток выводятся в элементах, которые ты сам собрал в Zero Block.
Модификация NLM213 помогает связать такой кастомный дизайн со стандартным магазином Tilda. Товар остаётся в каталоге и работает через стандартную корзину, а кнопка и остаток выводятся в элементах, которые ты сам собрал в Zero Block.
Как подготовить товар
Сначала собери карточку в Zero Block: добавь кнопку «В корзину», элемент для остатка и всё, что нужно для дизайна товара. Кнопке и элементу с остатком задай CSS-классы через Add CSS Class Name.
Затем добавь на страницу блок ST200 для каждого товара, который нужно связать с карточкой в Zero Block. В настройках ST200 укажи ID нужного товара из каталога Tilda. Если на странице несколько товаров, для каждого понадобится свой ST200 и отдельная строка настроек в генераторе Nolim.
Затем добавь на страницу блок ST200 для каждого товара, который нужно связать с карточкой в Zero Block. В настройках ST200 укажи ID нужного товара из каталога Tilda. Если на странице несколько товаров, для каждого понадобится свой ST200 и отдельная строка настроек в генераторе Nolim.
Что указывается в генераторе
Для каждого товара нужно заполнить ID блока ST200, класс кнопки «В корзину» и класс элемента, где должен отображаться остаток. Внутри элемента с остатком должен быть `.tn-atom`, потому что именно его текст будет меняться скриптом.
Также можно указать текст для нулевого остатка, например «Нет в наличии», и задать прозрачность кнопки в этом состоянии. Значение прозрачности задаётся числом от 0 до 1: например, `0.7` для 70%.
Также можно указать текст для нулевого остатка, например «Нет в наличии», и задать прозрачность кнопки в этом состоянии. Значение прозрачности задаётся числом от 0 до 1: например, `0.7` для 70%.
Что происходит, когда товар закончился
Если остаток товара равен нулю, модификация меняет текст в элементе остатка и меняет состояние кнопки. Можно оставить кнопку некликабельной, чтобы пользователь просто видел, что товар закончился.
Другой вариант — добавить ссылку для состояния «Нет в наличии». Тогда кнопка будет вести на страницу предзаказа, форму, попап Tilda или другой нужный адрес. В этом случае не нужно вручную ставить ссылку на кнопку в Zero Block: модификация сама подставит её при нулевом остатке.
Другой вариант — добавить ссылку для состояния «Нет в наличии». Тогда кнопка будет вести на страницу предзаказа, форму, попап Tilda или другой нужный адрес. В этом случае не нужно вручную ставить ссылку на кнопку в Zero Block: модификация сама подставит её при нулевом остатке.
Где использовать такую карточку
Карточка товара в Zero Block подходит для лендингов с одним продуктом, подборок, промо-страниц, запусков курсов, ограниченных коллекций и товаров, которые нужно показать более выразительно, чем в стандартном каталоге.
Например, можно сделать крупную промо-карточку с описанием, фото, остатком мест или штук и кнопкой покупки. При этом заказ всё равно проходит через стандартную корзину Tilda, а остаток подтягивается из настроек товара.
Например, можно сделать крупную промо-карточку с описанием, фото, остатком мест или штук и кнопкой покупки. При этом заказ всё равно проходит через стандартную корзину Tilda, а остаток подтягивается из настроек товара.
Что проверить после публикации
После настройки скопируй HTML-код из генератора, вставь его в блок T123 и опубликуй страницу. Затем проверь товар в двух состояниях: когда он есть в наличии и когда остаток равен нулю.
Обязательно проверь CSS-классы кнопки и элемента остатка. Если класс указан с ошибкой или элемент не содержит `.tn-atom`, текст остатка не обновится. Если для нулевого остатка задана ссылка, проверь, что кнопка ведёт именно туда, куда нужно: на попап, предзаказ или отдельную страницу.
Обязательно проверь CSS-классы кнопки и элемента остатка. Если класс указан с ошибкой или элемент не содержит `.tn-atom`, текст остатка не обновится. Если для нулевого остатка задана ссылка, проверь, что кнопка ведёт именно туда, куда нужно: на попап, предзаказ или отдельную страницу.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Создай дизайн карточки в Zero Block: фото, название, цена, кнопка «В корзину» — всё с произвольным макетом. Затем через модификацию Nolim подключи кнопку в Zero Block к стандартной системе магазина Tilda. Кнопка станет активной и будет добавлять товар в корзину стандартным образом.
Модификация связывает элемент Zero Block с данными об остатке из стандартного каталога Tilda. Когда остаток изменяется в настройках магазина — кастомная карточка товара Тильда автоматически обновляет отображение. Можно показывать число остатка или просто скрывать/показывать элемент «Осталось X штук».
Модификация автоматически меняет поведение: кнопка становится некликабельной (или исчезает), а текст меняется на «Нет в наличии» или любой другой заданный тобой. Это настраивается в генераторе — задаёшь текст для состояния «в наличии» и «нет в наличии».
Было: стандартные карточки каталога Tilda были одинаковыми для всех товаров — нельзя было выделить бестселлеры или добавить дополнительную информацию.
Стало: через кастомную карточку товара Тильда в Zero Block добавили бейдж «Хит продаж», второе фото при наведении и рейтинг. Конверсия в корзину на выделенных товарах выросла на 28%.
Стало: через кастомную карточку товара Тильда в Zero Block добавили бейдж «Хит продаж», второе фото при наведении и рейтинг. Конверсия в корзину на выделенных товарах выросла на 28%.