Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to build an advanced shopping cart in your prototypes


This tutorial will show you how to add and remove items from a shopping cart.

You can download the below example here.

shopping-cart

1) Go to the Data Masters tab and create a new Data Master. Name it ‘items’ and create two fields: name and price. Then click OK.

2) Double-click on the Data Master you’ve just created and select the tab ‘view and edit records’. Write some example data there. Then click OK. 

3) Now drag a Data List widget to the screen. Name it ‘items_list’ and select the Data Master and all its fields. 

Tip: you can use the same Data Master you created for the previous tutorial on how to add a shopping cart to your interactive prototypes, but selecting only the ‘name’ and ‘price’ fields when you add the Data List to the canvas.

4) Select the cell in the first column, the one below the ‘name’ header . Go to the Properties tab and make sure that the layout is set as ‘free layout’. Now we will place all the content in this cell (you will need to resize it until all the content fits in): move the Text widgets from the other cells to the first one (incl. the text ‘price’ from the header of the second column). Remove the other column and leave just the first one. Arrange all the content inside it until it matches the example (see image below). Finally drag a Button (‘Add to cart’), a Text widget (‘quantity’) and an Input text field (place it just next to the ‘quantity’ text) inside it too. 

Data-driven prototypes: add a shopping cart

5) Go to the Data Masters tab and create a new Data Master. Name it ‘invoice_line’ and create three fields: item, price and quantity. Then click OK.

6) Double-click on the Data Master you’ve just created and select the ‘View and edit records’ tab. Delete all the example values. Then click OK.

7) Now drag a Data List widget to the same screen. Name it ‘cart” and select the Data Master ‘invoice line’ and all its fields. 

8) Drag a Dynamic panel to the canvas, double click on it and insert the first Data List into panel 1. Create a new sub-panel and insert the second Data List into it. Select panel 1 and then select the ‘Add to cart’ Button. Go to the events tab, and add an ‘On click’ + ‘Data Master action’. Select the data master ‘invoice line’ and click the ‘new’ button. Then build this expression, dragging the product name input field, the product price input field and the quantity input field to the expression builder:

Data-driven prototypes and shopping cart: add an expression

9) Click OK twice. Now click on the gear icon next to the word ‘do’ and select the option ‘add action’. Add a ‘Set value’ action, selecting the Data List that is inside panel 2. Click the ‘Calculate’ button and drag the ‘invoice line’ Data Master (the second one you created) to the expression builder. Click OK twice. That will refresh the Data List in panel 2.

10) Now click on the gear icon next to the word ‘do’ and add a ‘Set active panel’ action, selecting panel 2 as the active one. Click OK.

Now you need to show the total price of the selected items.

11) Select panel 2 and drag a Text widget to it, where the total price for the items in the cart will be displayed. Put the Text in a place where it doesn’t get overlapped by the Data List when that Data List grows.

12) Select panel 1 and select the button ‘Add to cart’. Click on the gear icon next to the word ‘do’ and select the option ‘add action’. Add an ‘On click’ + ‘Set value’ event, selecting the Text that will hold the total price that is inside panel 2. Click the ‘Calculated’ button and build this expression, dragging the SUM function, the Data Master, the ‘quantity’ field, the X function and the ‘price’ field to the expression builder:

Data-driven prototypes and shopping cart: add an expression

13) Click OK twice. Now each time you add an item to your cart, the total amount will be updated.

14) Drag a Button widget below the Data List in panel 1 and link it to the second panel.

15) Right click on the Data List in panel 2 and select ‘New column‘. Now drag a Text widget into the newly created column, and write ‘Remove’ in it. Select it and add an “On click” + “Data master action” event, selecting the ‘Delete’ button under the Data Master. Click on the ‘Calculated’ button and create the following expression, dragging the Data Master and the first row of the Data List (not the header) to the expression builder. Click OK twice.

Data-driven prototypes and shopping cart: add a value expression

That’s it! You can now click ‘Simulate’ and enjoy!

Next tutorial: Speed up your data-driven prototyping with the OnDataChange


 

Related tutorials:

How to delete rows in a Data List

How to add rows to a Data List

How to add a shopping cart to your interactive prototypes