Найти тему
Александр Соловьёв

Зависимость popup-контента от ссылки на Тильде

Представьте ситуацию, когда у вас много кнопок, вызывающих разные попапы. Все эти попапы должны быть оформлены по-разному, но по структуре они одинаковы. Неужели стоит загружать свой сайт кучей одинаковых попапов? Нет!

Нужно просто сделать один попап, а контент будет меняться в нём динамически — в зависимости от ссылки, которую вы зададите в кнопке, открывающей попап. Например, сделали ссылку
#npopup:1 — у вас открылся попап с заголовком «Попап № 1», сделали ссылку #npopup:2 — открылся попап с заголовком «Попап № 2».

Так можно подменять любой контент! Даже поля для ввода можно скрывать в зависимости от ссылки, но этого мы касаться не будем — если кому-то нужен подобный функционал, вы всегда можете
обратиться за разработкой.

Инструкция

  1. Выберите, какой блок с попапом будете использовать.
  2. Пропишите его ID.
  3. Придумайте ссылку для попапа и напишите её в форме, например #npopup. Ссылка должна начинаться с решетки и не должна содержать двоеточий (их вы расставите уже на странице в Тильде).
  4. Создайте необходимое количество вариантов для своего попапа.
  5. Заполните необходимые поля в форме ниже.
  6. Заполните соответствующие данные в своем попапе на Тильде. Если вы захотите изменять, например, заголовок, а его не будет в попапе на Тильде, то произойдёт ошибка.
  7. Если это попап с формой, обязательно в настройках попапа укажите название формы, а в форме ниже пропишите желаемое название для каждого варианта, чтобы понимать, из какой формы пришли данные.
  8. Скопируйте полученный код и вставьте его в самом низу страницы в блок T123.
  9. Чтобы открыть попап с нужной вам информацией, вставьте ссылку вида #npopup:1, где npopup — ссылка, которую вы прописали в форме ниже (п. 3), а 1 — номер варианта попапа (посмотреть его можно в коде, начиная с 7 строки).

Оптимизируйте сайт, используя всего один попап для одних и тех же нужд. Особенно, если информация в попапах практически не отличается.

Модификация

Модификация доступна по ссылке платным подписчикам со статусом «Разработчик». Подписаться можно тут.