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

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

Важно! При подключении данной модификации карточки товаров «растягиваются» по сетке в 12ть колонок, если в генераторе кода выбрать вариант отображения трех карточек в ряд, то их ширина увеличится, пожалуйста, учитывайте это для того, чтобы получить ожидаемый результат. Стандартное расстояние между карточками 40px в десктопной версии и 20px в адаптивах, рекомендуем делать отступ от левого края 20px в десктопной версии и 10px в адаптивах. Рекомендуемая ширина карточек в десткопной версии: 560px для 2 карточек в ряд, 360px для 3 карточек в ряд, 260px для 4 карточек в ряд, 200px для 5 карточек в ряд.

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

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

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

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

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

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

Важно! Кнопки должны быть добавлены через элемент button, а не через shape.

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

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

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

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

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

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

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

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

7. Настройки описания, заполняются по аналогии с элементом заголовка.
Важно: если хочешь добавить прокрутку для текста, тогда в зеро блоке для текстового элемента с описанием измени настройку FIT на Fixed Size. Где найти: Редактировать блок → Element Settings → Fit

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

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

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

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

10. Настройки меток
Можешь добавить свои метки, условные обозначения, иконки ля товаров. Вставь галерею GL12 и загрузи свои иконки в нее, удалив все стандартные фотки из нее, просто чтоб не мешали.

Далее заполни поля в генераторе:

• Варианты использования меток — выбери вариант с указанием классов либо без;
• При выборе варианта без указания классов в генераторе укажи нужные настройки для Планшета и ПК: отступы от краёв, направление, ширина, высота, отступы между иконками, позиция иконок;
• То же самое можешь проделать для мобильной версии;
• Напиши название иконки и вставь ссылку;
• Нажимая на кнопку «+ Добавить метку» появится еще поля для новой иконки;
• При выборе варианта с указанием классов заполни поля: Класс метки, Название иконки, Ссылка на изображение. Для названия иконок рекомендуется использовать только буквы латинского алфавита, без специальных символов и пробелов. В зероблоке добавь шейп, удалив у него цвет. Убедись, что добавленный шейп имеет тот же класс, который указан в генераторе. Рекомендуем использовать одинаковые значения для класса и названия метки. Важно: количество прозрачных шейпов в зероблоке должно соответствовать количеству меток, указанных в генераторе. Если ты добавил 5 меток в генераторе, то добавь 5 прозрачных шейпов в зероблоке.
• При наведении на иконку показывать имя метки — включи эту настройку, если при наведении на иконку нужно показывать имя метки;
• Включить одинаковые отступы слева/справа, для ситуаций, когда происходит перенос меток — включи эту настройку, чтобы обеспечить одинаковые отступы слева и справа при переносе меток;
• В каталоге открой товар, в котором нужно указать иконки, в поле «ОТМЕТКА НА КАРТОЧКЕ (НАПРИМЕР: SALE, NEW, -30%)» напиши название иконки через запятую. Перед запятой и после не должно быть пробела, пример: «Острое, Скидка, Новинка» и сохрани изменения.

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

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

12. Настройки прелоадера (прелоадер покажет пользователю процесс загрузки данных на сайте и сделает ожидание более комфортным)

• «Укажите цвет лоадера» — цвет элемента лоадера (круг);
• «Укажите цвет фона лоадера» — цвет фона прелоадера;

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

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

15. «Отображать фильтры и категории из стандартого блока» — данная настройка включит фильтры и категории из стандартного блока ST305N. Важно разместить блок ST305N выше зероблока с дизайн-макетом карточки.

16. «Применять автоскейл для фильтров и категорий» — данная настройка включит австоскейл для фильтров.

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

Имей в виду:
Модификация может работать в связке с NLM171. При использовании в связке с NLM171 в настройках модификации NLM171 необходимо указать id зеро блока с макетом карточки товара, а не id блока с товарами.