Discuss

Creating a Shopping Cart with the Data Store Component

On this page

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 expiration date, and gets cleared only through JavaScript (Wappler dynamic events) or clearing the Browser cache / Locally Stored Data.

Session Storage

The Session Storage stores data only for a session, so the data is stored until the browser or the tab is closed.

Products page overview

We created a server action, which returns records from our database table. On the products page we created repeating row, which lists products from a database. The dynamic data used here is product id, name, price, description and an image per each of the products. There is also an Add To Cart button for each of the products, it will be used to add the selected product into the shopping cart later. You can add more info in the repeat region, this is just an example:

Screenshot_2|690x413

Creating the Shopping Cart

Let's setup our shopping cart. The functionality we are going to add in the steps below include: adding a product into the shopping cart, updating a product quantity, removing a product from the shopping cart.

Define Data Store Schema

The first thing we need to do is to define the Data Store Schema. In order to do this, we need to add the Data Store component on the page. Select App and click Add New Component:

Screenshot_3|690x413

Select Data and add Data Store:

Screenshot_4|690x413

Let's change the Data Store ID to something more meaningful, like cart:

Screenshot_5|690x413

In order to keep the products in the shopping cart, even if the users leave the site and come back later, we will use the browser local storage. So - don't check the Use Session Storage checkbox. Then click the Define Data Store Schema button:

Screenshot_6|690x413

Select cart and click the Add New Item button:

Screenshot_7|690x413

Then select Add Variable. We need separate variables for the different dynamic data items you need to use in the cart. In the most basic cases you would need: product id, product name, price and quantity.

Screenshot_8|690x413

We call this variable prd_id as it will store the product ID. Set the data type, which is going to be stored here, in our case this is a number:

Screenshot_9|690x413

Do the same with the rest of the variables which you need for your shopping cart:

Screenshot_10|690x413

We are done setting up the Data Store Schema.

Add products to the shopping cart

We already have the shopping cart structure defined, so let's start with adding product data into it. Select the Add To Cart button and add a new Dynamic Event:

Screenshot_12|690x413

Select Mouse > Click:

Screenshot_13|690x413

And select what needs to happen on click:

Screenshot_14|690x413

We need a functionality that automatically updates the product quantity, if the product has already been added to the cart, or insert it as a new product there if it's not in the cart yet. So select Update or Insert Record(s) action and click the add button:

Screenshot_15|690x413

In order to check if the product is already in the cart, we need to use it's unique id. So we are going to check the dynamic product ID, returned by our database. Under Which Records click the dynamic data picker to select your unique product ID:

Screenshot_16|690x413

This is the product ID binding, located under the repeat region in the data picker:

Screenshot_17|690x413

Then scroll down to New Values and select the dynamic values which you want to insert in your shopping cart:

Screenshot_18|690x413

Just select the corresponding dynamic bindings, under your repeat region in the data picker:

Screenshot_19|690x413

As we explained a few steps above, we need the quantity to automatically update if the product has already been added to the shopping cart:

Screenshot_21|690x413

This quantity field here is the quantity variable you added to the Data Store Schema earlier. For its value enter:

`quantity + 1` 

Where the word quantity is the name of the quantity variable in the Data Store Schema. Note that the value is enclosed in backticks:

Screenshot_22|690x413

Click select when you are done:

Screenshot_23|690x413

Setup the shopping cart layout

In our example we will show you how to display your shopping cart content in a table, inside a modal. Every time you add an item to the cart, the modal will fade in and show its content. Add new component:

Screenshot_24|690x413

Open Components and select Dynamic Modal:

Screenshot_25|690x413

Let's change the default modal title to Shopping Cart:

Screenshot_26|690x413

Then we want to have two buttons at the modal footer - Continue Shopping (which closes the modal) and Checkout (which redirects you to a checkout page):

Screenshot_27|690x413

Click the default Save Changes button and remove it:

Screenshot_28|690x413

Then rename the default Close button to Continue Shopping:

Screenshot_29|690x413

And add another element after it:

Screenshot_30|690x413

Under Forms select Anchor Button:

Screenshot_31|690x413

Change the Anchor Button text to Checkout:

Screenshot_32|690x413

We set its style to Primary:

Screenshot_33|690x413

And then select the link it should point to:

Screenshot_34|690x413

This is our checkout page. You can select this later, if you haven't added a dummy chekout page yet:

Screenshot_35|690x413

Then we remove the default content in the modal body:

Screenshot_36|690x413

We want to add a dynamic table, listing the Data Store component content. Select modal body and add new component inside:

Screenshot_37|690x413

Under Generators select Bootstrap 4 Table Generator:

Screenshot_38|690x413

And select the dynamic data source for it:

Screenshot_39|690x413

Select the data element under the Data Store component:

Screenshot_40|690x413

Table columns have been automatically added, depending on your Data Store schema. We need another column, where we will place 3 buttons - increase quantity, decrease quantity and remove item. So we add another column in to the table:

Screenshot_41|690x413

Let's call it Actions and set its content type to custom:

Screenshot_42|690x413

Then customize the table layout and options. In our case we don't need to show the item id and product unique id to the users, so we delete these columns:

Screenshot_43|690x413

Click OK when you are done customizing the table options and layout:

Screenshot_44|690x413

You can select the modal and change its size, if needed:

Screenshot_45|690x413

As we are using the Data Store component for dynamic data source, there is no data displayed on the page - its initial values are empty, so you won't see anything repeated in the table. In order to be able to add custom data in the dynamic table we need to turn the App Connect mode off:

Screenshot_46|690x413

Then click in the custom column which we created and add a new component:

Screenshot_47|690x413

Select Button:

Screenshot_48|690x413

We will need 3 buttons here - decrease quantity, increase quantity and remove item. So just duplicate the buttons 2 times.

Select the first button, this will be the decrease quantity button. Double click to edit, delete its text and click the font awesome button:

Screenshot_49|690x413

Find a suitable icon - for example the following one:

Screenshot_50|690x413

Do the same for the other two buttons - increase quantity and delete item. When you add the icons in the buttons let's style them. For the increase and decrease quantity we set the style to Primary and size to Small:

Screenshot_55|690x413

For the delete item button we set the style to Danger and size to Small:

Screenshot_56|690x413

We are done with our simple shopping cart layout.

Update shopping cart items quantity

Now let's make buttons work - we are going to add the increase/decrease quantity and remove item functionality to them. Select the decrease quantity button and add new dynamic event:

Screenshot_57|690x413

Select Mouse > Click:

Screenshot_58|690x413

Then select what needs to happen on click:

Screenshot_59|690x413

Under the Data Store component, select Update Record(s):

Screenshot_60|690x413

Then, let's select which record to update. Here we are going to use the default record ID returned by the Data Store component:

Screenshot_61|690x413

Its value should be the $id element under the table repeat region, in the data picker:

Screenshot_62|690x413

Here we need to update (decrease) the quantity so click the dynamic data picker icon for the quantity field:

Screenshot_63|690x413

We need to subtract 1 from the current quantity, so we select the quantity binding under the table repeat and add - 1 to it, so it becomes: quantity - 1:

Screenshot_65|690x413

Click Select:

Screenshot_66|690x413

We only need the decrease quantity button to be available if the quantity is more than 1. With the button still selected, add new dynamic attribute:

Screenshot_67|690x413

Select Input > Disabled:

Screenshot_68|690x413

And then click the dynamic data picker, to select when should it be disabled:

Screenshot_69|690x413

Select the quantity binding, under the table repeat region and add == 1 to it:

Screenshot_70|690x413

Now, select the increase quantity button and add a new dynamic event:

Screenshot_72|690x413

Select Mouse > Click:

Screenshot_73|690x413

And select what needs to happen on click:

Screenshot_74|690x413

Under the Data Store component select Update Record(s):

Screenshot_75|690x413

Then select which record to update. Here, again, we are going to use the default record ID returned by the Data Store component:

Screenshot_76|690x413

Its value should be the $id element under the table repeat region, in the data picker:

Screenshot_77|690x413

Here we need to update (increase) the quantity, so click the dynamic data picker icon for the quantity field:

Screenshot_78|690x413

We need to add 1 to the current quantity, so we select the quantity binding under the table repeat and add + 1 to it, so it becomes: quantity + 1:

Screenshot_79|690x413

Click Select:

Screenshot_80|690x413

Remove items from the shopping cart

The only thing left is to add the remove item functionality to the delete button. Select the button and add new dynamic event:

Screenshot_82|690x413

Select Mouse > Click:

Screenshot_83|690x413

Then select what needs to happen on click

Screenshot_84|690x413

Under the Data Store component select Delete Record(s):

Screenshot_85|690x413

Again we use the record ID returned by the Data Store component:

Screenshot_86|690x413

And select the $id under the table repeat region:

Screenshot_87|690x413

And you are done, your buttons are now fully functional and you can update the items quantity or remove items from the cart.

Show the cart when an item is added

We want to show the cart, when an item has been added to it. This means we need to show the modal once the Add To Cart button is clicked. We can turn on the App Connect mode now, then select the Add To Cart button:

Screenshot_88|690x413

We already have a dynamic event added on click (add product to cart), so let's add another one:

Screenshot_89|690x413

Under Modal select Show and add it to the events list:

Screenshot_90|690x413

Click Select:

Screenshot_91|690x413

Display total price in the cart

You can use the App Connect Data Formatter to display the total price of all the items in the cart. You can do this per row (per item) and for the whole cart. In our example we will show you how to do this for the whole cart, as we didn't add a total column per row.

We'd like to show the totals below the table, so select the table and click - insert after:

Screenshot_1|690x413

Select Content > Paragraph:

Screenshot_2|690x413

Let's align the paragraph right:

Screenshot_3|690x413

Then double click to edit its default text. We enter: Total Amount:

Screenshot_4|690x413

And then we click the dynamic data picker icon:

Screenshot_5|690x413

Select the data element under the Data Store component:

Screenshot_6|690x413

We need to sum each row (or item) totals. So each product price multiplied by its quantity. So the result will be: product1 * quantity1 + product2 * quantity2 ... product99*quantity99

Open Collections and select Sum:

Screenshot_7|690x413

Click Property and click the dynamic data picker icon:

Screenshot_8|690x413

Select the product price and add * quantity to it:

Screenshot_9|690x413

Now we have the sum of each row (or item) total price:

Screenshot_10|690x413

Click Select:

Screenshot_11|690x413

And you are done. Just format the text as you need:

Screenshot_12|690x413

Show shopping cart button

A useful addition to our shopping cart would be a button which opens it, so you can preview its contents. This button will also show how many items are currently added in the cart. Let's start by adding a button somewhere on the page:

Screenshot_1|690x410

We add a regular button:

Screenshot_2|690x410

Select a style for it:

Screenshot_3|690x410

Then double click its text and enter Shopping Cart:

Screenshot_5|690x410

We want to show the number of items added in the cart, so click the dynamic data picker button:

Screenshot_7|690x410

Select the data element under the Data Store component, then click the data formatter icon:

Screenshot_8|690x410

Open collections and select sum:

Screenshot_9|690x410

Select a property to sum:

Screenshot_10|690x410

This should be the quantity for each of the rows/items:

Screenshot_11|690x410

Click Select:

Screenshot_13|690x410

And you are done. Now add new dynamic event:

Screenshot_15|690x410

Select Mouse > Click:

Screenshot_16|690x410

And select what needs to happen on click:

Screenshot_17|690x410

Under Modal select Show and add it:

Screenshot_18|690x410

Click Select:

Screenshot_19|690x410

Now you have a button which shows the number of items added in the shopping cart and also opens it on click.

Checkout Page Overview

In order to be able to use the Data Store data on another page, let's say a checkout page there are two requirements you need to follow:

  1. The App ID must be the same as on the page where you defined the Data Store:

Screenshot_1|690x410

  1. The Data Store component ID must be the same as the one used for the shopping cart:

Screenshot_2|690x410

Following these two simple rules you can create your own custom checkout page:

Screenshot_3|690x410

Here you can use the data from the Data Store component to add a dynamic table, the same way as in your shopping cart:

Screenshot_4|690x410

The data from the Data Store component is available in the data picker dialog:

Screenshot_6|690x410

So - go ahead and finish the Checkout Page layout, using what you learned in this tutorial :slight_smile:

Conclusion

That's how easy you can add a shopping cart functionality using the Data Store component. This is just a simple example of what can be done, you are free to fully customize every aspect of this shopping cart tutorial as per your needs.

shopping_cart|689x393