wCart Tutorial part 1. Introduction

[ben]

Welcome to this tutorial in which I will show you how to create a shopping cart using Wappler. Although I have touched on some styling features, most of the effort has gone into using Wappler’s State Manager and Database tools.

Not relevant to this exercise, but worth noting; I did the development for this tutorial in Docker as a personal experience.

For this tutorial we will be using Session Storage in combination with Arrays. It is important to note that we could have used Cookies or Local Storage with same result.

To explain the relationship between Sessions and Arrays

Session values are shared across the pages as long as the browser is open, while Arrays lose their values when moving from page to page. Using the above relationship ensures that the value of Arrays is the same for Page A, Page B or Page C.

This relationship is achieved by binding the data within a Session to the Array and updating the Session Storage every time the Array is updated

<dmx-session-manager id="session"></dmx-session-manager>
<dmx-array id="arrCart" dmx-bind:items="session.data.cart" dmx-on:updated="session.set('cart',items,{})"></dmx-array>

Next Part

[sitestreet]

Hi Ben. Thanks for doing this series of tutorials. I’m about to launch into them as the timing is perfect - I’m beginning a new website which has a shopping cart in it.

Quick question - why did you decide to use session variables instead of local storage?

[ben]

Hi Jon, I decided to use Sessions mainly because I am more au fait with it. The advantage in using Local Storage is that the contents of the cart remains until the user deletes the contents. With Sessions, the contents are lost the moment the browser closes down. It’s your choice, there should be no difference in the workflow.

[alexey]

Thanks, @ben!
Indeed very helpful tutorial.

I was puzzled at the beginning why you used both arrays and sessions, although you can save any type of data in the session - json, array etc.

Now I think I got the point. Array instance has much more capabilities in the Wappler GUI (add item, remove item, insert item after etc) compared to Session, which has only set and remove.