How to prototype a simple shopping cart

Here you will learn how to add and remove items from a shopping cart.

Here’s how you build it:

View

  • Go to the Data Masters palette, create a new “Data master”, and name it “Store”, create three attributes: “Name”, “Price” and “Total”, then press “Ok”.
  • Right-click on the “Data master” you’ve just created and select “View and edit records”, write your example data there, and press “Ok”.
  • Select a “Data list” from the “Dynamic content” section and place it on the canvas; the “New Data List” window will be enabled; give your list the name “Items”, next choose the “Data master” you have created and select all the attributes.
  • At the top of the canvas place two “Text” and write “$” in both. Next to it, put an “Input text field”, and two buttons. In the first button write “Add to cart”, and in the second write “Drop”.
  • In the cells of the “Current row”, while pressing Command (Mac) / Control (Windows), drag the texts “$” next to the [Store.Price] and [Store.Total] entries. From the cell containing the [Store.Quantity] input, remove this input and Place the “Input text field” and the “Add to cart” button inside the cell. Lastly, place the “Drop” button inside the [Store.Total] input cell.
  • Below your “Data list”, place two text and write “$” and “Total”; next, place a second text and write “0”.

Events

Select the “Add to cart” button, go to the Events palette and click “Add event”. 

  1. In the dialog box, click on “Choose Trigger”, hover over the “Mouse” section, and select “on Click.”
  2. In “Choose Action”, select “Set value to an element” and click on the input [Store.Total].
  3. Select the “Calculated” radio button for the value and click “Add expression”. 
  4. In the builder’s first field, drag the “store.price”, next the function “X” to multiply, and last the “Input text field” from the “Quantity” column. Click “Ok” and “Ok” to finish creating your event.

With the “Add to cart” button selected, go back to the Events palette and click on “+” to create a new event.

  1. In the dialog box, click “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
  2. In “Choose Action”, select “Data master action”, and click on “Modify”.
  3. The expression builder will appears with the expression “Modify” by default. Drag the “Current row” in the first field, and on the last field, drag the [Store.Total] input. Click “Ok” and “Ok” to finish creating your expression.

With the “Add to cart” button selected, go back to the Events palette and click on “+” to create a new event.

  1. In the dialog box, click “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
  2. In “Choose Action,” select “Set value to an element”, and select the “0” next to the “Total”, below your “Data list”.
  3. Click the “Calculated” radio button to “Add expression”.
  4. Drag the “Sum” function. In the first field, place the “Data master” from the Data Masters tab, and in the second field, place the “Total” field of the “Data master”. Click “Ok” and “Ok” to finish creating the event.

Select the “Drop” button, go to the Events palette and click “Add event”. 

  1. In the dialog box, click “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
  2. In “Choose Action,” select “Set value to an element” and click on the [Store.Total] input, for the value click on the “Fixed” radio button  and write “0”.

With the “Drop” button selected, go back to the Events palette and click on “+” to create a new event.

  1. In the dialog box, click “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
  2. In “Choose Action”, select “Data master action”, and click on “Modify”.
  3. The expression builder will appears with the expression “Modify” by default. Drag the “Current row” in the first field, and on the last field, drag the [Store.Total] input. Click “Ok” and “Ok” to finish creating your expression.

With the “Drop” button selected, go back to the Events palette and click on the “+” to add a new event.

  1. In the dialog box, click “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
  2. In “Choose Action,” select “Set value to an element”, and select the “0” next to the “Total”, below your “Data list”.
  3. Click the “Calculated” radio button to “Add expression”.
  4. Drag the “Sum” function and from the Data Masters tab, place the Data master “Store” on the first field, next, place the “Total” field of the “Data master”. Click “Ok” and “Ok” to finish creating the event.

With the “Drop” button still selected, go to the Events palette and click on “+” to add an event”.

  1. Click “Choose Trigger” in the dialog box and select “on Click”.
  2. In “Choose Action,” select “Set value to an element” and click on the “Input text field” of the “Quantity” column.
  3. For the value click on the “Fixed” radio button  and write “0”.

Simulate your prototype.