КАК СДЕЛАТЬ стандартный каталог товаров в зеро блоке?

Прежде чем приступить к настройке данной модификации необходимо в первую очередь добавить товары, которые планируешь отобразить в данном блоке, в каталог Тильды. Далее в Зеро блоке сверстай ваш дизайн-макет карточки. Учитывая сетку расположения карточек товаров в блоке: от 1 до 4 в ряд, на выбор.

Важно! При подключении данной модификации карточки товаров «растягиваются» по сетке в 12ть колонок, если в генераторе кода выбрать вариант отображения трех карточек в ряд, то их ширина увеличится, пожалуйста, учитывайте это для того, чтобы получить ожидаемый результат.

Для работы кнопок «Добавить в корзину» и «Подробнее о товаре» в контенте блока ST305N нужно заполнить поля «название кнопки для карточки товара», «ссылка для карточки товара и первой кнопки», «название второй кнопки для карточки товара», «ссылка второй кнопки».

Для того чтобы отображались разделы и фильтры из стандартного блока нужно разместить блок ST305N выше зероблока с дизайн-макетом карточки.

1. Далее в генераторе заполняешь следующие поля:

• «id блока» – указываешь іd блока в котором находится дизайн-макет карточки;
• «id блока ST305N» – указываешь і блока, где находятся уже настроенные товары из каталога;

2. Настройки кнопки

• «Класс для кнопки «Добавить в корзину» – в Зеро блоке, добавь класс к элементу, при нажатии на который товар будет попадать в корзину;
• «Класс для кнопки «Подробнее о товаре» – класс элемента, при нажатии на который, будет открываться карточка товара;

Класс элемента ты можешь придумать сам или скопировать себе тот, что уже вписан в поле генератора кода. Чтобы указать класс у элемента,
нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Acc CSS Class Nome», долее, справа в настройках указываешь тот же класс, что и в генераторе.

3. Настройки шейпа
•«Класс шейпа» – для того, чтобы была возможность для каждого товара подгружать разные изображения, в Зеро блоке необходимо добавить шейп который будет отвечать за изображения, привяжи к нему класс и укажи в генераторе;

4. Настройки избранного

• «Класс добавить в избранное» – указываешь класс элемента при нажатии на который товар будет попадать в избранное;
• «Класс убрать из избранного» – класс элемента при нажатии на который товар будет удаляться из избранного;

5. Настройка цена

• «Класс цены» – указываешь класс элемента в котором будет отображаться стоимость товара;
• «Класс старой цены» – класс элемента в котором будет отображаться старая стоимость товара;

6. Настройки заголовка

• «Класс заголовка» – указываешь класс элемента в котором будет находиться заголовок товаров;
• «Переполнение блока заголовка» – выбираешь подходящий вариант того, что будет происходить с заголовком в случае если он будет очень длинный;
• «Высота блока заголовка» – та величина после которой будет применяться предыдущий критерий;

7. Настройки описания, заполняются по аналогии с элементом заголовка.

8. Настройки остатка
• «Класс остатка» – элемент в котором будет отображаться остаток товара;

• «Текст до цифры остатка» – если необходимо, можно указать текст, который будет располагаться перед цифрой остатка, если по твоей задумке это не требуется, то оставь это поле пустым;
• «Текст после цифры остатка» – текст, который будет прописан после указанного остатка;

9. Настройки кнопки «нет в наличии»

• «Применять настройки ссылок для кнопки нет в наличии» – эта настройка отвечает за то, чтобы «включить» ссылку на кнопке, которая открывает, например, попап для заявки.
• «Текст кнопки когда товара нет в наличии»;
• «Цвет кнопки когда товара нет в наличии» – при указании данного параметра меняется цвет кнопки у товара, которого нет в наличии. Обрати внимание, что в случае если в Зеро блоке ты предварительно настроишь изменение цвета текста у кнопки при наведении, то этот эффект будет сохраняться. То есть, нужно учитывать цвет текста кнопки при наведении;
• «Имя скрытого поля» — скрытое поле добавляем в форму и указываем такое же название, как и в генераторе, в него будут подгружаться все характеристики товара, о котором клиент хочет узнать(В формате название товара;артикул;значение;значение;значение...). Т.е. когда будет падать уведомление, то будет видно о каком товаре идет речь;
• «Ссылка для названия товара» — Ссылку для имени продукта указываем к примеру в заголовке формы и клиент заполняя форму будет видеть о каком товаре идет речь;

10. Настройки количества отображения карточек в ряд

• Выбери необходимое количество карточек товара для каждого из разрешений.

11. «Не ставить ссылку для изображения в шейпе» – эта настройка выключит «ссылку» на карточку товара, которая обычно задана при клике на фото товара;

12. «Включить если в блоке есть автоскейл» – данная настройка включается в случае если в блоке включен автоскейл;

13. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.