Вы никогда не хотели сделать меню с табами самостоятельно? Именно в том стиле, в котором нужно именно вам, а не в том, который предлагают стандартные блоки Тильды «ME602: Вкладки с цветом фона» и «ME603: Вкладки с обводкой снизу». А ещё не ограничивать себя 8 вкладками. Или сколько там сейчас у Тильды? Раньше вообще было 5. Создавайте хоть 100 вкладок!

Посмотрите пример, чтобы убедиться, что это возможно, проверить, как это работает, а затем возвращайтесь и настраивайте модификацию под себя.

Инструкция:

1. Создайте Zero-блок с кнопками в качестве вкладок.
2. Задайте всем кнопкам один и тот же класс (например, tab).
3. Задайте каждой кнопке собственную ссылку с одинаковым началом, но разными числами после (например, #tab1, #tab2, #tab3 и т. д.).
4. Настройте в форме ниже дизайн активной вкладки.
5. Напишите номер активной вкладки. Если нужно все скрыть и не выбирать активную, напишите «0» (ноль).
6. Пропишите ID скрываемых блоков через запятую или задайте всем группам блоков одинаковые классы (например, для первой группы — .uc-hide-tab1, для второй группы — .uc-hide-tab2 и т. д.). Таким образом таб № 1 при нажатии покажет прописанные напротив него ID или классы (например, .uc-hide-tab1, если вы прописали его), таб № 2 покажет прописанные ему (тот же .uc-hide-tab2) и так далее.
7. Вставьте соответствующую информацию в форму ниже.
8. Скопируйте полученный код и поместите его в блок T123. Сам блок разместите под всеми задействованными в модификации блоками (а лучше вообще в самом низу).

Каждый разработчик сайтов на Тильде однажды сталкивается с вопросом: «А как мне сделать хлебные крошки для товаров? Неужели придётся делать под каждый товар отдельную страницу?»

Не придётся. С этой модификацией вы сможете сделать автоматические хлебные крошки в товаре и на странице со всеми товарами, если выбрана какая-то конкретная категория. А что самое интересное — вы можете сделать подкатегории.

Каждый разработчик сайтов на Тильде однажды сталкивается с вопросом: «А как мне сделать хлебные крошки для товаров? Неужели придётся делать под каждый товар отдельную страницу?»

Не придётся. С этой модификацией вы сможете сделать автоматические хлебные крошки в товаре и на странице со всеми товарами, если выбрана какая-то конкретная категория. А что самое интересное — вы можете сделать подкатегории.

Инструкция непростая, поэтому поделена на 3 шага:

1. Сбор всех категорий
2. Создание хлебных крошек для товара
3. Создание хлебных крошек для страницы каталога

Рекомендуем просмотреть видео, в котором подробно рассказывается, как правильно создать хлебные крошки.

Шаг №1: Сбор всех категорий

Для начала вам необходимо собрать все категории в массив. Не переживайте, это просто.

1. Создайте новую страницу (в последствии она станет хэдером для товаров).
2. Создайте ещё одну страницу для каталога товаров (или перейдите на существующую). Добавьте туда блок ST320N, зайдите в «Контент» и в параметре «Выводить товары из каталога» выберите «Все товары из каталога».
3. Перейдите в каталог товаров и пропишите все категории.
4. Для каждого товара пропишите категории. Если по вашей задумки у товара должны быть категория и подкатегория (-и), то добавьте в товар их все.
5. Откройте настройки каталога и выберите созданную в п. 1 страницу в качестве хэдера. Не забудьте поставить галочку «Открывать страницу вместо попапа».
6. Вернитесь на созданную страницу с каталогом товаров, опубликуйте и перейдите на неё, дождитесь полной загрузки товаров.
7. Откройте консоль разработчика (как это сделать?), пропишите ниже ссылку на открытую страницу и вставьте скрипт, представленный ниже, и нажмите клавишу Enter.

После того, как вы всё это проделаете, к вам в буфер обмена скопируется массив всех существующих категорий товаров. Он будет выглядеть примерно так:
[ { "id": "553805324601", "name": "Все", "link": "http://necodim.ru/" }, { "id": "505348925141", "name": "Одежда", "link": "http://necodim.ru/?tfc_storepartuid%5B592653248%5D=%D0%9E%D0%B4%D0%B5%D0%B6%D0%B4%D0%B0&tfc_div=:::" }, { "id": "369752901891", "name": "Обувь", "link": "http://necodim.ru/?tfc_storepartuid%5B592653248%5D=%D0%9E%D0%B1%D1%83%D0%B2%D1%8C&tfc_div=:::" } ]

Здесь вы видите массив из трёх объектов, которые содержат параметры id, name, link. У вас их может быть гораздо больше (количество объектов зависит от числа ваших категорий).

Вставьте текст из буфера обмена в любой текстовый редактор, чтобы не потерять. Там же замените в 4 строке слово «Все» на слово или выражение, которое хотите видеть в хлебных крошках для перехода к странице с каталогом всех товаров (например «Все товары». Это же слово / выражение нужно будет использовать в формах ниже. Это важно, иначе модификация не будет работать.

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

Кстати, блок ST320N теперь можно заменить каким-то другим для отображения всех товаров.
Шаг №2: Создание хлебных крошек для товара
Дальше всё немного проще:

1. В форме ниже выберите, хотите ли вы отображать ссылку на главную страницу сайта, все категории или только основную и ссылку на текущий товар.
2. Введите слово / выражение для пункта «Все», которое использовали в первом шаге.
3. Введите символ для разделителя хлебных крошек (например, стрелочку или косую черту).
4. Выберите цвет хлебных крошек и расстояние от разделителя до ссылки.
5. Снова скопируйте из текстового редактора массив и вставьте в форму.
6. Скопируйте полученный код и вставьте его в блок T123 на странице хэдера товара (вы её создали в п. 1 предыдущего шага).
7. Не забудьте в настройках блока с кодом выбрать ширину блока (100% или 12 колонок), цвет фона и отступы сверху / снизу.
8. Опубликуйте страницу со всеми товарами, чтобы увидеть изменения.

Шаг №3: Создание хлебных крошек для страницы каталога
Последний шаг самый простой, т.к. практически полностью повторяет предыдущий, а нужен и вовсе только тем, кто хочет отображать хлебные крошки на странице каталога со всеми товарами (созданной на первом шаге в п. 2).

Будьте внимательны, изменения полей в этой форме приведут к изменению данных в коде выше. Если вы ещё его не скопировали и не вставили на страницу, сделайте это. Если не хотите менять никакие данные, сразу переходите к пункту 5.

А теперь приступим:

1. В форме ниже выберите, хотите ли вы отображать ссылку на главную страницу сайта.
2. Введите слово / выражение для пункта «Все», которое использовали в первом шаге.
3. Введите символ для разделителя хлебных крошек (например, стрелочку или косую черту).
4. Выберите цвет хлебных крошек и расстояние от разделителя до ссылки.
5. Снова скопируйте из текстового редактора массив и вставьте в форму.
6. Скопируйте полученный код и вставьте его в блок T123 на странице с каталогом всех товаров (вы её создали в п. 2 шага № 1) над самим каталогом.
7. Не забудьте в настройках блока с кодом выбрать ширину блока (100% или 12 колонок), цвет фона и отступы сверху / снизу.
8. Опубликуйте страницу со всеми товарами, чтобы увидеть изменения.

Теперь при выборе какой-либо категории на странице со всеми товарами хлебные крошки будут также меняться.

Иногда владельцы магазинов на Tilda хотят убрать из каталога сортировку. Или вообще хочется убрать сортировку, но оставить поиск. Не проблема!

Посмотреть, как работает модификация можно тут.

Просто выберите, что именно вы хотите скрыть в форме ниже, скопируйте полученный код и вставьте его в блок T123. Сам блок разместите на странице с каталогом или в хэдере сайта, если хотите, чтобы код работал для всех страниц с каталогами.

P.S. Если убираете сортировку «по-умолчанию», не забудьте в настройках каталога в меню «Фильтры и разделы» выбрать другую сортировку по-умолчанию.

Нашел для вас на просторах интернета замечательный эффект «Hyperspace» от Maurice Melchers.
Создать эффектную космическую кнопку очень просто:

1. Добавляете Zero-блок
2. В него вставляете html-элемент
3. Внутрь вставляете следующий код ↓
4. Меняете в конце второй строки ссылку на свою.