Evolution never ends and our plugins become better day after day. Now with the latest JetPopup v.1.3.9. you can easily display dynamic data from custom posts inside popups! In this short tutorial, we’ll have a look at how to create a booking form and attach it to the JetEngine listing by means of the popup to provide users with an opportunity to book a service, an event or an appointment.
Step 1. Creating a popup
- First of all, we have to make sure we’ve created a booking form in the JetEngine > Booking Forms block in the WP Dashboard.
- Then, we go to the JetPopup block and create a popup clicking the Add New Popup button.
- We give our popup a name and proceed to the Elementor page builder.
- Now we need to enrich the popup with the Booking Form widget and appropriate dynamic widgets of JetEngine.
- We use the Dynamic Image widget for displaying the thumbnail of the custom post and the Dynamic Field widget for showing its title and location metadata. Note: the dynamic data isn’t displayed yet, but it will be pulled out later.
- Navigate to the gear icon in the bottom-left corner of the Elementor page builder since it’s important to enable the Loading content with Ajax and the Force Loading options for a popup to work properly.
- When the popup is ready, the last step is to click the Publish button.
Step 2. Attaching the popup
Now we need to create a listing in JetEngine > Listings and attach the popup to one of its elements.
- First, we navigate to the Advanced tab of the Button widget and open the JetPopup accordion block.
- Next, we enable the JetEngine Listing popup option in order to display the required listing inside this particular popup.
- Then we set a trigger type as Click On Widget so that our popup appears as soon as the button is clicked.
- Don’t forget to save the settings by clicking the Publish button.
- Finally, we open the page with a listing and take a look at how it works. In our case, when we click the Book button, the popup with a booking form appears.