- 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 cash 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.
- Count posts. 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.
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. Before you create a new page and put the Listing Grid in there, you will need a Listing. It is better to create a new listing specially for the favorites page. Just be sure that you use the same meta fields like 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. Find the Listing Grid widget and place it on to the page. For this case, you will need to do the following actions:
- In the Listing drop-down menu, choose the necessary listing.
- 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.
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.
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. Proceed to edit 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.
Type in the Label of the link (in this case, it is “Add to Favorites”) and choose the icon. Afterward, do the necessary styling in the Style 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 with Elementor. Find the Dynamic Link widget and drop 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”).
After some appearance customization in the Style tab, 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.
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 to the items grid. 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. Have fun!