Если ты работаешь в Tilda, наверняка возникало ощущение, что всё удобно, но хочется чуть больше свободы: чтобы меню всегда оставалось на виду, карточки товаров выглядели живее, а корзина была аккуратной и без лишних элементов. Хорошая новость в том, что для этого не нужно уходить в сложную разработку - иногда достаточно нескольких небольших кодов, которые дополняют стандартные возможности Tilda и реально упрощают работу. Ниже - решения, которые я регулярно использую в своих проектах.
1. Закреплённое меню при прокрутке страницы
Одна из самых частых задач - сделать так, чтобы меню оставалось сверху экрана, пока пользователь скроллит страницу. Это привычно для пользователей и сразу улучшает навигацию. Код вставляется в блок T123 (HTML-код) или в настройки сайта.
Важно указать ID блока с меню.
<style>
#recXXXXXX {
position: fixed; /* Фиксирует элемент */
top: 0; /* Прикрепляет к верху */
left: 0; /* Прикрепляет к левому краю */
width: 100%; /* Растягивает на всю ширину */
z-index: 9999; /* Ставит поверх других элементов */
}
</style>
Меню всегда остаётся на виду, поэтому пользователю не нужно прокручивать страницу вверх, чтобы перейти в нужный раздел, он меньше теряется на длинных страницах, а тебе не приходится городить лишние блоки или усложнять структуру сайта - ты просто аккуратно меняешь поведение уже готового элемента.
Если тебе вообще интересно, что происходит до того, как ты открываешь Tilda - как данные, логика и автоматизация могут влиять на итоговый результат, у меня есть отдельная статья: «Python для веб-дизайнера: что происходит до того, как вы открыли Tilda». Она как раз про закулисье работы с сайтами и про то, почему код - это не всегда про «сложно», а часто про удобно и системно.
2. Случайный порядок рекомендованных товаров
В интернет-магазинах на Tilda рекомендованные товары обычно отображаются в одном и том же порядке. Из-за этого витрина выглядит статично.Чтобы добавить динамики, можно перемешивать карточки при каждой загрузке страницы. Вот версия для случая, когда ты показываешь 4 рекомендованных товара:
<script>
$(function() {
var parent = $(".t-store__relevants-grid-cont");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
</script>
Проще говоря, товары каждый раз выглядят по-новому, за счёт чего внимание покупателей распределяется равномернее и магазин не кажется «застывшим», при этом ничего в самом каталоге не меняется - товары и данные остаются теми же, просто визуально карточки каждый раз показываются в новом порядке.
3. Скрываем поле «Промокод» и упрощаем корзину
Поле «Промокод» в корзине используют не все, но визуально оно перегружает интерфейс и увеличивает высоту блока. Решение - скрыть его по умолчанию и показывать только по клику на чекбокс.
<script>
$('.t-input-group_pc').hide(300);
$(document).on('change','input[name="havepromo"]',function(e){
if($('input[name="havepromo"]').is(':checked') ){
$('.t-input-group_pc').show(300);
} else {
$('.t-input-group_pc').hide(300);
};
});
</script>
В итоге корзина становится чище и понятнее: на экране нет лишних полей, ничего не отвлекает, и пользователь видит только то, что ему действительно нужно, а такие мелочи делают процесс покупки спокойнее и заметно приятнее.
Бонус: промокоды для Taplink
Если ты работаешь с Taplink и хочешь протестировать все возможности или сэкономить на тарифе, держи промокоды:
- annsob7 - доступ ко всем функциям на 7 дней
- ann25 - скидка 10% на все тарифы
Можно спокойно попробовать и понять, подходит ли инструмент под твои задачи.
Все эти коды про удобство: как упростить себе работу, сделать интерфейс аккуратнее и использовать возможности Tilda чуть шире стандартных настроек. Если тебе близок такой подход, я регулярно делюсь похожими приёмами, мыслями о дизайне, коде и реальной работе с проектами в своём Telegram.