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.
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.
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.
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.
Variables
This Web Flow has the following Variables saving the information and choices of the user:
- selected_example
- first_name
- last_name
- phone
- selected_product
- selected_term
- back_to_summary
- monthly_cost
Events
The Order Placed Event contains the following Variables of type Text:
- first_name
- last_name
- 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.
Use Cases
- Present the app builder web flow that allows a user to edit previous choices of an order