Pop-up блоки
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.
- Выделите слово, при клике на которое должен появляться pop-up.
- Через появившееся контекстное меню задайте ссылку на всплывающее окно.
- Добавьте pop-up блок (категория «Форма»).
- В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword
Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.
- В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.
Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
Как сделать свою уникальную форму в Zero Block на Tilda?
Модификация поможет сделать свою кастомную форму на Zero Block используя разные поля ввода и кнопку.
ГЕНЕРАТОР КОДА
- Инструкция
- Пример
1. Создаем создаем в зеро блок свою форму(можно использовать комбинацию из нескольких форм с различными типами полей ввода, расположенных в нужном вам порядке)
2. В настройках кнопки формах удаляем текст из кнопки и ставим размер 0 высота 0 ширина. У полей ввода можно заполнить переменную variblename или оставить пустой.
3. Создаем кнопку(это также может быть шейп, картинка, текст) и присваиваем ей ссылку #sendform
4. Добавь на страницу блок BF204N. Подключаем к нему нужный приемщик данных. В полях ввода ничего не трогаем. Если нужно перенаправлять пользователя на страницу «спасибо» то указываем ссылку в форме через «контент»
5. Копируем Id Zero Block и id блока BF204N и вставляем в генератор кода
6. Указываем в генераторе доп. настройки и настраиваем стандартный popup Спасибо.
7. Копируем готовый код и вставляем в HTML блок T123
Примечание! После отправки данных можно показывать свой текст и другие элементы. Для этого нужным элементам указываем класс из поля «класс для своего текста спасибо». По стандарту класс: tc-success-text . Скрипт скроет эти элементы и покажет их после отправки формы вместе или вместо стандартного popup.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка «Add CSS Class Name» и далее, справа в настройках указываем класс
Как добавить всплывашку вместо корзины в карточку товара Tilda
MANUFACT это творческое объединение специалистов в различных областях, связанных с разработкой и поддержкой веб-проектов. В нашем корпоративном блоге мы делимся тем полезным, что знаем сами. Знакомьтесь с нами неторопливо и со вкусом, делитесь впечатлениями и узнавайте новое.
В карточках товаров на Tilda (блоки ST300, ST305N, ST310N, ST315N, ST320N) кнопка в карточке обычно не работает, если не добавить на страницу корзину (блок ST100). Но что если мы хотим, чтобы кнопка в карточке товаров вела не в корзину? Как привязать кнопку в карточке к всплывашке (popup форме)? Мы посмотрели в код сайта и нашли ответ.
Оглавление
Подробнее про то, как создать интернет-магазин на Tilda читайте в нашей статье Подходит ли Tilda для интернет-магазина?
В чём проблема
Как нам сделать так, чтобы вместо корзины по кнопке открывалась форма для заполнения?
Если просто удалить корзину и добавить pop-up, кнопка становится не кликабельной и никуда не ведёт.
Мы посмотрели в код сайта. Блок с корзиной имеет ссылку oder. Поэтому вот что можно сделать.
Как мы её решили
Шаг 1
Добавить форму под карточки товара.
Важно: добавить именно после карточек товара, иначе кнопка работать не будет.
Шаг 2
Поменять ссылку #popup:myform на #order. Опубликовать страницу заново.
Шаг 3
Перезагружаем страницу и проверяем результат.
Осталось только настроить содержимое формы по нашим нуждам.
Вот такое простое, но неочевидное на первый взгляд решение мы нашли. Пользуйтесь на здоровье.
Какие ещё затруднения у вас возникают при настройке интернет-магазина на Tilda? Пишите в комментарии, и мы обязательно поможем вам разобраться.
Авторы
Редактор блога MANUFACT и автор статей о разработке и продвижении в интернете. Уже четыре года помогает нашим специалистам подробно и понятно рассказывать о своей работе читателям блога.
Общий опыт Ильи в веб-разработке и SEO продвижении составляет 10 лет. Работает с WordPress, Tilda, Bitrix. Знает CSS, JavaScript, HTML 5. Любит учиться новому и когда всё, а особенно сайты, работает, как часы. Убеждён, что люди изобрели одежду без пуговиц и замков не для того, чтобы мы утруждались. Любит пить чай и кофе из литровой кружки и писать статьи в блог MANUFACT.
Директор компании MANUFACT. Несмотря на занимаемую должность, Влад остаётся ведущим разработчиком и принимал участие в 80% проектов в портфолио MANUFACT. Знает HTML, CSS, JavaScript, работает с CMS (Tilda, WordPress). Влад любит, когда всё в порядке, и не любит писать статьи, но всё равно охотно делится неочевидными и полезными знаниями о веб-разработке.
Спасибо за внимание.
Пишите комментарии, делитесь статьёй в социальных сетях с помощью кнопок ниже и подписывайтесь на рассылку в нашем блоге. Мы всегда рады новым гостям!
На примере отправки sms через sms.ru
Тильда умеет отправлять данные из форм на более чем 15 сервисов. Но иногда нужно сделать особую, нестандартную интеграцию.
Для примера рассмотрим отправку смс-оповещения клиенту после заполнения им формы на нашем сайте. Будем использовать две инструмента: hook.io для хостинга нашего скрипта приема данных и sms.ru для отправки смс. Промежуточный скрипт нужен, чтобы подружить данные, отправленные Тильдой и API конечного сервиса.
Создадим новый скрипт
Сервис hook.io дает возможность удобно размещать маленькие скрипты. Регистрируемся и создаем новый скрипт:
Имя сервиса — любое удобное:
Параметров в строке запроса у нас не будет, оставляем в Route только слэш:
Пишем код скрипта. Его задача — принять от Тильды данные, сформировать параметры для sms.ru и передать команду на отправку sms.
var querystring = require(‘querystring’);
var http = require(‘http’);module[‘exports’] = function helloWorld (hook) <
var par = <>;
par.api_id = hook.env.sms_api_key; // апи-ключ (указан в переменных среды)
par.to = hook.params.phone; // телефон получателя (передает тильда)
par.text = “Заказ принят”; // текст смс
par.from = “goodskull”; // имя отправителяvar url = ‘http://sms.ru/sms/send/?' + querystring.stringify(par);
http.get(url);
>;
Добавим апи-ключ от sms.ru
Апи -ключ и имя получателя создаются в личном кабинете sms.ru. Там все на русском языке и пояснений я здесь давать не буду. Хранить ключ будем не в тексте скрипта (он публичный), а в переменных окружения:
Добавим наш сервис в Tilda
После сохранения наш скрипт будет иметь ссылку вида:
Добавим ее как webhook в настройках сайта на Тильде:
Впишем URL нашего скрипта:
Привязка к форме
Теперь можно создать страницу с формой и привязать форму кнашему новому сервису.
В нашем скрипте используется переменная phone, поэтому назначьте соответствующему полю такое имя переменной.
Отправьте форму для проверки. Учтите, что Тильда отправляет данные формы не мгновенно, а с задержкой в 1–2 минуты.