Your apps can combine API requests with the Dropsource Actions for string building and math calculations to create shopping cart functionality. This tutorial will walk you through an example shopping cart total display implementation that you can tweak to the detail of your own app and backend.

The example in this tutorial uses a shopping cart returned from an API as an array, with each item in the cart including a name, a price, and a quantity. The app displays the basket contents in a Table/List, and calculates the total, formatting it for display in the page.

If you want to try the functionality in this tutorial without using your own API, you can use the Dropsource example cart API that just includes a single endpoint which returns mock data you can use for learning.

• Include a text Element at the root level of your page to display the cart total. Bind the shopping cart returned from an API array to a dynamic Element in your page such as a List or Table. In the example spec each entry includes the unit price and the quantity to order. Display any fields you like by binding them to the Elements in the page.
• Add a Run API Request Action for the basket request, for example in page Loaded or Create.
• In the example spec, the prices are returned as integer values, but the app will display them in the Table/List in dollars and cents format e.g. $9.99. This will involve formatting the int values when the page receives them from the API. Select the repeating child of your dynamic Element (e.g. List Tile / Table Cell) and open its Load/Loaded Event.
  • First convert the int (cent) amount returned from the API to e.g. dollars by dividing it by 100. Add a Calculate Math Expression Action, adding a variable named price, choosing the item price API response field ( item_cost in the example spec) from the Data Source container. Divide it by one hundred in the Expression field: price/100.
  • Add another Calculate Math Expression Action to the Event, this time to accommodate cases where the value returned ends in 0, in which case the app will add a zero to the display (e.g. turning 10.0 into 10.00 so that it’s formatted like a price). Add a price variable with the same input as before, but this time use the modulus operator and 10 instead of 100. The app will use this to tailor the display to the price.
  • The app will build a string that incorporates the price value returned for each item, but that will be tailored to whether it is divisible by ten so that it can add the trailing zero if necessary. To check this, add an If Else Action, testing the output of the second Calculate Math Expression Action from the Action Data against zero (choose the Double value from the returned data).
    • In the True Event, add a Build a String Action, with a variable named display_price selecting the Action Data from the first Calculate Math Expression Action. In the Template include a dollar sign, the price surrounded by double curly braces, and a zero because in this case the price will not have two places after the decimal (since it’s divisible by ten): ${{display_price}}0.
      Add a Set Value Action to display the price string, choosing a Text Element inside the dynamic Element and selecting the Action data for the Build a String Action.
    • In the False Event, Add Build a String and Set Value Actions as in the True Event, but when building the string don’t include the trailing zero this time.
• When the results are received, the app will calculate the cart total and display it in the page. Create a Page Variable named amount, choosing type Swift/Java int/integer. In the page Event where you added the Run API Request Action, add a Set Value Action and use the arrows to make it run before the request Action – set the Page Variable to zero.
• With the request open in the API tab, add an Action to the 200 Event, choosing Iterate Through Array so that you can loop through the responses and calculate the total – choose the array from the Event Data.
  • In the nested Item Event, add a Calculate Math Expression Action to calculate the cost of the current item and add it to the total. Add variables: subtotal, choosing the amount Page Variable / curr_item, choosing the item cost from the Event Data / how_many, choosing the quantity from the Event Data. In the Expression builder, multiply the current price by the quantity and add the result to the total: subtotal+(curr_item*how_many).
  • Use a Set Value Action to update the Page Variable with the new total.
• After iterating through the array, prepare the price to display using the same technique you used for the prices in the list. Add two Calculate Math Expression Actions, dividing the amount by one hundred and calculating the modulus by ten as before.
• Add an If Else with the same logic you used earlier to test if the price ends in zero, then build and display the string in the text Element at the page root level.
  Include the trailing zero if the price is divisible by ten.
  Leaving the trailing zero off if the test returns false.

When the app runs it processes the cart data returned from the API and formats the display of the prices in each array item as well as the total.

If you want to carry out payment processing in your app, you can pass the total amount to the PayPal Action. As you can see in this tutorial, you can combine the math and string Actions to achieve a variety of processing types within your app.