Help Center

How to Use Alternative Listing Template Injections in Listing Grid Widget

How to Use Alternative Listing Template Injections in Listing Grid Widget

This tutorial introduces injecting the alternative listing items within one Listing Grid widget using JetEngine functionality.

Before you start, check the tutorial requirements:

You can style the listings and present them in an eye-catching manner on the pages. However, the Listing Grid uses a single listing template for the whole grid. If you want to create a more sophisticated grid layout by combining several different listing templates in the Listing Grid widget of the JetEngine plugin, this tutorial will show you how.

Enable Listing Grid Injections

First of all, you need to enable the Listing Grid injections option. Go to WordPress Dashboard > JetEngine > JetEngine Dashboard > Modules, and tick the Listing Grid injections checkbox. Press the “Save” button.

listing grid injections toggle on jetengine dashboard modules tab

Build Two Listings

You can create a Listing template in Elementor Page Builder or Gutenberg. Now we will use Elementor. You can build the listing of any needed type; now, we will use the post type ones and the other for taxonomy.

Don’t forget to hit the “Publish/Update” button once all the desired widgets are added.

the first listing grid

Afterward, go to the WordPress Dashboard > JetEngine > Listings section and create a new alternative listing with the same dynamic widgets used in the main listing. Click on the “Publish/Update” button.

the second listing grid

In our case, we utilize JetEngine Dynamic Field and Dynamic Image widgets to showcase information about the room and its features.

Remember that you can also use Gutenberg to build the needed listing with the help of the samely named dynamic blocks we have used in Elementor.

posts listing in gutenberg

Adjust the Listing Grid Widget

Open the page where the original listing is displayed via the Listing Grid widget (Elementor) or block (Gutenberg). We’ll observe Elementor settings.

Proceed to customize the widget in the settings panel. In the General section, enable the Inject alternative listing items option. 

Click the “Add Item” button and set the item.

inject on dropdown list

In the Listing template field, select the created alternative listing. Let’s go through the Inject on field options.

On each N item

Once this option is selected, the listing item will be displayed on the predefined number of posts. Check the available customizations.

Here we display the alternative listing on each second item.

inject on each n item
  • Inject number — define the number on which to put the alternative listing items. For instance, if you put “2,” the alternative listing will be injected on each second item. If the value you place in the Item number field is negative, the alternative listing unit will be applied not from the first item but the last. For example, if you place “-1” there, the alternative template will be used for the last item in the grid;
  • Start from first — enable to apply the alternative listing template to the first cell in the first row and each N item after that;
  • Inject this item only once — toggle on and specify the item number. In this case, the listing template will be applied only to a single grid cell;
  • Column span — define this value for customizing the listing layout according to your needs. But be aware that it can’t be bigger than the columns number value;
  • Static item — activate this feature if you want to inject static objects into the listing.

Depends on item meta field value

Enable the listing item injection on the meta field value criteria. Adjust them with the help of the following settings.

For instance, you can set the alternative listing if an item has the “top” Value in the “Status” meta field.

inject on depends on item meta field value
  • Key (name/ID) — paste the meta field key that will act like a criterium for alternative listing item injection;
  • Operator — pick the desired operator for comparison; 
  • Value — paste the value used for comparison.

Other settings are repeated as ones available once the “On each N item” option is selected.

If post has terms

Use this option if you want to set the alternative listing item depending on whether the item includes some term values.

For example, let’s put an alternative listing on each post that is included in the “Editor’s Picks” category.

inject on if post has terms
  • Taxonomy — choose the taxonomy that includes the needed term;
  • Terms — paste the term IDs or slugs separated by commas.

If post type is

Let’s check the following setting on the other listing example. 

Set the Listing Grid to inject items by their post type. This time the listing includes two different post types. So, initially, enable the Use Custom Post Types toggle and set the Post Types displayed in the grid. Here we inject an alternative listing for the “Services” post type.

inject on if post type is
  • Post type — pick the post type the listing item should be part of to be injected.

If term taxonomy is

As for now, you can use this feature as the alternative for already placed taxonomy items, so this time we use the terms listing. For instance, highlight the first item and make it featured.

Mind activating the Inject this item only once feature to inject an alternative listing only for the first item.

inject on if term taxonomy is
  • Taxonomy — select the needed taxonomy of the term to be the criterium for injection. 

It is possible to add as many custom items with different settings as you wish. When all settings are adjusted, click the “Update” button and view the listing on the front end.

Check the Result

Here’s what a simple listing grid with one listing template used will look like:

listing template without injections

And this is the one where the alternative listing template was injected on each second item:

listing template injections on the front end

Don’t forget that you will get a different result depending on the feature you have selected as Inject on option.

That’s it; now, you can display varied listings in one place and experiment with the layouts and style of the listings using the JetEngine Listing Grid widget.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.