Модификации каталога товаров (категории, фильтры и поиск) на Тильде
Это сборник кода, модифицирующего каталог товаров (ST300, ST305N, ST310N, ST315N, ST320N, ST330), а именно: категории, фильтры и поиск на Тильде.
Любой код размещаем в t123 выше блока с каталогом, чтобы не было мерцания стилей.
Любой код размещаем в t123 выше блока с каталогом, чтобы не было мерцания стилей.
Категории каталога товаров в виде табов на Тильде
Код выделяет категории товаров, чтобы они были более заметны. В итоге категории товаров на Тильде образуют табы.
Данная модификация работает с блоками: ST300, ST305N, ST310N, ST315N, ST320N, ST330.
Данная модификация работает с блоками: ST300, ST305N, ST310N, ST315N, ST320N, ST330.
<style>
/* Стили для переключателя категорий каталога */
.js-store-parts-switcher {
background-color: #f0f0f0; /* Цвет фона */
line-height: 60px; /* Высота строки для вертикального выравнивания текста */
padding-left: 22px; /* Отступ слева */
padding-right: 22px; /* Отступ справа */
border-radius: 10px; /* Скругление углов */
margin-right: 10px; /* Отступ справа */
margin-left: 0px; /* Отступ слева */
border: 0px solid #074600; /* Обводка */
font-weight: 700 !important; /* Жирное начертание шрифта */
font-size: 16px !important; /* Размер шрифта */
height: 60px !important; /* Высота элемента */
vertical-align: middle !important;
box-sizing: content-box !important;
}
/* Стили для контейнера со всеми категориями */
.t-store__parts-switch-wrapper {
text-align: center; /* Выравнивание табов по центру экрана (доступны настройки: left, right) */
margin-bottom: 30px!important; /* Отступ снизу */
margin-left: 0px!important; /* Отступ слева */
margin-right: 0px!important; /* Отступ справа */
}
/* Стили для активной кнопки категории */
.t-store__parts-switch-btn.t-active {
opacity: 1; /* Полная непрозрачность */
background-color: #074600 !important; /* Цвет фона активной кнопки */
color: #ffffff !important; /* Цвет текста на активной кнопке */
border: 3px solid #074600 !important; /* Толщина и цвет рамки */
}
/* Стили для категории при наведении */
.t-store__parts-switch-btn:hover {
transition: 300ms !important; /* Плавный переход для изменений (доступны настройки: в ms - меняйте цифру */
background-color: #ffffff !important; /* Цвет фона при наведении */
color: #074600 !important; /* Цвет текста при наведении */
border: 3px solid #074600 !important; /* Цвет и толщина границы при наведении */
}
</style>Идея модификации - Vladislav Land
Раскрытые фильтры и поиск в каталоге товаров на Тильде на мобильных устройствах
Код делает раскрытыми фильтры и поле поиска в каталоге товаров на Тильде на мобильной версии сайта.
<style>
@media screen and (max-width: 960px) {
/* Стили для отображения фильтров и поиска на мобильных устройствах */
.t-store__filter__options,
.t-store__filter__search-and-sort,
.t-store__filter__sort {
display: block; /* Отображение в виде блоков */
}
/* Скрытие кнопки фильтров для мобильных */
.t-store__filter__opts-mob-btn {
display: none; /* Скрытие кнопки */
}
/* Скрытие кнопки поиска для мобильных */
.t-store__filter__search-mob-btn {
display: none; /* Скрытие кнопки */
}
}
</style>Большое поле поиска в каталоге товаров Тильда на мобилке и компе
Нормальное и заметное поля поиска.
Данный код увеличивает размер поля поиска товаров в стандартном каталоге на Тильде и добавляет свой цвет, закругление поля поиска, размер шрифта и т.д.
Данный код увеличивает размер поля поиска товаров в стандартном каталоге на Тильде и добавляет свой цвет, закругление поля поиска, размер шрифта и т.д.
<style>
/* Стили для элементов поиска и фильтра */
.t-store__filter__btn,
.t-store__filter__input {
background-color: #f0f0f0 !important; /* Цвет фона */
text-align: left !important; /* Позиционирование текста слева */
border: 2px solid #074600; /* Цвет и толщина границы */
border-radius: 10px !important; /* Скругление углов */
color: #000000 !important; /* Цвет текста */
padding-left: 20px !important; /* Отступ слева (для размещения иконки поиска) */
font-size: 18px; /* Размер шрифта */
height: 50px; /* Высота поля */
}
/* Увеличиваем ширину поля поиска на десктопе */
@media screen and (min-width: 440px) {
.t-store__filter__input {
width: 400px !important;
}
}
/* Стили для иконки поиска */
.t-store__search-icon {
width: 20px !important; /* Ширина иконки */
height: 20px !important; /* Высота иконки */
}
.t-store__search-icon path {
fill: #074600 !important; /* Цвет иконки */
}
</style>А чтобы зафиксировать фильтры и поиск можно сделать так:
- Создаем в Zero Block плашки с фильтром и поиском,
- Устанавливаем на них якорную ссылку на начало каталога и при нажатии они просто перебрасывают наверх к фильтрам.
Убрать раздел каталога "ВСЕ" на Тильда
Модификация убирает кнопку ВСЕ из списка категорий товаров. Но при этом оставляет все товары видимыми при заходе на сайт.
На выбор 2 варианта кода:
1 вариант - скрываем категорию ВСЕ, но отображаем ее при клике на другую категорию. Пример 1 варианта
На выбор 2 варианта кода:
- Скрывает кнопку ВСЕ из категорий товаров на Тильде. При нажатии на любую категорию (например, Типсы), возвращает кнопку "ВСЕ" (делает ее видимой), чтобы можно было посмотреть все товары. При нажатии на кнопку "ВСЕ", скрывает ее, но отображает все товары.
- Полностью убирает кнопку ВСЕ из категорий товаров на Тильде. Кнопки просто не будет. Однако при первом заходе на сайт все товары из каталога отобразятся. После выбора категории не будет возможности вернуться ко всем товарам.
1 вариант - скрываем категорию ВСЕ, но отображаем ее при клике на другую категорию. Пример 1 варианта
<style>
/* Скрываем кнопку "Все", но отображаем ее при клике на другую категорию */
.js-store-parts-switcher.t-store__parts-switch-btn.t-name.t-name_xs.t-menu__link-item.t-store__parts-switch-btn-all.t-active {
display: none !important;
}
</style>2 вариант - тотально скрываем категорию ВСЕ.
Пример 2 варианта
Пример 2 варианта
<style>
/* Тотально скрываем кнопку "Все" */
.js-store-parts-switcher.t-store__parts-switch-btn.t-name.t-name_xs.t-menu__link-item.t-store__parts-switch-btn-all {
display: none !important;
}
</style>