Этот скрипт позволит тебе синхронизировать всё что угодно с каталогом на Тильде, сделать любой каталог, галереи для карточек и тд. Пример работы модификации внизу cтраницы
Обновление от 02.10.24 - В каталоге была убрана необходимость задавать количество карточек в зероблоках! На мобильном ставь карточки по порядку, а лишние убери за пределы видимости (они сами это поймут и не будут учитываться)
1. Создай на странице зероблок \ зероблоки данные в которых тебе нужно связывать с каталогом и задай ему\им любой класс в настройках зеро (он должен начинаться с "uc-")
2. Укажи заданный тобой класс в генераторе
3. Перейди в каталог с твоими товарами (https://store.tilda.ru/store/) и выбери нужный тебе раздел каталога, из которого будем загружать информацию
4. Когда выберешь нужный тебе раздел, у тебя в адресной строке изменится ссылка на по типу вот такой
Инструкция
Важно!
- Если у тебя более чем один зероблок для синхронизации с каталогом, то не включай пункт "изменять высоту по числу видемых карточек"! Она не сможет обработать сразу все блоки Если тебе нужно изменять зероо по количеству карточек, то обязательно делай для них фоны-подложки (с классами vcatbg1, 2 и тд), т.к. именно по их высоте ориентируется код - Если тебе нужно добавление в избранное, то обязательно создавай кнопку покупки, даже если она тебе не нужна (можешь просто сделать её прозрачной и вынести за пределы видимости в зероблоке)
(Развернуть)
5. Далее в своих зероблоках\зероблоке создай элементы, которые мы будем синхронизировать и задай им соответствующие классы :
Из неё нам нужно скопировать цифры после слов 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 анимаций
После создания они будут работать даже если PRO доступ закончится
123
Ниже сделал лишь часть из того, что может сделать этот мод, т.к. каталог на своём сайте я уже использую под главную страницу + корзину тоже. Поэтому полный обзор всего сделал в видеоинструкции