10 мин

Магазин

Hard

5

Установить бесплатно

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

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

(cвернуть)

Инструкция

Важно - Теперь если не хочешь нумеровать все классы по типу vcatname1 vcatname2 и тд, то просто объедини их в зеро группу, сделай её тип - object(beta), задай класс vzerocard и выбери чекбокс "Режим без нумерации..."

Обновление от 09.12.24 - В каталоге была изменена необходимость задавать количество карточек в зероблоках! Теперь для удобства ты можешь задавать их в отдельном поле в формате 480:3,960:6 (где для 0-480px - 3 карточки, 480-960px - 6)

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

vcatname1

vcatprice1

vcatold1

vcatimg1

vcatdesc1

vcatbg1

vcatmarktext1

vcatmarkbg1

vcatbuy1

vcatmore1

vcatquant1

vcatvar1

vcatchar1

vcatsku1

vcatstock1

vcatfav1

vcatsection

vcatsectionact

vfilter

vfilteract

vclear

vsearch

vsearchbtn

vpricemax

vpricemin

vsort

vcatpagprev

vcatpagnext

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

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

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

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

Для разделов

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

Для фильтров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- Тильда вносила изменения в свой код и теперь возможность переключать варианты товара элементами vcatvar доступна только в режиме с опорой на группы

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

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

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

Важно!

undefined

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

Загрузить сохраненные значения

undefined

Фильтры

undefined

[{"lid":"1735232299807","ls":"10","loff":"","li_parent_id":"","li_type":"cb","li_label":"\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u044b","li_name":"filton","li_nm":"filton"},{"lid":"1735232299808","ls":"20","loff":"","li_parent_id":"","li_type":"cb","li_label":"\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a","li_name":"charcon","li_nm":"charcon"},{"lid":"1735232299809","ls":"30","loff":"","li_parent_id":"","li_type":"cb","li_label":"\u0412\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u0441 \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438","li_name":"charcnames","li_nm":"charcnames"},{"lid":"1735232299810","ls":"40","loff":"","li_parent_id":"","li_type":"cb","li_label":"\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u043f\u043e \u043a\u0440\u0430\u044f\u043c \u0442\u0435\u043a\u0441\u0442\u0430","li_name":"charcalign","li_nm":"charcalign"},{"lid":"1735232299811","ls":"50","loff":"","li_parent_id":"","li_type":"cb","li_label":"\u0418\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u0437\u0435\u0440\u043e \u043f\u043e \u0447\u0438\u0441\u043b\u0443 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a","li_name":"autoheighton","li_nm":"autoheighton"},{"lid":"1740987173225","ls":"60","loff":"","li_parent_id":"","li_type":"in","li_ph":"\u0422\u043e\u0432\u0430\u0440\u043e\u0432 \u0441 \u0442\u0430\u043a\u0438\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e, \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e","li_subtitle":"\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0435\u0441\u043b\u0438 \u0442\u043e\u0432\u0430\u0440\u043e\u0432 \u043f\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e","li_name":"noitemsmessage","li_nm":"noitemsmessage"}]