prestashop module - Temporary popup feedback "ngtemporarypopupfeedback"

Module description

You can create your own popups on pages, and add a data entry form to submit. Every popup you create is customizable exactly the way you want it. Below in I will describe exactly how the pop-up window will be configured and what the custom option is responsible for.

You can also display different custom popups on the selected page, and in some popups hide the submit form, or use the popup as a banner :).

The module is compatible with prestashop versions 1.6 to 1.7 and above.

Creating and configuring a popup

On the left menu, go to “list of pop-ups” and then on the right, click on the plus sign to create a new window in Figure 5.1. Next, at the bottom, you will see the newly created pop-up window. The new pop-up window will initially be displayed and will not work, since it will need to be enabled, then check for which users it will be displayed (registered or not registered) and select on which pages it will be displayed (in the Display settings section in the module).

(Figure 5.1 Creating a popup window)

Go to editing the created pop-up window in Figure 5.2

(Figure 5.2 Go to editing)

Each pop-up window stores user sessions, namely those users who submitted data from the form or simply closed the pop-up window. To clear user sessions of a pop-up window and also other pop-up windows associated with it, you need to click on the clear session button, I display Figure 5.2.1 which button and where to click

(Figure 5.2.1 Clearing user sessions)

To make it easier to search for a pop-up window from the list, you will need to specify the name of the pop-up window, as shown in Figure 5.2.2

(Figure 5.2.2 Be sure to specify the name of the pop-up window)

Basic popup setup

After we switched to editing the pop-up window and immediately get into the “Basic setup” section, below I will describe step by step what the option is responsible for:

1. Popup activity - enable popup activity.
2. Unregistered users will be able to see pop-ups, otherwise they will not see if the option is disabled.
3. Registered users will be able to see pop-ups, otherwise they will not see if the option is disabled.

4. The generated pop-up windows will be displayed in the list. If a pop-up window is added from the list, this pop-up window will be displayed after closing or confirming the data from the current window. That is, the process will be like this, close the pop-up window, the following pop-up window appears. Attention! The following pop-up window may not be displayed if it has the active option, the registered user option, and the unregistered user option disabled in its settings. Attention! And it is desirable that in the next window the selected pages are disabled for display.
It also displays a button to clear selected sessions, that is, when you click clear selected sessions, all sessions of the selected pop-up windows will be cleared.
5. Specify the delay time for the next pop-up window to appear after the previous one closes. Affects all selected pop-ups. If the page is open, the next popup will still open (if you have site errors in the site console, it may not show up right away).

6. If you enable the option to get time from global settings, then the time of the pop-up window will be taken from the settings in Figure 5.3

(Figure 5.3 Popup time from global settings)

7. Specify the time in seconds after which a new pop-up window will appear.
8. If the popup is ready to be displayed, there will be a delay in seconds after which the popup will be displayed. If you refresh the page, the delay will still work.

9. What is the width of the popup in Figure 5.4

(Figure 5.4 Popup Width)

10. The minimum height of the popup window in case the window is empty in Figure 5.5

(Figure 5.5 Minimum Popup Height)

11. Specify the background color of the popup window in Figure 5.6

(Figure 5.6 Popup Background Color)

12. Popup background image in Figure 5.7

(Figure 5.7 Popup background image)

13. Rounding the corners of the pop-up window, an example is displayed in Figure 5.8

(Figure 5.8 Popup background image)

14. The text after a successful submission will be displayed after the form is submitted with the entered data, at the moment you need to enter the phone number and code, and submit the data. Shown in Figure 5.9

(Figure 5.9 Message after sending data)

15. Displaying the right block with information, exactly where the title, description, short description, plain text, button are displayed. I will now disable the option and display an example in Figure 5.10

(Figure 5.10 Hiding the right side of the popup window)

Descriptions for the popup

In editing the pop-up window in the section “Descriptions for the form”, below I will describe step by step what the option is responsible for:

1. On the right side, the title is displayed example in Figure 5.11, with the option “Show popup with title” you can show or hide the title.

(Figure 5.11 Header Display)

2. Title text color
3. Title text size
4. Add an indent below the heading to separate the bottom text
5. Adding title text

6. On the right, a short description is displayed as shown in Figure 5.12, with the option “Show short description in pop-up window”, you can show or hide the short description.

(Figure 5.12 Brief Description Display)

7. Short description text color
8. Short description text size
9. Add an indent below the short description to separate the bottom text
10. Adding the short description text

11. A description is displayed on the right, with the option “Display description in pop-up window” you can show or hide the description.
12. Description text color
13. Description text size
14. Add an indent below the description to trim the bottom text
15. Adding description text
16. Plain text is displayed on the right, with the option “Show text in pop-up window” you can show or hide plain text.
17. Regular text color
18. Regular text size
19. Add an indent below normal text to separate the next bottom element
20. Display plain text

Form fields, popup actions

In editing the pop-up window, in the “Form fields, actions” section, the form settings (entering the first name, last name, mail, phone number, message, captcha confirmation, captcha input) and the display of buttons in the form are displayed. Below I will describe in stages what the option is responsible for:

1. Display form submit button, example in Figure 5.13

(Figure 5.13 Displaying the form submit button)

2. Text color in form submit buttons, example in Figure 5.14

(Figure 5.14 Change text color in form submit button)

3. The background color of the submit button of the form data, an example in Figure 5.15

Changing the background color of a form submit button

(Figure 5.15 Changing the background color of the form submit button)

4. Submit button text

5. The color of the field label, I display an example in Figure 5.16

(Figure 5.16 Changing the field label text color)

6. Form error color, output an example in Figure 5.17

(Figure 5.17 Changing the Color of Errors in a Form)

7. Show field name
8. Display field label name
9. Edit field label text name
10. Name field placeholder text
11. Activate a field as a required name entry

12. Display last name field
13. Display field label last name
14. Change the label text of the last name field
15. Surname field placeholder text
16. Activate a field as a required last name entry

17. Display code selection when entering a phone number
18. Whether to display a flag image next to the phone number entry code
19. Select the codes that will be displayed in the list to select when entering a phone number
20. Display phone field
21. Display field label phone
22. Change the label text of the phone field
23. Phone field placeholder text
24. Activate a field as a required phone number

25. Show mail field
26. Display field label mail
27. Change the label text of the mail field
28. Mail field placeholder text
29. Activate a field as a required mail entry

30. Display a message input field
31. Display message field label
32. Edit message field label text
33. Message field placeholder text
34. Activate a field as a required message input
35. In security cases, we will display the confirmation of the google captcha
36. In case of security, you can choose to display the input and confirmation of the captcha from the image

Background and images for the popup

1. Specify the minimum height for the image in the popup window. The minimum height can be seen in cases where the form for submitting data is not displayed on the right or the banner is displayed above or below, for example, I display Figure 5.18, 5.19

(Figure 5.18 Minimum Image Height)

(Figure 5.19 Minimum Image Height)

2. Upload an image that will be displayed inside the popup window
3. We change the position of the image output, output either from the top, bottom, left or right.

Setting the display for the popup

In the “Display settings” section, detailed settings for displaying on pages are displayed. You can choose to display the pop-up window on selected pages, or display it on all pages as well.

List of applications

On the left in the menu there are 2 sections where in the 1st section incoming applications are displayed and in the 2nd section approved applications are displayed. Applications can be changed, deleted, as well as confirm or cancel the application back.

After the application has been received, the application data will immediately be sent to the store's mail or to the specified mail in the section settings (module settings).

If the application is confirmed by the administrator, then the application data will be transferred to the section of approved applications and send a message to the user's mail if there is mail in the application.

Settings

In the left menu of the module, go to the settings. Next, I will describe below step by step what the option is responsible for:

1. Specify the base time for the popup to appear. This option will only work if the option to get the time from the global settings is enabled in the popup settings.
2. Google public key captcha (recaptcha)
3. Google secret key captcha (recaptcha)

4. After the application is sent, a notification with the application data will be sent to the specified mail below. Otherwise, if the option is disabled, the application will not come.
5. If you need to specify any other mail to which the notification of the application data will be sent, you can specify in this field. After sending the application, a notification will be sent to the specified mail.
6. After the application is sent, a notification with the application data will be sent to the store's mail. Otherwise, if the option is disabled, the application will not come.
7. If an email is specified in the application, then a notification will be sent to this mail that the application has been accepted. If you disable the option, then the application will not come to the user.

a confirmation window will be displayed with a confirmation message

After the form data is sent in the pop-up window, a confirmation window will be displayed with a message confirming the application, an example in Figure 7.19

(Figure 7.19 Application Confirmation Message)

8. Order confirmation element text color
9. Order Confirmation Element Window Background
10. Order confirmation element shadow color
11. Padding between the text and the edge of the order confirmation element
12. Download the loading animation that appears during the process of sending or closing the pop-up window, an example as shown in Figure 7.20, loading the loading for example in .gif or .svg format

(Figure 7.20 Loading animation on submit or close)

13. Enable the module (activate the module to work)

Conclusion

With this module, you can create your own popup windows for different pages.

The advantage of pop-up windows is that you can bind other pop-up windows to them with your own settings, and then the next pop-up windows will be displayed sequentially after the previous window either closes or simply submits the filled form data.

In the module, you can clear the sessions of users of pop-up windows in case the pop-up window is changed.