Стандартный каталог в Zero Block Тильды

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

Важно!

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

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

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

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

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

Важно!

• Кнопки должны быть добавлены через элемент button, а не через shape.
• Кнопки не будут работать, если в блоке ST305N для них не указаны названия.
• Если в дизайне нет кнопки «подробнее», но при клике на фото товара должен открываться поп‑ап с деталями, то в настройках блока ST305N для поля «ссылка для карточки товара и первой кнопки» укажи «подробнее о товаре», а у самой кнопки заполни название. Без этого поп‑ап не откроется.
• Если в Zero‑блоке кнопки «подробнее» нет, то на опубликованной странице она тоже не появится.

Класс элемента ты можешь придумать сам или скопировать себе тот, что уже вписан в поле генератора кода. Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «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. «Включить если в каталоге появляется лишний отступ снизу» — данная настройка отключает лишний отступ. Необязательно — включайте только при наличии проблемы с отступом.

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

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

18. «Умещать все изображение в размер шейпа» — включи эту настройку, если изображение товара не помещается целиком в шейп.

19. «Перенести товары 'нет в наличии' в конец списка» — эта настройка перенесёт товары из каталога, которых нет в наличии, в конец в списке товаров. Товары сортируются до нажатия кнопки «загрузить еще». Это внутреннее поведение Тильды, и мы не можем узнать о наличии товаров, пока они не появятся на экране. После нажатия «загрузить еще» товары будут отсортированы заново согласно установленному правилу.

20. «Включить брейкпоинт от 1440px» и «Включить брейкпоинт от 1920px» — включайте, если в зероблоке есть дополнительные брейкпоинты от 1440px и/или 1920px. При включении можно отдельно настроить количество карточек в ряд для экранов от 1440px и от 1920px. Если дополнительных брейкпоинтов нет, эти настройки включать не нужно — будет использоваться верстка от 1200px для всех больших экранов.

Примечания по вёрстке:

• Отступ между карточками зависит от левого отступа от края и ширины самой карточки в зероблоке.
• Если на опубликованной странице видите, что отступы от краёв экрана разные (например, справа меньше, чем слева) или карточки обрезаны, нужно скорректировать вёрстку: уменьшить отступ слева и/или уменьшить ширину карточки.

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

Имей в виду:

• Модификация может работать в связке с NLM171. При использовании в связке с NLM171 в настройках модификации NLM171 необходимо указать id зеро блока с макетом карточки товара, а не id блока с товарами.
• В модификации не предусмотрено добавление кнопок +/- для изменения количества товаров.
• В модификации не предусмотрено добавление опций (цвет, размер, дополнительные характеристики) товара непосредственно на страницу списка товаров.