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

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

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

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

10 мин.

!

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

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

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

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

4. Когда выберешь нужный тебе раздел, у тебя в адресной строке изменится ссылка на по типу вот такой
Инструкция
Важно!
- Если у тебя более чем один зероблок для синхронизации с каталогом, то не включай пункт "изменять высоту по числу видемых карточек"! Она не сможет обработать сразу все блоки
Если тебе нужно изменять зероо по количеству карточек, то обязательно делай для них фоны-подложки (с классами vcatbg1, 2 и тд), т.к. именно по их высоте ориентируется код
- Если тебе нужно добавление в избранное, то обязательно создавай кнопку покупки, даже если она тебе не нужна (можешь просто сделать её прозрачной и вынести за пределы видимости в зероблоке)
(Развернуть)
5. Далее в своих зероблоках\зероблоке создай элементы, которые мы будем синхронизировать и задай им соответствующие классы :
undefined
undefined
undefined
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
  • Перейди в Разделы каталога
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 => внутрь вставь
Скопировать
<div class="vcatpagination"></div>
  • Создай отдельный зероблок для пагинации и задай ему любой класс в настройках зеро (он должен начинаться с "uc-") и укажи этот класс в генераторе
undefined
undefined
https://example.com/shop?vsearch=oval
С самого начала напишет в поиск слово oval
https://example.com/shop?vcatsection=Распродажа
С самого начала включит раздел распродажа
Если тебе не нужен какой-то из разделов сортировки, то просто напиши вместо его текста слово "скрыть" вот так и тогда он у тебя будет исключен кодом из сортировки
undefined
  • Если нужно сделать кнопки + - для добавления за раз большого количества товара, то создай форму, задай ей вот такой класс и добавь в неё поле quantity (plus minus buttons)
Скопировать
vcatquant1
undefined
undefined
  • Если нужно сделать кнопки переключения вариантов товара (размер, цвет и тд), то отметь в генераторе "включить фильтры", создай по форме в каждую из твоих карточек на максимально возможное среди всех твоих товаров количество таких переключателей. Т.е. если где-то есть и цвет и размер, а где-то только цвет, то всё-равно создавай везде по 2 формы. Задай формам вот такой класс и если тебе нужно синхронизировать название характеристики, то напиши любой текст в input title
Скопировать
vvar1
undefined
undefined
Отчистить поля
undefined
(Фильтры)
(Избранное)
(Пагинация)
(Кнопка "Нет в наличии")
Скопировать код
Этот мод доступен в PRO тарифе
0
349
Voron Free
Voron Pro
всего за
/ 1 мес.
Доступ ко всем модификациям библиотеки
Просмотр используемых блоков и их настроек для любого сайта, сделанного на Tilda, в том числе step-by-step анимаций
Полный доступ ко всем функциям расширения для Тильды
Регулярные обновления модификаций и новые модификации включены в стоимость
Техническая поддержка в Telegram
Никаких автоплатежей
Только базовые функции
349 ₽
Доступ к 11 бесплатным модификациям
Бесплатный функционал расширения для Тильды
Темная тема для Tilda Publishing
Отображение всех используемых блоков в боковом меню
После создания они будут работать даже если PRO доступ закончится
 
123
Ниже сделал лишь часть из того, что может сделать этот мод, т.к. каталог на своём сайте я уже использую под главную страницу + корзину тоже. Поэтому полный обзор всего сделал в видеоинструкции
Пример работы модификации
Name
Name
Buy
About
Desc
Desc
Buy
About
Name
Desc
Buy
About
Name
Buy
About
Desc
Wow
Wow
Wow
Wow
Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности

Опиши нужный функционал через эту форму и он будет добавлен!

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