Building a shopping cart

This tutorial will show you how to create a shopping cart in your prototypes. You’ll learn how to add and remove items, and see a cumulative price of those items in your cart.
shopping-cart

Follow the steps below to learn how:

  1. Go to the Data Masters tab and create a new Data Master. Name it ‘items’ and create two fields: name and price.
  2. Double-click on the Data Master you’ve just created, select the tab ‘view and edit records’ and write some example data in both fields.
  3. Drag a Data List widget to the Canvas. Name it ‘items_list’ and select the Data Master you created to populate it.
  4. Select the first cell in Current_row_1 (the one below the header). Go to the Properties palette and make sure that the layout is set as ‘free layout’.

    Resize the row until it fits all the Text widgets from the other cells.

    Now, 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-shopping-cart
  5. Now, go to the Data Masters palette and create another new Data Master. Name it ‘invoice_line’ and create three fields: item, price and quantity.
  6. Double-click on the Data Master you’ve just created and select the ‘View and edit records’ tab. Delete all the example values.
  7. Drag another Data List widget to the same screen, name it ‘cart’ and select the Data Master ‘invoice line’ and all its fields to populate the Data List.
  8. Drag a Dynamic Panel widget to the Canvas, double click on it and insert the first Data List into Panel 1. Create a new sub-panel by clicking on the ‘+’ icon and insert the second Data List into it.
  9. Go to Panel 1 and select the ‘Add to cart’ Button. With the button selected, create an “On Click” + “Data Master Action – New” event, and select the Data Master ‘invoice line’. In the expression dialog that appears, drag the “name” Input Text Field in the Data List into the first space, the “price” Input Text Field into the second space, and the “quantity” Input Text Field into the last space.
    data-driven-prototypes-shopping-cart-expression
  10. Look back to the Events palette to the Event you just created. 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 as the target of the action. For the value, click ‘Calculated’. In the expression builder, drag the ‘invoice line’ Data Master (the second one you created) to the first space. This will refresh the Data List in Panel 2.
  11. Now click on the gear icon next to the word ‘do’ and add a “Set Active Panel” action, selecting Panel 2 to be set as active.
  12.  
    Now you need to show the total price of the selected items.

  13. Select Panel 2 and place a Text widget inside. This will display the total price for items in the cart.
  14. 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 element in Panel 2 that will display the total price as the target of the action. Click the ‘Calculated’ button and in the Calculated Expression builder, drag the SUM function to the open space in the expression. In the first space that appears, drag the Data Master, followed by the ‘quantity’ field, the X (multiply) function and the ‘price’ field.data-driven-prototypes-shopping-cart-expression-quantity-price
  15. Drag a Button Widget below the Data List in Panel 1 and create an “on Click” + “Set Active Panel” event, setting Panel 2 as active.
  16. 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 shopping cart remove items

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

You can download this example here.