Shopping Cart

In the second example, simulate the Shopping Cart design pattern widely used in online shopping. Start with a list of products from which the user can add items to his shopping cart. Also add a button to confirm the purchase and display its details with the final price.

Create a Data Master named "Product" with the following attributes: Name, Description, Photo and Price. They must all be text type except for the Photo, which will be a file type. Click OK.
Edit the Data Master and enter a few products with their price using the Add Instances tab.
Move a List type screen component to the canvas and select Data Master "Product".
Add a button to the row with the text "Add to cart". To indicate that each time the user clicks it, the product shown in the row is added to the "Product" variable, go to the Event tab, click "Create Interaction" and "Set Value" and choose the "Product" variable from the right-hand panel.
Click the Calculate button and drag the "Product" variable to the gap in the expression.
Drag the "+" function, from the List tab to make this variable the first parameter. Drag the row of the data table to make it the second one.
Important: the cursor changes into a right pointing arrow when you select the row.
Click OK on the Expression Editor and the Events.

In another screen, simulate a list of the products selected by the user and the total price of the order, with and without VAT.

Now go to another screen of the prototype and drag a data table component into it.
Choose Data Master "Product", select the background and, in the Event tab, click On Load Screen.
Click Create Interaction and Set Value.
In the right-hand panel, select the entire data table and click the Calculate button.
Drag the "Product" variable to the gap. Click OK. In the events dialog box, click OK again. Now only the content of the "Product" variable shows when the screen loads the data table.

Next simulate the total price of the products and apply the VAT rate.

Drag into the canvas the three Label components.
Select the background and click the arrow next to the word Do on the Event tab.
Choose the Add Action and Set Value option.
Select the first label and click the Calculate button.
Drag the Total function, inside the List tab, into the gap of the expression.
Drop the entire data table into the first gap.
Note: if you correctly dragged the table, the text "data table" appears below the value of the first gap.
In the second gap, drag the "Price" attribute from the "Product" Data Master. Click OK.
Click OK again in the Events dialog box. In simulation mode, the label will show the total of the products' prices in the data table.
Click the word Do again and select the Set Value option.
Choose the third label that is left on the canvas and click Calculate.
Drag the "%" function to the expression (in the General tab). Place the second label in the first gap and the first label in the second (which contains the total).
Place the "+" function so that the entire "%" function is set as the first parameter of the total. Drag the first label to the second gap. Click OK.
Click OK again in the Events dialog box. This label displays the price with the % included.
Edit the value of the second label and type 18 (or the VAT rate for the products with which you are working).
Link the product screen to "Content of shopping cart".
Simulate.

Click the Add to Shopping Cart button a few times. Click the link. Now the data grid contains only the products you selected in the previous screen, and the labels show the total price. You also know how much the package will cost, VAT inclusive.

Back to all Tutorials