How to Build a Dynamic Popup for JetEngine Listings
Let’s discover how to build a dynamic pop-up to work with JetEngine listings.
Before you start check tutorial requirements:
- Elementor (Free version)
- JetPopup plugin installed and activated
- JetElements plugin installed and activated
- JetFormBuilder plugin installed and activated with a form created.
The JetPopup plugin lets pull out the data from JetEngine listings within a pop-up. This tutorial will teach you how to display dynamic data inside the created pop-up.
One of the best cases to represent this great functionality is to attach a listing to a booking form inside the pop-up. This way, your website visitors will be able to book one of the services you provide, any events, or even make an appointment, etc.
Building a Popup
Proceed to the WordPress Dashboard > JetPopup > All Popups block. Pick the existing pop-up and press the “Edit” button to make some changes to it, or build a new one by pressing the “Create New Popup” button.
Select the layout preset, and click on the “Create New Popup” button.
Now, look for the JetForm widget in the Elementor widgets panel. Drag and drop it into your new pop-up.
Work on the available settings, and don’t forget to pick the form you built earlier in the Choose Form field. Style up the form and move to the following steps.
Also, you’ll need to add some of the dynamic JetEngine widgets, e.g., Dynamic Image to display a thumbnail of the custom post; Dynamic Field to showcase the title of the post and some metadata.
Now click the gear icon in the very bottom-left corner of the Elementor panel, and the JetPopup Settings will be displayed. Open the Settings accordion block and toggle the Loading content with Ajax option to “Yes” for the content of the pop-up to load using the AJAX method.
Also, enable the Force Loading option so that the content of the pop-up loads every time it is opened.
As soon as everything is done correctly, publish this pop-up by clicking the “Publish” button.
Attaching the Popup
Before we begin the next step, make sure you have created a listing with the JetEngine plugin.
Add the JetElements Button widget with the “Book” label to the listing, allowing your customers to book the service right away.
Open the Button settings and go to the Advanced tab. Here you can find the JetPopup accordion block where you can specify the Attached Popup and activate the JetEngine Listing popup option. Enable it as we attach the pop-up to the Listing Grid.
Next, define the trigger type as Click On Widget, and your pop-up will open once the button is clicked.
All in all, click the “Publish” button to save the settings.
It’s time to have a look at what we have just done. Open the page and click the “Book” button to see the form appear.
Now the form is displayed along with the dynamic widgets added to the pop-up earlier.
Ultimately, now you know how to attach pop-ups to JetEngine listings using JetPopup functionality.