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.

1. add a Server Connect to populate the products area.

This is outside the scope of this example

2. add the Session Storage Manger

3. set the session parameters

4. add an Array

5. under Array Properties -> Items


6 add an on-update action

I am not sure how I arrived at this, but the result is as:
<dmx-array id=“arrShoppingCart” dmx-bind:items=“” dmx-on:updated="session.set('cart',items,{})">

7. create two columns to house the products and the session storage


8. in the products column, create a repeat children row


9. in the row, add a card within a column (col-6)


10. populate the card with title, inputs and a button

11. create an on-click event for the button and select the Add Unique Item action

12. for the Value, enter


13. in the session storage column add a table with four columns and one row


14. convert the table body to a repeat children


15. apply the session for the Expression

16. add a binding for each of the first 3 cells

17. add a button to the last cell

18. add a click event to the button with a remove from array action

19. the value for remove item is obtained from

20. the session storage section should look like

There are still a few problems that I have to deal with before this example can be used for a shopping cart, at least it is a start. Please enjoy.