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

Этот скрипт позволит тебе синхронизировать всё что угодно с каталогом на Тильде, сделать любой каталог, галереи для карточек и тд. Пример работы модификации внизу cтраницы

Видео-инструкция

Обновление от 02.10.24 - В каталоге была убрана необходимость задавать количество карточек в зероблоках! На мобильном ставь карточки по порядку, а лишние убери за пределы видимости (они сами это поймут и не будут учитываться)

10 мин.

!

Видео-инструкция

Магазин

JavaScript

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

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

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

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

Инструкция

Важно!

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

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

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

undefined

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

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

undefined

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

Кликни правой кнопкой мыши на "Все" и выбери "Исследовать" или "Посмотреть код" (в зависимости от браузера вместо исследовать может быть другое название)

undefined

Цифры которые нужно скопировать будут у тебя в открывшемся окошке над выделенной строчкой

undefined

Для названий товаров

Скопировать

vcatname1

Для цен товаров

Скопировать

vcatprice1

Для шейпов для фото товаров или для галереи для фото товара

Скопировать

vcatimg1

Для описания товара

Скопировать

vcatdesc1

Для фона карточек

Скопировать

vcatbg1

Для старых (до скидки) цен товаров

Скопировать

vcatold1

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

Для характеристик товара

Скопировать

vcatchar1

Для артикула товара

Скопировать

vcatsku1

Для количества товара в наличии

Скопировать

vcatstock1

Для текста отметки товара

Скопировать

vcatmarktext1

Для фона отметки товара

Скопировать

vcatmarkbg1

Для кнопки покупки товара

Скопировать

vcatbuy1

Для кнопки "подробнее" товара

Скопировать

vcatmore1

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

undefined

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

Скопировать

vcatfav1

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

undefined

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

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

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

Для разделов

Скопировать

vcatsection

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

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

undefined

Чтобы сделать дизайн активной кнопки раздела, просто задизайни его в зеро и вместо обычного класса разделов задай кнопке класс

Скопировать

vcatsectionact

Для фильтров

Скопировать

vfilter

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

undefined

Чтобы сделать дизайн активной кнопки фильтра, просто задизайни его в зеро и вместо обычного класса фильтров задай кнопке класс

Скопировать

vfilteract

Для кнопки отчистки всех фильтров

Скопировать

vclear

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

undefined

Для поля поиска по каталогу сделай форму с one line input field и задай ей класс

Скопировать

vsearch

Для кнопки поля поиска по каталогу задай класс

Скопировать

vsearchbtn

undefined

Перейди в Разделы каталога

undefined

Для максимального ограничения по цене сделай форму с one line input field и задай ей класс

Скопировать

vpricemax

undefined

Для минимального ограничения по цене сделай форму с one line input field и задай ей класс

Скопировать

vpricemin

undefined

Для сортировки поиска по каталогу сделай форму с dropdown напиши туда нужные тебе тексты для сортировки

Скопировать

vsort

undefined

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

undefined

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

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

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

Шейп для стрелки назад и задай ему класс

Скопировать

vcatpagprev

Шейп для стрелки вперед и задай ему класс

Скопировать

vcatpagnext

Html-элемент в котором будут странички => Нажми EDIT CODE => внутрь вставь

Скопировать

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

undefined

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

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

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

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

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

undefined

Если нужно сделать кнопки + - для добавления за раз большого количества товара, то создай форму, задай ей вот такой класс и добавь в неё поле quantity (plus minus buttons)

Скопировать

vcatquant1

undefined

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

Скопировать

vvar1

undefined

Отчистить поля

undefined

(Фильтры)

(Избранное)

(Пагинация)

(Кнопка "Нет в наличии")

Скопировать код

Этот мод доступен в PRO тарифе

0

349

₽

Voron Free

Voron Pro

всего за

/ 1 мес.

Доступ ко всем модификациям библиотеки

Просмотр используемых блоков и их настроек для любого сайта, сделанного на Tilda, в том числе step-by-step анимаций

Полный доступ ко всем функциям расширения для Тильды

Регулярные обновления модификаций и новые модификации включены в стоимость

Техническая поддержка в Telegram

Никаких автоплатежей

Только базовые функции

349 ₽

Доступ к 11 бесплатным модификациям

Бесплатный функционал расширения для Тильды

Темная тема для Tilda Publishing

Отображение всех используемых блоков в боковом меню

Установить расширение

Открыть доступ

После создания они будут работать даже если PRO доступ закончится

Ниже сделал лишь часть из того, что может сделать этот мод, т.к. каталог на своём сайте я уже использую под главную страницу + корзину тоже. Поэтому полный обзор всего сделал в видеоинструкции

Пример работы модификации

Отчистить фильтры

Поиск

Name

Buy

About

Desc

Buy