Десять задач, ради которых на Тильде открывают вкладку с кодом

Списки «10 фишек Тильды» обычно перечисляют то, что в редакторе и так на виду. Этот список — про обратное: про задачи, ради которых открывают вкладку с кодом. У каждой одна строка о том, почему настройками не выходит, и ссылка на разбор, где это проверено, на готовый мод или на страницу платной работы.

Порядок не по важности, а по цене: сначала то, что закрывается бесплатным сниппетом, потом то, для чего нужен сервер. Словом «доработка сайта на Тильде» называют и первое, и второе, а разница между ними — от нуля рублей до работы с сервером и чужими API. Список нужен ровно для того, чтобы понять, в какой из двух половин ваша задача, до того как её кому-то заказывать.

Короткий ответ

Настройками Тильды не делаются десять вещей, и все они проверены отдельно: длина телефона в форме, настройка «меньше движения», баллы квиза, микроразметка кроме картинок, разный набор элементов в адаптивах Zero Block, общее состояние у зависимых анимаций, своя доставка с расчётом по адресу, правило корзины «если это и то», судьба заказа после вебхука и своя страница для вошедшего.

1. Проверить, что телефон в форме полный

Правило phone смотрит, из каких символов состоит номер, и не смотрит, сколько их: «+7 999» проходит проверку и уезжает в заявку. Маска телефона в настройках поля это закрывает — но только там, где маска включена, и только для одной страны.

Разбор: почему в заявках с Тильды недозвонимые номера. Мод: MOD-072. Работа под задачу: доработка форм.

2. Не запускать анимацию тому, кто её отключил

В операционной системе есть настройка «меньше движения», и браузер сообщает о ней странице. В ресурсах Тильды, снятых с опубликованной страницы, — 27 файлов стилей и 53 файла скриптов, включая все четыре её системы анимации, — строки prefers-reduced-motion нет ни одной. Значит проверить настройку может только сторонний код, и обязан это сделать до того, как что-нибудь спрячет.

Разбор: анимация на Тильде и prefers-reduced-motion.

3. Посчитать баллы в квизе и показать разный результат

Тильда собирает ответы и отправляет их в заявку, но арифметики над ответами в её наборе скриптов нет. Считать нужно своим кодом, результат кладётся в скрытое поле — оттуда он доезжает до заявки, — а подстановка {{form.Поле}} в тексте обновляется по событию change, которое после записи значения кодом надо послать вручную.

Разбор: как в квизе показать разный результат по баллам. Работа под задачу: доработка форм.

4. Разметить страницу чем-то кроме картинок

На четырёх сохранённых страницах Тильда поставила 60 разметок ImageObject, ноль блоков JSON-LD и ни одного Product — при 27 карточках товара. То есть FAQPage, HowTo, Article и Product добавляются руками, JSON-LD в <head>. Слои не конфликтуют: тильдовская разметка остаётся на месте.

Разбор: микроразметка Schema.org на Тильде.

5. Сделать разный набор элементов в адаптивах Zero Block

Элемент артборда — один узел разметки, а адаптив меняет ему только числа: координаты, размер, кегль. Поэтому «в мобильной версии вместо картинки — список» настройками не выражается. Вынос элемента за экран его не убирает: замер показывает display: block, запрошенную с сервера картинку, заголовок в дереве доступности и прокрутку артборда при табуляции. Убирает display: none — но классы видимости Тильды действуют на блок, а не на отдельный элемент.

Разбор: одинаковый набор элементов во всех адаптивах.

6. Связать несколько зависимых анимаций общим состоянием

Пошаговая анимация Zero Block принимает событие hover и список других элементов, наведение на которые её запускает, — «наводишь на пункт, меняется картинка рядом» настраивается без кода. Предел в другом: у картинок нет общего состояния, каждая включается и выключается сама по себе. На двух-трёх это незаметно, на списке из шести пунктов — шесть анимаций, выставленных руками.

Разбор: зависимая анимация по наведению. Мод: MOD-146.

7. Посчитать свою доставку по адресу

Список служб доставки в настройках закрытый, а цена в нём либо фиксированная, либо по зонам. Своего договора со службой и расчёта по конкретному адресу там нет. Отдельная ловушка на этом пути: скрытые поля, в имени которых есть tildadelivery-, Тильда вырезает из отправки, и посчитанная цена до сервера не доезжает.

Работа под задачу: интеграция доставки.

8. Выразить правило корзины «если в ней это и то»

Промокод и скидка по сумме в Тильде есть, и на этом настройки заканчиваются. Кратность упаковки, минимальная сумма по категории, оптовая цена от количества — это чтение состава корзины и подсчёт над ним. Осторожность нужна в одном месте: у Тильды две суммы, до скидок и после, и подстановка одной вместо другой показывает покупателю не ту цифру.

Работа под задачу: правила корзины.

9. Сделать что-нибудь с заказом после вебхука

Тильда отдаёт заказ вебхуком, и дальше её работа закончена. Сверка, повтор при сбое, документы, вызов чужого API — это сервер. И то, что посчитал браузер, правдой считать нельзя: цену в корзине видно и можно поменять, поэтому сумма и состав перепроверяются на сервере по данным из вебхука.

Работа под задачу: бэкенд и интеграции.

10. Показать вошедшему человеку экран, которого нет в Членстве

Своё «личное» у Тильды есть, и здесь раньше стояло обратное. Блоки кабинета tilda-lk-dashboard-1.0 и tilda-buyer-dashboard-1.0 различаются одним битом и оба подгружают модули Членства с members2.tildacdn.com: профиль с именем, телефоном, паролем и загрузкой аватара, а при включённом управлении заказами — разделы «Заказы», «Купленные товары» и «Адреса».

Граница в другом. Имена страниц кабинета перечислены в коде списком — orderlist, purchased-products, addresses, profile, — и своё в этот список не дописать. Значит, экран остаётся невозможным, когда нужен не заказ магазина, а статус вашего процесса, документ или счёт, или данные из 1С, CRM и службы доставки.

Работа под задачу: личный кабинет.

Что Тильда делает сама, и переписывать это не надо

Этот список короче, но он экономит больше денег, чем первый: каждый пункт — задача, за которой приходят с просьбой «дописать код», а дописанный код ломает то, что уже работало.

• Сообщение после успешной отправки формы. У формы есть блок .js-successbox: он берёт текст из настроек, понимает {{form.Name}} и {{tilda.lead_id}} и показывается сам. Форму Тильда не прячет, а очищает. Разбор.
• Чекбокс согласия на обработку данных. Родной тип поля, с обязательностью и ссылкой на документ. Разбор.
• Анимация картинки по наведению на пункт списка. Пошаговая анимация Zero Block, без кода — см. пункт 6 выше.
• Autoscale и ваш transform. Autoscale не трогает ваши правила: он масштабирует записи свойством zoom. Меняются не стили, а результат измерений. Разбор.

Рядом: делается кодом, но легко делается плохо

Задачи не из списка ограничений — их решает код, и вопрос только в том, какой.

• Горизонтальная лента, которую прокручивает вертикальный скролл. Замер на одной и той же прокрутке: у худшей реализации 620 пересчётов раскладки и 19 мс, у правильной — 1 пересчёт и 0 мс. Разбор.
• Изменение текста блока скриптом. Запись в textContent заменяет всё содержимое одной строкой, вместе с <br> и ссылкой tel:. Разбор.
• Два сниппета на одной странице. Не конфликтуют, если второй экземпляр ядра не создаётся, а находит первый. Разбор.
• «В редакторе работает, на сайте нет». Редактор, предпросмотр и опубликованная страница — три разных режима, и рантайм Тильды их различает атрибутом data-tilda-mode. Разбор.

Как проверить пункт из списка самостоятельно

Ни один пункт здесь не просит верить на слово, и проверяются они одинаково:

1. Открыть опубликованную страницу, а не редактор — режимы различаются, и это пункт из второго списка.
2. Сохранить страницу целиком, вместе с ресурсами: то, что делает Тильда, лежит в её собственных файлах стилей и скриптов.
3. Искать по сохранённому. «Тильда не умеет X» проверяется поиском строки: нет prefers-reduced-motion — значит настройку никто не читает; нет JSON-LD — значит разметку никто не ставит.

Дата проверки и то, что именно проверялось, стоят у каждого разбора отдельным блоком. Тильда обновляется, и часть пунктов однажды закроется сама.