Help Center
How to Create “Recently Viewed” Section Using Data Stores Module

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

Learn how to create a data store to show posts/pages or CPTs a user visited. Show the recently viewed pages in Elementor and Gutenberg as attractive grids using the JetEngine plugin functionalities.

The Recently Viewed section is a part that lists the posts’ pages visited by users before. It is trendy in online stores and shows products the users viewed. The Recently Viewed section makes website navigation easier and improves user experience. The JetEngine plugin allows you to create the section using the Data Stores module.

Creating a Data Store

Activation of the Data Store Module

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

data stores module activation

Settings of the Data Store

Proceed to JetEngine > JetEngine Dashboard > Data Stores and hit the “New Store” button. Choose the name, store type (here, Session), and other features (here, Recently_Viewed).

Read more about Creating a Data Store in this tutorial.

Turn on the Store item on view toggle to allow adding the pages/posts to the store after the user visits them. You can also specify the post type to add in the Watch for post type drop-down menu (here, Properties). Hit the “Save” button.

data stores settings

Recently Viewed Posts Output

Building a query to output the posts

Navigate to JetEngine > Query Builder.

Press the “Add New” button and specify the query name (here, Query for recently viewed pages) and select the type of queried data from the Query Type drop-down menu (here, Posts Query).

general settings of query

Move to the General tab, unroll it and select the Post Type from the drop-down menu (here, Properties) and the Publish option from the Posts Status drop-down menu.

post type choosing settings of query

Adding the data store

Navigate to Post & Page > Post In. Press the Dynamic Tag icon and select the Get store option from the drop-down menu. 

Choose the data store you have previously created (here, Recently_Viewed). Press the “Apply” button.

post and page settings of query

Save the query by pressing the “Add Query” button.

Recently Viewed Posts Output in Elementor

Open a page in the Elementor page builder and add the Listing Grid widget to the page. Select the Listing Item (here, Main Listing) with the CPTs.

listing grid widget settings in elementor

Copy this widget or add the Listing Grid widget with the same Listing Item (here, Main Listing) for displaying the recently viewed pages.

Navigate to the Custom Query tab of the second Listing Grid widget. Unroll it, and move the Use Custom Query toggle. Select the built query (here, Query for recently viewed pages).

custom query settings of listing grid widget in elementor

The Listing Grid widget looks as follows.

listing grid widget for recently viewed pages in elementor

Publish the page and click the posts you like. Scroll down the page and see the recently viewed page listed.

front end of recently viewed pages displaying in elementor

Recently Viewed Posts Output in Gutenberg

Open a page or post in the Gutenberg editor. Add two Listing Grid blocks. The first is intended for displaying all CPT, and the second is for showing the recently viewed posts. Use the same Listing Item (here, Main listing) for these Listing Grid blocks.

listing grid block settings in gutenberg

Navigate to the Custom Query settings of the Listing Grid block intended for displaying the recently viewed pages.

custom query settings of listing grid widget in gutenberg

Publish the page and click some pages to make them recently viewed. The second Listing Grid block looks as follows.

listing grid widget for recently viewed pages in gutenberg

That’s all about creating the “Recently Viewed” Section Using the Data Stores module output in Elementor and Gutenberg.

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.