Local Storage - How to create a "shortlist" or "wish list"?

[smwebmedia]

I want my users to be able to browse my store and “add to favourites” for later viewing …

What’s the best approach for doing this, without the need for saving to a DB?

I have tried creating an Array in the local storage manager, but cannot seem to get more than one item into the array… then to display items in the array, I have tried creating a repeat region, binded the values to no avail.

Maybe @Teodor or anyone else can help out?

Thanks everyone.

[abdulraheem]

Did you figure it out?

[TomD]

This is an interesting question/topic. I’m surprised it wasn’t answered before (I think I missed it). Unfortunately there isn’t much documentation about using arrays and storage options in Wappler.

Before the array component was added, I used cookies to create a wish list. I added a buttons to add/remove the item id to/from the cookie. To retrieve the items from the database, the cookie value can be used in the query. This method works alright, but it’s fiddly managing the cookies and the storage is quite limited. I think I would probably use the array component for this now. I’m not sure of the best way to do this, but this is what I just tried:

I created a local storage array - ‘idlist’ - because I want the selection to persist (like a cookie).
I added an array component to which I added a dynamic event:
onupdated: local1.set('idlist',items,{})

I added two buttons, to add/remove items to/from the array:
arr_selectedItems.addUniq(stock_id) (‘remove’ for the other button)
The buttons show/hide, eg using: local1.data.idlist.contains(stock_id)
(Alternatively, you can use just one button using the ternary operator for the condition.)

To display the number of items selected, I used a variable: local1.data.idlist.count().

To retrieve the items from the database, you could add a button to populate a hidden form field, eg: showItems.setValue(local1.data.idlist) and submit the form.

I’m not sure if this is the best way to do it and would be interested in comments/suggestions- eg:
Perhaps the local storage contents can be managed directly, without the array component.
Perhaps the IDs can be submitted without using a form.
I added a button to clear the local storage contents (to clear all selections), but don’t know how to clear the array without refreshing the page.

[abdulraheem]

This worked fine. However, how can i multiply the item depending on the users number of clicks.

For example, a user clicks on a bottom for product 1 and the cart should show the item once with the number of quantity.

Is it possible to apply this ?

[TomD]

My example was just for creating a list (eg a shortlist or wishlist). For something more elaborate, this might be useful:

Using Session Storage Keyed Array

This example is based on a shopping cart application using Wappler Session Storage. When the add to cart button is pressed the items are added to the storage. When the trash can is clicked, it will remove the item. [image] 1. add a Server Connect to populate the products area. This is outside the scope of this example 2. add the Session Storage Manger [image] 3. set the session parameters [image] 4. add an Array [image] 5. under Array Properties -> Items [image] 6 add an on-update act…

[TomD]

@TomD

I added a button to clear the local storage contents (to clear all selections), but don’t know how to clear the array without refreshing the page.

I had a quick look at the article by @ben I linked to. This answered the above question. In my example above you can set the array value to local1.data.idlist.

It still seems that an option to remove all values from an array is missing (or perhaps I've missed it).

[abdulraheem]

Thank you!! This is what i needed

[Teodor]

It's now easy to create a wishlist using the Data Store component.
Please take a look at the following tutorial showing how to use it:

Creating a Shopping Cart with the Data Store Component

The Data Store component allows you to store and edit local data in a simple local storage driven database. You can use this component to create a shopping cart, favorite products list, task lists etc. In this tutorial we will show you how to add a shopping cart functionality to your site. Local Storage vs Session Storage You can select between storing your data in the browser local storage or session storage. What are differences? Local Storage The Local Storage stores data with no expirati…