- Step – Creating a Data Store
- Step – Building the page for the Data Store
- Step – Creating the “Add to Favorites” button
- Step – Creating the “Remove from Favorite” button
- Step – Adding an item counter
- Step – Add the “likes” counter
The pages like “Favorites” or “Wishlist” can sufficiently improve the user experience on your website. While surfing through the site, users can add items to a separate store and come back to them anytime. When there’s no need to seek the objects you previously liked again, it makes the life of visitors easier and their impressions about your website better. JetEngine Data Stores module gives you all the necessary tools to create a convenient and good-looking Wishlist and even show users how many times every item was liked by the others.
So, let’s start.
1 Step — Creating a Data Store
Go to the admin control panel and open JetEngine > JetEngine dashboard. Enable the Data Stores module by ticking the box and pressing the “Save” button.
After enabling the module, you will see the new tab in the JetEngine dashboard – Data Stores. Proceed to it and click the “New Store” button.
Let’s take a closer look at the features of a store.
- Name. Type in the title of your Data Store here. It will be shown publicly when you create a page for it.
- Slug. This is the inner name of the store that can be used by other modules. Don’t use spaces or other specialized characters there – only letters, dash, and underscore symbols.
- Store type. Here you can choose where the data saved by the user will be stored.
- Cookies – the data is stored as cookies and will disappear after clearing the cache data.
- Session – the data will be stored only until the user ends the session on the server.
- User Metadata – the information will be stored in the user’s metadata. This option is available only to authorized users because they, actually, have the option to save metadata on your website.
- Local Storage – the data will be stored in the user’s local browser.
- Max size. This option allows you to define how many items the user could store. If the user saves too many items, it could affect the loading speed. On the other hand, if the number is too small, it could annoy the user. If you set “0” in this field, it allows users to store an unlimited number of items;
- Count items. If you enable this function, the data store will count how many times each of the items were added to the store. For the details of this feature usage, see below;
- Is users store. If you want the users to able to save other user’s accounts in this store – enable this toggle;
- Store item on view. When this toggle is enabled, the posts fall into the store after the user visits them. This function is used to create “Recently Viewed” sections. Also, be aware when this option is enabled, and you set a definite number in the Max size field, it works in that way: when a user adds a new item and the store has exceeded the limit, the first item will be deleted, and a new one will be saved instead of it;
- Is Custom Content Type store. Enable this toggle if you create a store for the Custom Content Type items.
When you are done with creating the store, hit the “Save” button.
2 Step — Building the page for the Data Store
To show items saved by a user to the store, you need to use a Listing Grid widget (in Elementor) or block (in Gutenberg). Before you create a new page and put the Listing Grid in there, you will need a Listing template. It is better to create a new listing, specially for the favorites page. Just be sure that you use the same meta fields as the ones in the items the users will add to the Data Store. If you need more details, check our Listing creation tutorial.
Let’s assume you are creating a Favorites page.
Go to the Dashboard > Pages, hit the “Add New” button, and proceed to edit with Elementor. You can also do it via the Gutenberg blocks. Find the Listing Grid widget/block and place it on the page. For this case, you will need to do the following actions:
In the Listing drop-down menu, choose the necessary listing. In Elementor, it looks like that:
And in Gutenberg, it will look like that:
In the Post Query section, hit the “Add Item” button. Choose the Posts & Author Parameters in the Type row and scroll it down. The last feature will be Get posts from store – choose the Data Store you created previously from the drop-down list. Here’s the Elementor view:
Customize the other features of the grid according to your needs. If you need a detailed guide, go through our Listing Grid tutorial. By now, your Favorites page is empty. Let’s fill it in.
3 Step — Creating the “Add to Favorites” button
It doesn’t matter how you show the items to the users. Be it a static gallery or a dynamically changed listing grid, you can add the “Add to Favorites” button with the help of the Dynamic Link widget (Elementor) or block (Gutenberg).
Let’s assume you used a listing grid.
Go to the JetEngine > Listings and choose the one where you’d like to add the “Add to Favorites” button. If you have created it with the help of Elementor, proceed to edit it with Elementor. Find the Dynamic Link widget and drop it to the page. We have a comprehensive overview of Dynamic Link widget, so check it if you haven’t faced this widget yet. However, for the “Add to Favorites” button, you will need a specific type of dynamic link.
Let’s take a look at its features.
- In the Source drop-down list, choose the Add to store option. This type of link will automatically add the item you’ve chosen to the Favorites page.
- Select store. If you’ve created several Data Stores, you can choose the one you need here.
- Added to store text. This is the text the user will see after clicking the “Add to Favorites” button.
- Added to store URL. Copy the URL of the newly created Favorites page and insert it into this tab. It will be convenient for the user to have a quick link to the Favorites page right from the item they just added there.
- Added to store icon. This icon will be placed near the Added to store text value. You can either choose the ready-made icon from the Icon Library or upload your own SVG file.
If you created the Listing template via Gutenberg Editor open it in the WP editing window. Press the “Add Block” button and find the Dynamic Link block. Click on it to add it to the Listing. Type the slug of the data store to the Set store slug bar. If you want the link to lead the user to the Favorites page, you can type the label of the link to the Added to store link text and the URL to Added to store link URL. In that case, after the user clicks on the “Add to favorites” button, the link will transform to be able to take the user to the data store page.
Afterward, type in the Label of the link (in this case, it is “Add to Favorites”) and choose the icon. Do the necessary styling in the Style of Block Style (available in the Gutenberg Editor if you installed the JetStyleManager plugin) tab and hit the “Update” button at the bottom of the customization menu.
After adding a few items to the Favorites, you can go to the page and check if the chosen items are already there. Now, you would probably like to give users an option to remove the items from the Favorites page.
4 Step — Creating the “Remove from Favorite” button
This is why it is better to create a separate listing for the Favorites page. This way, you can add the “Remove from Favorite” button only for the items that are already added to Favorites.
Go to the Listing you’ve created and proceed to edit it. Find the Dynamic Link widget/block and add it to the work area.
The settings are pretty much standard for the Dynamic Link. You just have to choose the Remove from store option in the Source row and set the Label (in this case, it will be “Remove from Favorite”). Elementor view:
After some appearance customization in the Style (Elementor) or Block Style (Gutenberg) tab and click the “Update” button. Here’s how it will look like on the frontend:
5 Step — Adding an item counter
With the help of Dynamic Tags and JetEngine functionalities, you can add an item counter to your Favorites page. It will automatically show how many objects the user added to the Favorites. This functionality can be used in the Elementor page builder only.
Go to the dashboard, find the Favorites page, and choose to edit it with Elementor. Pick up the Heading widget and drop it over to the Listing Grid. Instead of typing in the Title, click the Dynamic Tags button in the upper right corner of the text area. Choose the Data Stores: Store Count option.
The drop-down menu has two sections – Settings and Advanced. In the Settings section, there is only one feature – Store. You can set the Data Store here (the counter will work only if you choose to turn on the Count post option of that Data Store).
In the Advanced section, you type in the text that will be shown Before and After the counter. Also, you can write what to show to the user if there are no items in the store – it is the value of the Fallback bar.
After you finish customization, hit the “Update” button. Here’s how it will look like on the front:
6 Step — Add the “likes” counter
Besides showing the counter of the item number in the store, you can also show the counter of how many times a certain item was added to the user stores. It is possible to place this data on the Single Page or on the items grid. You will be able to do it only in Elementor page builder, it is not available in Gutenberg. Let’s assume you would like to show it in the grid.
Go to the listing you are showing in the grid and choose to edit it with Elementor. Pick the Heading widget and drop it to the listing. As for the item counter, instead of typing in the Title, click the Dynamic Tags button, and choose the Data Stores: Post Count option.
The tag settings are the same as for the item counter. The only difference is the Specific post ID feature. If you place an ID of a single item there, the counter will show how many times that specific post was added to the Data Store.
Here’s how it will look like in the front:
Voila, now you have an excellent Favorites page. You can also create Wishlists or any other data stores you need in the same way.