Order Summary Web Flow Template Order Summary Web Flow Template

Order Summary Web Flow Template

Daiana Gallardo Daiana Gallardo

ordersummary0.png

 

This Web Flow template has four Web Pages with pre-configured components that guide the user through their order summary, allowing them to edit the information presented in each section.

Order Summary template components

This Web Flow contains four Web Pages with the following components:

Input Page

  • A Label control displaying the title. 
  • A Dropdown List control presenting the different orders.
  • A Button control with the following Actions:
    • A Condition based on what the user selects in order to show the corresponding order.
    • A Navigate To Web Page action that takes the user to the Personal Info Web Page.

orderwebpage1.png

Personal Info Page

  • A Label control displaying the title.
  • Label controls introducing each input field.
  • Four input fields: two Text Inputs for the user’s name and last name, an Email Input and a Phone Input for the user to enter their email address and phone number, respectively. 
  • A Continue Button control with the following actions:
    • Variables to save the information entered into each of the above mentioned fields.
    • A Condition:
      • If the user clicks on Back to Summary they are directed to the Order Summary Web Page.
      • If the user does not click on Back to Summary, they are directed to the Product Info Web Page.

orderwebpage2.png

Product Info Page

  • A Label control displaying the title. 
  • A Dropdown List control presenting the different periods of time.
  • An Text Input field with the selected product.
  • A Currency Input field for the amount of the purchase.
  • A Continue Button control with the following actions:
    • Variables to save the information entered into each of the above mentioned fields.
    • A Navigate to Web Page action taking the user to the Order Summary Page.

orderwebpage3.png

Order Summary Page

  • A Label control displaying the title including the Variable first_name. 
  • An Image control for the Personal Info.
  • A Container including the Name, Last name, Email and Phone the user entered in the Personal Info Page.
  • An Edit Button for users to click and be taken to the Personal Info Page, in case they want to modify their personal details.
  • An Image control for the Product Info.
  • A Container including the Selected product, billing term and price the user entered in the Product Info Page.
  • An Edit Button for users to click and be taken to the Product Info Page, in case they want to modify the product details.
  • A Continue Button that runs the Order Placed Event.

orderwebpage4.png

Variables

This Web Flow has the following Variables saving the information and choices of the user:

Text

  • selected_example
  • first_name
  • last_name
  • email
  • phone
  • selected_product
  • selected_term

Boolean

  •  back_to_summary

Currency

  • monthly_cost

Events 

The Order Placed Event contains the following Variables of type Text: 

  • first_name
  • last_name
  • email
  • phone
  • selected_product
  • selected_term
  • monthly_cost

This Event is created as a web flow event and, in Journey Builder, an action or a node can be added to it to continue the application’s path.

orderjourney.png

Use Cases

  • Present the app builder web flow that allows a user to edit previous choices of an order