Back to contents

JetEngine: How to Use Alternative Listing Template Injections in Listing Grid

This tutorial introduces the way how to inject the alternative listing items within one Listing Grid widget using JetEngine functionality.

You are able to style the listings and present them in a bright, 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.

Preparations

1 Step— Creating the alternative listing template

First of all, you need to enable the Listing Grid injections option. Open your WP dashboard and go to JetEngine > JetEngine Dashboard > Modules and tick the Listing Grid injections checkbox.

listing-ijections-toggle

2 Step— Creating the first listing

Create a listing template that suits your taste. If you need some help – follow this Listing Template creation tutorial. You can create the Listing template either in Elementor page builder:

the first listing template

Or in Gutenberg Editor:

listing template in gutenberg

After that, go to the JetEngine > Listings section in the WP Dashboard and create a new alternative listing with the same dynamic widgets, which are used in the main listing. In Elementor it will look like that:

the secind  listing template

And here’s Gutenberg view:

listing template in gutenberg

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

Adjusting settings in Elementor

1 Step— Proceed to Elementor Editor

Open the page, where the original listing is displayed via the Listing Grid widget or block. Proceed to customize the widget in the settings panel. In the General section enable the Inject alternative listing items option. In Elementor it looks like that:

adding injection item

And in Gutenberg Editor it looks like that:

listing grid injection settings

2 Step— Adjusting proper settings

Click the “Add Item” button and set the item. In the Listing template field select the created alternative listing. Let’s go through the other settings:

  • Inject on field provides two options: you can choose either to attach the alternative listing unit on each N item in the main listing or depending on item meta field value. The N is defined in the Item number field. If the value you put to the Item number field is negative – the alternative listing unit will be applied not from the first item but from the last. For example, if you place “-1” there, the alternative template will be applied to the last item in the grid;
  • You can enable also the Inject this item only once toggle and specify the item number. In this case, the listing template will be applied only to a single grid cell;
  • If you enable the Start from the first item toggle, the alternative listing template will be applied to the first cell in the first row and to each N item after that. Moreover, you have an opportunity to define the Column span for customizing the listing layout according to your needs. But be aware, that it can’t be bigger than the columns number value.;
  • If you set the Inject on to “Depends on item meta field value” option, then you need to specify the Key (name/ID), select the Operator, and insert the Value.

It is possible to add as many custom items with different settings as you wish.

3 Step— Check on the frontend

When all settings are adjusted, click the “Update” button and view the listing on the front end. Here’s how a simple listing grid with one listing template used will look like:

simple listing grid

And this is the one where the alternative listing template was injected:

listing grid ingected with alternative listing template

In Gutenberg injected Listing Grid will look like that:

injected listing grid

Display varied listings in one place and experiment with layouts and style of the listings using JetEngine Listing Grid widget.