Order Checkout-Submission Content Managed Webpage Area Login

Contents

  1. Prerequisites
  2. Area Overview
  3. Area Formats
  4. Area Settings
  5. Dependent Configurations
  6. Recomendations

This document describes how a Order Checkout/Submission area works when being displayed on a content managed web page within the TOTECS platform. This area is used by users logged into the TOTECS project to submit an order containing the products that they added to their current shopping basket.

Prerequisites

Please ensure that you have read and understand the following topic links before reading on.

Area Overview

The Order Checkout/Submission area allows users who have logged in to the TOTECS project to have the ability to create, and submit an order containing products that was added to their active basket.

The order checkout process is broken up into a number of steps, these are:

  1. The user enters their personal details and preferences for the order.
  2. [optional] The user is redirected to PayPal's website if the user chose to pay for the order using PayPal.
  3. The user reviews the purchase order and confirms the terms and conditions of ordering.
  4. [optional] The user fills out credit card payment form if the credit card payment method chosen from the first step.
  5. The user submits the order, which is then marked as unprocessed and an email confirmation is sent to their Email address, as well as an administrator's Email address. Additionally the order is attempted to be sent to the Accounting/Enterprise Resource Planning(ERP) system if possible.
  6. The user sees an order confirmation, notifying that the order has been successfully processed.
  7. [optional] The user views the order confirmation sent to their Email inbox.

For each of these steps their are a number of formats that are used to tailor the layout and styling of each screen. For each step the area will dynamically redraw itself with the next order screen displaying the relevant formats.

When users checkout they must select a delivery address to associate with the order. The delivery address can either be an address associated with their customer account, or they can create new delivery addresses which will be remembered for the next time they checkout. There are also a number of options that the user can enter against the order, such as payment method, carrier, instructions, and notification Email address.

This area handles the ordering process very similar to the Guest Order Checkout/Submission content managed web page area, except that area it doesn't require the user to be logged in, but instead they have to enter all the address fields, Email, and the reCAPTCHA form in order to submit an order.

Area Formats

The area contains the following formats:

Order Details Form

This format displays once within the area when the web page first loads the area on the page. The format contains hooks that allows the user to choose billing and delivery addresses for the order, as well as their preferences for the order. It also allows the user to create new delivery addresses.

Order Review

This format displays once within the area after the user has clicked on the "next" link from within the Order Details Form format. The formats displays all the details of the order which allows the user the review and ensure that the order is correct. The details it displays includes the billing address, delivery address, totals, surcharges, taxes, as well as a list of formatted product records.

Order Products Header

This format displays once within the area and is embedded in the Order Review format, placed above the list of product records. It allows the product data to have a heading placed above it or product columns to be set out.

Order Products Footer

This format displays once within the area and is embedded in the Order Review format, placed below the list of product records.

Order Product Record

This format can display zero-to-many times within the area and is embedded in the Order Review format. It displays the details of a single product record, including the product name, description, totals and taxes.

Order Product Deal Record

This format can display zero-to-many times within the area and is embedded in the Order Review format. It displays the details of a single deal that has been applied against a product record. The format displays after its Order Product Record format.

Payment Credit Card Form

This format displays once within the area after the user has clicked the submit button link in the Order Review format, and the user chose the Credit Card payment method within the Order Details Form format. The format displays a form that allows the user to fill in their credit card details to pay for the order.

Payment Direct Deposit Detail

This format displays once within the area and is embedded within the Order Submission Success Message format if the user chose the Direct Deposit payment method within the Order Details Form format. The format displays details of a bank account for which the user can bank transfer money into, to pay for the order.

Order Submission Failure Message

This format displays once within the area after the user clicks the Submit button link from the Order Review format or Payment Credit Card Form. The format is used to display a message to the user if the order could not be sucessfully submitted. A number reasons can cause the format to display, including: a server error occurred while trying to update the order status, the paypal payment could not be processed, the user's session has terminated.

Order Submission Success Message

This format displays once within the area after the user clicks the Submit button link from the Order Review format or Payment Credit Card Form. The format is used to display a message to the user if the order was sucessfully submitted. The format can be used to display credit card payment receipt number, or direct deposit bank account details. The format can also be used to aid directing the user back to main web site, or to access their order history.

Layout of Formats:

Step 1: Order Details:

Order Details Form Format

Step 3: Order Review:

Order Review Format

Order Products Header Format
Order Product Record Format
Order Product Record Format
Order Product Deal Record Format
Order Products Footer Format

Embedded Order Product Record Formats: 0 to Many

Embedded Order Product Deal Record: 0 to 1 per Order Product Record format

Step 4: Credit Card Payment Form

Paymemt Credit Card Payment Form Format

Step 6: Order Submission Success

Order Submission Success Format

Payment Direct Deposit Detail Format

Embedded Payment Direct Deposit Detail Format: 0 to 1

Step 6: Order Submission Failure

Order Submission Failure Format

Area Settings

Below are the following settings that can be configured through the area's editor when modifying the area in the Web Page Editor, within the Administration Centre.

Setting Label Description
Print Button To Target Page: The web page that users will be redirected to if they click on an element embedded in Order Submission Success Message format using the print hook.
Order Result Link To Target Page: The web page that users will be redirected to if they click on an element embedded in Order Submission Success Message format using the order result hook. This can set a link to a web page such as the user's order history, or a home page.
Details Back Link To Target Page: The web page that users will be redirected to if they click on an element embedded in the Order Details Form that contains the back hook. This can be used to redirect users back to a basket summary web page.

Dependent Configurations

In order for the the area to display the following configurations are required to be set up:

  • The user must be assigned to a facility permission role that has the Submit Order permission set to Allow.
  • The area must be created on a secure content managed web page to ensure that the users details and/or credit card information are kept safe when being transferred to the server.
  • To allow users to choose the credit card payment method to pay for the order, the customer account assigned to the guest user must have the credit card payment method allowed for the account. Additionally a merchant bank account must be set up. Lastly the credit card settings must have been configured within the Payment settings interface from the Online Store menu in the Administration Centre.
  • To allow users to choose the direct deposit payment method to pay for the order, the customer account assigned to the guest user must have the direct deposit payment method allowed for the account. Additionally the direct deposit bank account settings must have been configured within the Direct Deposit settings interface from the Online Store menu in the Administration Centre.
  • To allow users to choose the PayPal payment method to pay for the order, the customer account assigned to the guest user must have the paypal payment method allowed for the account. Additionally an account must be set up with PayPal. Lastly the PayPal settings must have been configured within the Payment settings interface from the Online Store menu in the Administration Centre.

Recomendations

  • Set up the Order Checkout/Submission area on a content managed web page that is linked from a Basket Product Details area on another web page. The Basket Product Details area contains a setting labelled "Checkout link to target order submission page" which allows you to specify the web page containing the Order Checkout/Submission area. When a logged in user clicks on the Checkout link in the Basket Product Details area it will correctly link the user to the order page.
  • In the Order Details Form you may not wish for the user to fill all the fields, including the mandatory fields. To get around this restriction wrap these hooks with HTML div elements that contain a CSS style set to display:none. This will ensure that the fields are still in the Order Detail form, but will be passed to the server with their default values.
  • Consider adding a link in the Order Submission Success Message to a web page containing a User Details/Favourites/Orders content managed web page area. The area has the ability to show all the orders submitted by the user which allows them to view the order details at any later stage.