Как прописать логику popup, предлагающего подписаться?

Ссылка скопирована
JavaScript
1 ответ

Часто в магазинах есть такое надоедливое и всех бесячее попап-окно, которое при загрузке страницы вылетает и призывает подписаться. Клиенты его хотят в свой магазин.

Для самих подписок поставил самый популярный из плагинов - Newsletter, по старинке.
Popup делаю руками, и при загрузке settimeout на jQuery, чтоб появися через несколько секунд.

А если человек уже подписался - то можно ли как-то это дать знать? Я просто никогда как покупатель на эти рассылки не подписывался, и не знаю, вылетают окна, если ты уже подписан, или нет.
Или есть специальный плагин, который делает подписку поп-апом?

Нет! На contact-form-7+popup-maker НЕ ПОДХОДИТ!!!!! Нужен плагин именно подписки а не контакт-форм, а поп-ап окно я сам сделаю - ему надо как-то дать понять, что подписка уже есть.

Дополнительно:

ему надо как-то дать понять, что подписка уже есть.

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

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

  • Вадим, регистрация и авторизация не будет связана с рассылкой.
    А можно пример с локал сторадж или куки? Для меня это пока не знакомое, я поизучаю
  • alexiusgrey,
    https://learn.javascript.ru/localstorage
    https://learn.javascript.ru/cookie
  • Вадим, что-то я все равно ничего не пойму. приблизительно понимаю, что надо бы сделать кнопку, чтобы на нее нажали, и это считалось "больше не показывать", но как эти ключ-значение дать клику на эту кнопку?
  • alexiusgrey, подписка это сетевой запрос. В ответ обычно приходит что подписка была совершена успешно.
    Соответственно, отправив запрос дожидаемся ответа, если ответ положительный, то делаем запись в хранилище с произвольным ключом и произвольным значением.
    Например: localstorage.setItem("isSubscriber", "true").
    Ну а при загрузке странице читаем этот ключ из стоража, если он там есть и подходит значение, значит показывать предложение подписаться не нужно.
  • а как отловить событие, что подписка успешна?
  • Вадим, может есть какой-то хоть немного похожий пример? чтобы на событие клика навешивалась кука, а потом по ее значению чтобы проверялось что-то и делалось. мне бы синтаксис понять, как в таких случаях задается кука и идет проверка. не попап, а мало-мальски хоть чтоб похожее было действие.

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Редакция по БД Ответ

    Если подписка не связана с авторизацией, сайт не может достоверно знать, подписан ли человек, пока не спросит email и не проверит его на сервере. Для popup обычно достаточно практичного правила: если пользователь успешно подписался или сам закрыл окно, сохранить флаг в localStorage или cookie и больше не показывать popup на этом устройстве.

    Пример логики на localStorage:

    jQuery(function ($) {
  var key = 'newsletter_popup_closed';
  var $popup = $('.newsletter-popup');
 
  if (localStorage.getItem(key) === '1') {
    return;
  }
 
  setTimeout(function () {
    $popup.addClass('is-visible');
  }, 5000);
 
  $('.newsletter-popup__close').on('click', function () {
    localStorage.setItem(key, '1');
    $popup.removeClass('is-visible');
  });
 
  $('.newsletter-popup form').on('submit', function () {
    localStorage.setItem(key, '1');
  });
});

    jQuery(function ($) { var key = 'newsletter_popup_closed'; var $popup = $('.newsletter-popup'); if (localStorage.getItem(key) === '1') { return; } setTimeout(function () { $popup.addClass('is-visible'); }, 5000); $('.newsletter-popup__close').on('click', function () { localStorage.setItem(key, '1'); $popup.removeClass('is-visible'); }); $('.newsletter-popup form').on('submit', function () { localStorage.setItem(key, '1'); }); });

    Более правильный вариант — ставить флаг не на сам submit, а после успешного ответа формы. У плагина Newsletter нужно смотреть его JS-события или отправлять подписку своим AJAX-запросом и после ответа success выполнять localStorage.setItem(...). Если события нет, можно закрывать popup после submit, но это менее точно: пользователь мог ввести неверный email.

    Cookie нужна, если скрытие popup должно работать до загрузки JS или учитываться сервером. Для обычного popup на фронтенде localStorage проще. Минус обоих вариантов: при другом браузере, другом устройстве или очистке данных popup появится снова. Это нормально для большинства магазинов.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов