Appearance
Подключение
О разделе
После создания веб-дизайнерами макета лендинга в специальном проекте тильды, следует подключить к нему специальный JS-скрипт, который обрабатывает страницу на клиенте: добавляет футер, метрики и заменяет форму.
JS-Скрипт
Сейчас этот скрипт подключается к странице автоматически.
Предупреждение
Важно убедиться, что к странице подключен только один подобный скрипт.
js
<script>
try {
const head = document.head;
const script = document.createElement('script');
script.type = 'text/javascript';
const uniqId = new Date().getTime();
script.src = `https://likecentre-files.website.yandexcloud.net/autotilda/preloader.js?v=${uniqId}`;
head.appendChild(script);
} catch (error) {
console.log('Preloader initializing error')
}
</script>
Дополнения
В автотильде существует ряд дополнений, которые автоматизируют процессы: автодаты, автоцены, автоселект пакетов. Для гуглформы и мультиформы также существует своя специфика подключения.
Админка
После публикации страницы в тильде, следует скопировать её ID,
перейти в админку и открыть раздел Создать страницу.
В нём заполнить всю первичную информацию о странице:
URI страницы - название пути, который будет использоваться после домена.
ID страницы - скопированный из тильды идентификатор.
Редирект на страницу "Спасибо" - ссылка на страницу, которая будет отображаться после оформления заявки или оплаты продукта, обязательно в формате https://.
Title, Description и Keywords - для метаинформации о странице.
Редирект на страницу - если страницу необходимо закрыть редиректом. При заходе на указанный URI произойдет редирект.
Привязанные продукты - обязательно выбрать ID продуктов, которые предоставил заказчик.
Страница без продукта
Если лендинг не подразумевает оформление заявки, рекомендуется указывать ID 3114

Затем необходимо выбрать формат дизайна и настроить поля формы.


Последний пункт - настройка дополнительных параметров. Подробнее о них можно посмотреть тут.

Специфика мультиформ
При развороте мультиформы очень важно соблюдать правила, которые позволят скрипту корректно обработать страницу.
Примечание #1
Убедись, что отсутствуют элементы, в том числе прозрачные, которые мешают нажатию на кнопку отправки заявки
Примечание #2
Убедись, что получившаяся форма помещается на всех адаптивных экранах
Примечание #3
Убедись, что стрелочка для кнопки или иные элементы подходят в итогой странице
Примечание #4
Убедись, что на кнопке перехода между шагами стоит CSS-класс next_step
Примечание #5
Убедись, что старый кастомный скрипт мультиформы удален
Специфика гуглформ
При развороте гуглформы очень важно соблюдать правила, которые позволят скрипту корректно обработать страницу.
Примечание #1
Убедись, что получившаяся форма ничем не перекрывается, в том числе на мобильных устройствах
Примечание #2
Убедись, плашки для полей формы имеют ссылку #rectangle
Специфика квизов
При развороте квиза очень важно соблюдать правила, которые позволят скрипту корректно обработать страницу.
Если есть стартовый экран
Необходимо убрать у кнопки класс next_step и добавить ссылку #form-start. Тогда квиз отобразит приветственный экран и перейдет к вопросам только после нажатия
Примечание #1
Убедись, что отсутствуют элементы, в том числе прозрачные, которые мешают нажатию на кнопку отправки заявки
Примечание #2
Убедись, что получившаяся форма помещается на всех адаптивных экранах
Примечание #3
Убедись, что стрелочка для кнопки или иные элементы подходят в итогой странице
Примечание #4
Убедись, что на кнопке перехода между шагами стоит CSS-класс next_step
Примечание #5
Убедись, что старый кастомный скрипт квизов удален