This feature allows building a fully-fledged listing template with JetEngine plugin. The main feature of this listing template is that it’s done using a dynamic repeater field. Let’s overview the entire process.
1 Step — Creating a CPT
First, you need to create a Custom Post Type and fulfill all the needed values. You can find the needed information in this tutorial.
2 Step — Creating a Repeater meta field for CPT
Once you prepared your CPT, it’s time to create a Repeater meta field. To see the most full information, take a look at this tutorial.
On this step, we’ll create a new Repeater meta field for our CPT called “Countries”.
For our tutorial, we’ll showcase the countries’ cities and images via Repeater meta fields, and then display them in a Listing Grid.
3 Step — Complete the fields within the posts
Go to each post of your CPT, and add the needed information to the Repeater fields.
Here’s what we’ve got in our example:
Working with Listing Template
1 Step — Create a new listing
Go to JetEngine> Listing
and click Add New button
In the Listing Source, you need to select the Repeater Field
Pay attention to the following parameters you need to set:
- “from Post type” is a CPT you created the repeater filed for;
- “Repeater Source” contains two options: JetEngine and ACF, — if you created a repeater meta field either via JetEngine or ACF, use the corresponding source;
- Repeater Field — specify the name of your Repeater meta field;
- Listing Item Name — give a name to a Listing;
- Listing View — select either to operate with the listing in Elementor or Blocks editor (Gutenberg).
In our example, we selected the Elementor page Builder.
Adjust the Settings.
2 Step — Elementor Setup
Once a Listing for Repeater is created you will be transferred to Elementor editor page.
Here, you need to use the Dynamic widgets by analogy with Listing for Posts/Terms/Users.
Let’s add a Dynamic Field widget.
Here, in the Source field, you need to choose the Repeater Field. After this, you’ll need to input the Repeater Field Key manually. In our example, we displayed the “City” repeater key.
Let’s add one more, “Image” which we created previously.
Add a Dynamic Image widget, and use the repeater key in the corresponding field, as shown below:
Just as usual, you can style up the Dynamic Widgets values according to your tastes and needs.
3 Step — Adjusting the Listing Grid widget
After you prepared your Listing Template, you need to display it in the Listing Grid widget. Use the Single template functionality available either in JetThemeCore or in Elementor Pro.
Open the Single Post template in Elementor and drop the Listing Grid widget.
Select the Listing you previously created for the Repeater meta field and find those repeater items you added to your post on the backend (cities and their images) are displayed in the form of a grid.
Set up Listing Grid parameters just as for regular listing for posts or taxonomies: Posts Query, Terms Query, Style block, etc.
As you can see, it’s pretty much easy to create a listing template for the repeater meta field.