Learn how to prototype web and mobile apps

Add a shopping cart to your interactive prototypes

In this tutorial we’ll learn how to simulate an online shopping cart using Data Masters, Data Lists and variables.

Shop cart

1) Create a Data Master named “Product” with the following fields: Name, Description, Photo and Price. They must all be ‘text’ type except for the ‘Photo’ field, which will be a file type. Click OK.

2) Edit the Data Master and enter a few sample products with their price using the ‘View and edit records‘ tab. Note: in the ‘price’ field, only use a number value, without any currency symbol.

3) Drag a Data List widget to the canvas and select the “Product” Data Master and all its fields.

4) Add a column to the right-hand side of the Data List, and drag a Button inside the first row (not the header), with the text “Add to cart”. Each time the user clicks the button, the product shown in the row should be added to the cart.

5) Select the Button and add an ‘On click’ + “Set Value” event. Then select the tab ‘Variables’ and create a variable named “Product”. In the same dialog, click the “Calculated” link to open the expression builder. There, select the row that holds the data in the Data List from the outline (typically named Current_Row1) and drag it to the expression. Then drag the “DATA+” function, from the Functions tab. Finally, in the second gap, drag the variable ‘Product’. Click OK twice to go back to the canvas.


6) Now we need to create another screen that will list the products selected by the user and the total price of the order, with and without VAT. Create a new screen and drag a Data List into it. Choose the ‘Product’ Data Master and all its fields, and position the Data List wherever you wish.

7) Click on the screen in the outline, go to the Events tab and add an ‘On page load’ + ‘Set value’ event. Select the entire Data List (it’s easier using the outline) and click the ‘Calculated’ link. The expression builder will show up. Drag the “Product” variable onto the gap and click OK twice. Now, the Data List will display only the contents that are in the Variable, i.e. only the products that have been added to the cart in the first screen.

8) Now we want to show the total price of the products with and without IVA. Add six Text widgets to the canvas and position them one next to the other. In the first one write ‘Total price’ and leave the one next to it empty. In the third one, write ‘IVA’ and in the one next to it write the percentage (without symbol) you want to apply, i.e. 20. Finally, in the fifth Text widget, write ‘Total price + IVA’ and leave the last one empty.

shopping cart

9) Select the canvas background and click the gear icon next to the word Do in the Events tab, next to the ‘Set value’ event you had created before. Add another ‘Set value’ event, selecting the empty text widget next to ‘Total price’ and click the ‘Calculated’ button. Drag the SUM function to the expression builder, and then drag the entire Data List in the first gap and the Data Master field ‘price’ in the second one. Click OK twice. In simulation mode, the Text widget will now show the total price of the products added to the cart.

10) Go back to the events tab, click the word Do again and add another ‘Set value’ event, this time selecting the Text widget next to the ‘Total price + IVA’ text. Click on ‘Calculated’ and build an expression dragging the “%” function, the IVA value Text (’20’) to the first gap, and the Text that contains the total price to the second one. Place the “+” function at the end of the expression, so that the entire “%” function is set as the first parameter of the total, and drag once more the total price Text to the gap. Click OK twice. In simulation mode, this Text will display the price with the % of IVA included.


11) Go back to the first screen and add a Button below the Data List. Write ‘Go to Shopping cart’ inside it and drag it to the second screen to link it to it.

That’s it! You can now click ‘Simulate’ and try your shopping cart!

Next tutorial > Another example of a shopping cart


  1. Cristianne Medeiros

    June 16, 2015 at 12:32 am

    Great tutorial, but I have a doubt: how to do it using the new Data Grid instead of Data Lists?

    I have a page that lists all products. Once I select a product I show it on a detail page. From there I can set the amount desired and add the product to the cart.
    I’m struggling in storing the product codes on a variable in order to use them latter. When I try to use the same logic of this tutorial, it won’t let me do it, telling that I should have a list to use the ADD function. Can you help me?

    • Lidia Rodriguez

      July 3, 2015 at 10:10 am

      Hi Cristianne, you can store the Grid_cell_1 on the variable and then use the function ‘Select’ to choose the data grid field you want to use. If you need further assistance please write an email to jim.support@justinmind.com and attach your .vp file and we can help you solve it.