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