Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetEngine: How to Create “Recently Viewed” Section Using Data Stores Module

From this tutorial, you will learn how to create a Data Store for the pages a user visited. It will also reveal how to show those pages as an attractive grid using the JetEngine plugin functionalities.

The Recently Viewed block is a part of the page that lists the pages a user visited right before coming to the page he/she is currently on. It is especially popular in online stores and shows users products they also looked at. The Recently Viewed section makes website navigation a little easier and improves user experience. JetEngine plugin allows you to create such a section by using the Data Stores module.

1 Step— Create a Data Store

Open the WP dashboard and go to JetEngine > JetEngine Dashboard > Modules. Find the Data Stores toggle, enable it, and click the “Save” button.

enabling Data Stores module

Now, proceed to JetEngine > JetEngine Dashboard > Data Stores and hit the “New Store” button. Choose the name, store type, and other features; you will find more details about them in this tutorial. Turn on the Store item on view toggle – this will allow adding the posts to the store after the user visits them. You can also specify the post type that will be added in the Watch for post type drop-down menu. When you are done, hit the “Save” button.

creating new data store

2 Step— Display the section

The items from the store will be displayed via the Listing Grid widget, so you need to create a Listing Template first. Go to JetEngine > Listings, click the “Add New” button and build the layout and appearance of the Listing Grid cell. If you need some guidance, go through this Listing Template creation tutorial. The Listing template can be created either in the Elementor page builder or in Gutenberg Editor.

When you are done with the Listing template, find the page where you would like to place the Recently Viewed section. It could be a Single Page of the Custom Post Type or a Category page. Open the page with the Elementor page builder or Gutenberg Editor. Pick the Listing Grid widget/block from the menu and add it to the necessary section. Select the created Listing Template in the Listing drop-down menu and proceed to the Posts Query section. Click the “Add Item” button and choose the “Posts & Authors Parameters” option in the Type select. In Elementor it will look like that:

Listing Grid Posts Query settings

And here’s Gutenberg view:

recently viewed in Gutenberg

In the Get posts from store drop-down menu choose the Data Store you created for recently viewed items. Afterward, customize the Listing Grid according to your needs and define the design. You can find more details about Listing Grid creation in this overview.

Congratulations, you now learned how to create a Recently Viewed section for your website using the Data Stores module of the JetEngine plugin. Enjoy!