Модуль prestashop - Временное всплывающие окно обратной связи (popup) "ngtemporarypopupfeedback"

Описание модуля

Вы можете создавать свои собственные всплывающие окна на страницах, а также добавлять форму ввода данных для отправки. Каждое созданное всплывающее окно настраивается по вашему усмотрению, именно так как вы хотите. Ниже в я опишу как именно будет настраиваться всплывающее окно и за что отвечает настраиваемая опция.

Вы так же можете выводить разные созданные всплывающее окна на выбранной странице, а также в некоторых всплывающих окнах скрывать форму отправки, или так же применять всплывающее окно как баннер :).

Модуль совместим с версиями prestashop от 1.6 до 1.7 версии и выше.

Создание и настройка всплывающего окна

Слева в меню перейдите в “список всплывающих окон” и далее справа нажмите на плюсик чтобы создать новое окно на Рисунке 5.1. Далее внизу увидите новое созданное всплывающее окно. Новое всплывающее окно изначально отображаться и работать не будет, так как его нужно будет включить, далее проверить для каких пользователей будет отображаться (зарегистрированных или не зарегистрированных) и выбрать на каких страницах он будет отображаться (в разделе Настройка отображения в модуле).

(Рисунок 5.1 Создание всплывающего окна)

Переходим в редактирование созданного всплывающего окна на Рисунке 5.2

(Рисунок 5.2 Переходим в редактирование)

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

(Рисунок 5.2.1 Очистка сессий пользователей)

Чтобы было легче искать всплывающее окно из списка нужно будет указать название всплывающего окна, показываю на Рисунке 5.2.2

(Рисунок 5.2.2 Обязательно указываем название всплывающего окна)

Базовая настройка всплывающего окна

После того как перешли в редактирование всплывающего окна и сразу попадаем в раздел “Базовая настройка”, ниже опишу поэтапно за что отвечает опция:

1. Активность всплывающего окна - включить активность работы всплывающего окна.
2. Незарегистрированные пользователи смогут увидеть всплывающие окно, иначе не увидит если опция будет отключена.
3. Зарегистрированные пользователи смогут увидеть всплывающие окно, иначе не увидит если опция будет отключена.

4. В списке будут отображаться созданные всплывающие окна. Если всплывающее окно будет добавлено из списка, это всплывающие окно будет отображаться после закрытия или подтверждения данных из текущего окна. То есть процесс будет такой, закрываете всплывающее окно, появляется следующее всплывающее окно. Внимание! Следующее всплывающее окно может не отобразиться в случаи если у него в настройках будет отключена опция активности, опция зарегистрированный пользователь, и опция незарегистрированный пользователь. Внимание! И желательно нужно чтобы в следующем окне были отключены выбранные страницы на отображение.
Также там отображается кнопка очистить выбранные сессии, то есть при нажатии очистить выбранные сессии произойдет очистка всех сессий выбранных всплывающих окон.
5. Указываем время задержки появления следующего всплывающего окна, после закрытия предыдущего. Действует на все выбранные всплывающие окна. Если страница открыта, то все равно будет открыто следующее всплывающее окно (если у вас есть ошибки сайта в console сайта то возможно не отобразиться сразу).

6. Если включить опцию получение времени из глобальных настроек, то время появления всплывающего окна будет брать из настроек на Рисунке 5.3

(Рисунок 5.3 Время появления всплывающего окна из глобальных настроек)

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

9. С какой шириной будет отображаться всплывающее окно на Рисунке 5.4

(Рисунок 5.4 Ширина всплывающего окна)

10. Минимальная высота всплывающего окна, в случае если окно будет пустое на Рисунке 5.5

(Рисунок 5.5 Минимальная высота всплывающего окна)

11. Указываем цвет фона всплывающего окна на Рисунке 5.6

(Рисунок 5.6 Цвет фона всплывающего окна)

12. Изображение фона всплывающего окна на Рисунке 5.7

(Рисунок 5.7 Изображение фона всплывающего окна)

13. Закругление углов всплывающего окна пример вывожу на Рисунке 5.8

(Рисунок 5.8 Изображение фона всплывающего окна)

14. Текст после успешной отправки будет отображаться после того как будет отправлена форма с введенными данными, на данный момент нужно ввести номер телефона и код, и отправить данные. Изображено на рисунке 5.9

(Рисунок 5.9 Сообщение после отправки данных)

15. Отображение правого блока с информацией, именно там где выводится заголовок, описание, краткое описание, обычный текст, кнопка. Сейчас я отключу опцию и выведу пример на рисунке 5.10

(Рисунок 5.10 Скрытие правой части всплывающего окна)

Описания для всплывающего окна

В редактировании всплывающего окна в разделе “Описания для формы” ниже опишу поэтапно за что отвечает опция:

1. Справа выводится заголовок пример на Рисунке 5.11, с помощью опции “Отображать всплывающее окно с заголовком” можно отображать или скрывать заголовок.

(Рисунок 5.11 Отображение заголовка)

2. Цвет текста заголовка
3. Размер текста заголовка
4. Под заголовком добавлять отступ, чтобы отделять нижний текст
5. Добавляем сам текст заголовка

6. Справа выводится краткое описание изображено на Рисунке 5.12, с помощью опции “Показать краткое описание в всплывающем окне” можно отображать или скрывать краткое описание.

(Рисунок 5.12 Отображение краткого описания)

7. Цвет текста краткого описания
8. Размер текста краткого описания
9. Под кратким описанием добавлять отступ, чтобы отделять нижний текст
10. Добавляем сам текст краткого описания

11. Справа выводится описание, с помощью опции “Отображать описание в всплывающем окне” можно отображать или скрывать описание.
12. Цвет текста описания
13. Размер текста описания
14. Под описанием добавлять отступ, чтобы отделать нижний текст
15. Добавляем сам текст описания
16. Справа выводится обычный текст, с помощью опции “Показать текст в всплывающем окне” можно отображать или скрывать обычный текст.
17. Цвет обычного текста
18. Размер обычного текста
19. Под обычным текстом добавлять отступ, чтобы отделить следующий нижний элемент
20. Выводить обычный текст

Поля формы, действия для всплывающего окна

В редактировании всплывающего окна в разделе “Поля формы, действия” выводится настройка формы (ввода имени, фамилии, почты, номера телефона, сообщения, подтверждения капчи, ввода капчи) и вывода кнопок в форме. Ниже опишу поэтапно за что отвечает опция:

1. Отобразить кнопку отправки данных формы, пример на Рисунке 5.13

(Рисунок 5.13 Отображение кнопки отправки формы)

2. Цвет текста в кнопки отправки данных формы, пример на Рисунке 5.14

(Рисунок 5.14 Изменение цвета текста в кнопке отправки формы)

3. Цвет фона кнопки отправки данных формы, пример на Рисунке 5.15

(Рисунок 5.15 Изменение цвета фона в кнопке отправки формы)

4. Текст кнопки отправки данных формы

5. Цвет метки поля, вывожу пример на Рисунке 5.16

(Рисунок 5.16 Изменение цвета текста метки поля)

6. Цвет ошибки формы, вывожу пример на Рисунке 5.17

(Рисунок 5.17 Изменение цвета ошибок в форме)

7. Выводить поле имя
8. Отображать метку поля имя
9. Изменить текст метки поля имя
10. Текст заполнителя поля имя
11. Активация поля как обязательного ввода имени

12. Выводить поле фамилия
13. Отображать метку поля фамилия
14. Изменить текст метки поля фамилия
15. Текст заполнителя поля фамилия
16. Активация поля как обязательного ввода фамилии

17. Выводить выбор кода при вводе номера телефона
18. Отображать ли изображение флага рядом с кодом ввода номера телефона
19. Выбираем коды которые будут отображаться в списке, для выбора при вводе номера телефона
20. Выводить поле телефон
21. Отображать метку поля телефон
22. Изменить текст метки поля телефон
23. Текст заполнителя поля телефон
24. Активация поля как обязательного ввода телефона

25. Выводить поле почта
26. Отображать метку поля почта
27. Изменить текст метки поля почта
28. Текст заполнителя поля почта
29. Активация поля как обязательного ввода почты

30. Выводить поле ввода сообщения
31. Отображать метку поля сообщения
32. Изменить текст метки поля сообщения
33. Текст заполнителя поля сообщения
34. Активация поля как обязательного ввода сообщения
35. В случаи безопасности отобразим подтверждении капчи google
36. В случае безопасности на выбор можно вывести ввод и подтверждение капчи с картинки

Фон и изображения для всплывающего окна

1. Указываем минимальную высоту для изображения в всплывающем окне. Минимальную высоту можно заметить в случаи если справа не будет выведена форма отправки данных или баннер будет выведен сверху или снизу например вывожу Рисунок 5.18, 5.19

(Рисунок 5.18 Минимальная высота изображения)

(Рисунок 5.19 Минимальная высота изображения)

2. Загружаем изображение которое будет выводиться внутри всплывающего окна
3. Изменяем позицию вывода изображения, выводим либо сверху, снизу, слева или справа.

Настройка отображения для всплывающего окна

В разделе “Настройка отображения” выводится подробная настройка отображения на страницах. Можно настроить вывод всплывающего окна на выбранные страницы или вывести также на всех страницах.

Список заявок

Слева в меню есть 2 раздела где в 1 разделе выводятся входящие заявки и во 2 разделе выводятся одобренные заявки. Заявки можно изменять, удалять, а также подтверждать или обратно отменять заявку.

После того как поступила заявка, сразу же будет происходить отправка данных заявки на почту магазина или на указанную почту в разделе настройки (настройки модуля).

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

Настройки

В левом меню модуля переходим в настройки. Далее я ниже опишу поэтапно за что отвечает опция:

1. Указываем базовое время появления всплывающего окна. Эта опция будет работать только в том случаи если в настройки всплывающего окна будет активированна опция на получении времени из глобальных настроек.
2. Открытый ключ Google капчи (рекапчи)
3. Секретный ключ Google капчи (рекапчи)

4. После того как заявка будет отправлена, будет происходить отправка уведомления с данными заявки на указанную почту ниже. Иначе если опция будет отключена заявка не придет.
5. Если понадобится указать еще какую либо почту на которую придет уведомление данные заявки, можно указать в этом поле. После отправки заявки поступить уведомление на указанную почту.
6. После того как заявка будет отправлена, будет происходить отправка уведомления с данными заявки на почту магазина. Иначе если опция будет отключена заявка не придет.
7. Если в заявке будет указана почта, то на эту почту придёт уведомление, о том что заявка была принята. Если отключить опцию, то заявка не придет пользователю.

После того как будут отправлены данные формы в всплывающем окне, отобразится окно подтверждения с сообщением о подтверждении заявки, пример на рисунке 7.19

(Рисунок 7.19 Сообщение о подтверждении заявки)

8. Цвет текста элемента подтверждении заявки
9. Фон окна элемента подтверждении заявки
10. Цвет тени элемента подтверждения заявки
11. Внутренний отступ между текстом и краем элемента подтверждения заявки
12. Загрузить загрузочную анимацию, которое появляется в процессе отправки или закрытия всплывающего окна, пример как это выводится на рисунке 7.20, загружаем загрузку к примеру форматом .gif или .svg

(Рисунок 7.20 Загрузочная анимация при отправки или закрытия)

13. Включить модуль (активировать модуль чтобы работал)

Заключение

С помощью этого модуля можно создавать свои собственные всплывающие окна (popup) для разных страниц.

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

В модуле можно очищать сессии пользователей всплывающих окон в случае если всплывающее окно будет изменено.