Как создать вайб-блок с товарами из Каталога
С помощью вайб-блока можно создать нестандартный блок с товарами и связать с каталогом Тильды. Опишите нужный дизайн в запросе, а затем выведите в блоке товары, цены, изображения и кнопки покупки.
Подключите Каталог и добавьте товары
Перейдите в Настройки сайта и в Подключаемых модулях нажмите на кнопку «Подключить», чтобы активировать «Каталог товаров».
Кнопка «Подключить» в карточке «Каталог товаров» в разделе «Настройки сайта» → «Подключаемые модули».
Добавьте товары в Каталог вручную или с помощью функции импорта товаров.
Каталог товаров интернет-магазина со списком товаров в разделе «Лампы» и кнопкой «+ Добавить».
Добавьте вайб-блок на страницу
Перейдите на страницу, где планируете выводить товары. Добавьте вайб-блок из Библиотеки.
Библиотека блоков: блок VIBE «Вайб-блок» в категории «Другое».
Впишите промпт, какой блок необходимо создать для карточек товаров и укажите, что блок необходимо связать с Каталогом товаров в проекте. Дождитесь создания блока.
Дополнительно в промпт добавьте указание, что товар обязательно должен передаваться в корзину.
Пример промпта:

Создай блок с карточками товаров и свяжи его с каталогом товаров в моем проекте. В карточке есть название товара и цена. В ряду 3 карточки. Внизу блока кнопка «Показать еще», при клике на нее отображаются другие товары из Каталога товаров на Тильде.
Вайб-блок: поле ввода промпта в окне генерации кода блока.
После генерации вайб-блока появится кнопка «Настройки каталога». Нажмите на нее, чтобы выбрать, какой раздел из Каталога необходимо вывести на странице.
Вайб-блок: кнопка «Настройки каталога» над карточкой товара и окно «Выводить товары из каталога».
Добавьте на страницу блок ST100 «Корзина с формой заказа».
Библиотека блоков: категория «Магазин» в боковом меню и добавление блоков корзины ST100 или «Избранное» ST110 на страницу.
Опубликуйте страницу и перейдите на нее, чтобы проверить работу блока. Добавьте товар в корзину.
Карточка товара в каталоге: переключатель количества и кнопка «В корзину». Вверху справа расположена иконка личного кабинета.
Проверьте, что все корректно передается и проведите оплату. Данные о товаре будут переданы в сервисы приема данных также, как и ранее.
Корзина интернет-магазина на опубликованном сайте со списком товаров, расчётом скидки и кнопкой «Оформить заказ».
В промпт также можно добавить описание детального попапа товара. Это можно сделать после генерации основного контента блока: напишите, как должен выглядеть попап и какая информация должна в нем отображаться.

Например, на изображении ниже детальный попап содержит всю доступную информацию о товаре из Каталога, кнопку изменения количества товара и кнопку «Добавить в корзину». Вы можете написать свой промпт и, например, убрать кнопки или изменить состав информации в попапе.
Всплывающее окно карточки товара из Каталога с фотографией, описанием, выбором количества и кнопкой «В корзину».
Из детального попапа товар также корректно передается в корзину для дальнейшей покупки.
Всплывающее окно товара с кнопкой «В корзину» и открытая боковая панель «Ваш заказ» с кнопкой «Оформить заказ».
Если товар не добавился в корзину или данные передались некорректно, например не передался артикул, опишите проблему в промпте в редакторе вайб-блока и попросите AI исправить это поведение.
Назад к разделу
Made on
Tilda