Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetPopup: How to Build a Dynamic Pop-up to Work with JetEngine Listings

useful information

 

Let’s discover how to build a dynamic pop-up to work with JetEngine listings.

Tutorial requirements:

  • JetPopup, JetEngine, and JetElements plugins installed and activated;
  • Form built with JetFormBuilder plugin;
  • Listing created with the JetEngine plugin and placed on the Elementor-built page (free version).

Table of Contents: 

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 Pop-up

Proceed to the JetPopup > All Popups block in the WordPress Dashboard. 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 layout preset, and click on the “Create New Popup” button.

jetpopup directory

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 have built earlier in the Choose Form field. Style up the form and move to the following steps.

form in the pop-up settings

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.

useful informationNOTE!
The dynamic widgets are still empty on this step, but the content will appear later.
dynamic fields in pop-up

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.

jetpopup settings

Attaching the Pop-up

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.

button content settings in listing

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.

button jetpopup 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.

listing on the front end

Now the form is displayed along with the dynamic widgets added to the pop-up earlier.

pop-up with dynamic widgets and form

Ultimately, now you know how to attach pop-ups to JetEngine listings using JetPopup functionality.