Как сделать любой каталог в зероблоке?

10 мин.

Магазин

JavaScript

1. Создай на странице зероблок \ зероблоки данные в которых тебе нужно связывать с каталогом и задай ему\им любой класс в настройках зеро (он должен начинаться с "uc-")

2. Укажи заданный тобой класс в генераторе

3. Перейди в каталог с твоими товарами (https://store.tilda.ru/store/) и выбери нужный тебе раздел каталога, из которого будем загружать информацию

4. Когда выберешь нужный тебе раздел, у тебя в адресной строке изменится ссылка на по типу вот такой

Инструкция

Важно!

- Если у тебя более чем один зероблок для синхронизации с каталогом, то не включай пункт "изменять высоту по числу видемых карточек"! Она не сможет обработать сразу все блоки
Если тебе нужно изменять зероо по количеству карточек, то обязательно делай для них фоны-подложки (с классами vcatbg1, 2 и тд), т.к. именно по их высоте ориентируется код
- Если тебе нужно добавление в избранное, то обязательно создавай кнопку покупки, даже если она тебе не нужна (можешь просто сделать её прозрачной и вынести за пределы видимости в зероблоке)

(Развернуть)

5. Далее в своих зероблоках\зероблоке создай элементы, которые мы будем синхронизировать и задай им соответствующие классы :

https://store.tilda.ru/store/?projectid=1234567&storepartuid=098765432112

Из неё нам нужно скопировать цифры после слов storepartuid и вставить в генераторе в поле "раздел каталога для связи с зеро". Т.е. в этом примере это 098765432112

Если тебе нужен раздел "Все", то сделай следующее:

Цифра в конце это порядковый номер товара. Т.е. vcatname1 - первый товар, vcatname2 - второй и тд

Если нужно выводить также характеристики товара, то включи в генераторе соответствующий чекбокс и задай текстам для вывода в них характеристик классы:

Если тебе нужны кнопки добавления товаров в избранное, то создай для них шейпы и задай для них классы:

Можешь сразу в них загрузить картинку неактивной кнопки избранного. Активную кнопку избранного просто загрузи в отдельный шейп, убери его за пределы видимости в зероблоке и скопируй ссылку на картинку из этого шейпа через ПКМ и Copy Image URL

Полученную ссылку вставь в генератор

7. Если тебе нужна пагинация чтобы листать твой каталог страничками, то включи её в генераторе и сделай следующее:

6. Если тебе нужна фильтрация как в стандартном блоке ST320N, то включи в генераторе фильтры и задай элементам в зеро соответствующие классы:

Обрати внимание, что в фильтрах (в отличии от остальных элементов разобранных выше) цифра в конце класса не ставится!

Также для разделов пропиши название в элемент самостоятельно и задай ему ссылку якорную ссылку с названием раздела. Например есть раздел Оправы, значит ссылка должна быть #Оправы
Для раздела Все задай пустую якорную ссылку - #

Для фильтров также как и для разделов пропиши название в элемент самостоятельно и задай ему ссылку якорную ссылку с названием фильтра. Например есть фильтр Женские, значит ссылка должна быть #Женские

Для удобства ты также можешь делать фильтры в виде выпадающих списков. Для этого просто сделай форму с типом dropdown и твоими фильтрами внутри и задай ей класс vfilter

Тексты для dropdown поля формы сортировки можешь писать с любой формулировкой, но работать они будут в таком же порядке как в стандартном блоке

8. Если у тебя один зеро для синхронизации и есть фильтры. То по желанию можешь включить "изменять высоту по числу видимых карточек" в генераторе. Тогда при переключении фильтров высота твоего зеро подстроится под карточки по их фонам с классами vcatbg. Под этот блок можешь поместить зеро с пагинацией, чтобы он всегда был снизу и двигался при изменении высоты каталога

9. Скопируй полученный в генераторе код и вставь его в блок т123 после всех твоих синхронизируемых зероблоков

10. Если тебе нужно открывать какой-то раздел или применять какой-то фильтр по ссылке, то пиши его в ссылку добавив знак вопроса и указывая класс элемента и его значение. Например:

https://example.com/shop?vsearch=oval

С самого начала напишет в поиск слово oval

https://example.com/shop?vcatsection=Распродажа

С самого начала включит раздел распродажа

Если тебе не нужен какой-то из разделов сортировки, то просто напиши вместо его текста слово "скрыть" вот так и тогда он у тебя будет исключен кодом из сортировки

Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности

Не хватает какой-то функции?