Table of Contents

Checkout

The components which make up the Checkout feature in Swift

Swift ships with a checkout design which guides the customers through the checkout process. It consists of the following pages:

  • A Cart page which is used to show the cart content to the customer
  • An Empty cart page which is displayed when the cart is empty
  • A Checkout anonymous page which handles the checkout process for anonymous users
  • A Checkout user page which handles the checkout process for registered users
  • A Quote checkout user used to handle checkout to a quote for registered users

These pages are supported by the following service pages:

  • The CartService page keeps track of cart contexts and cart content
  • The CartSummary page is used to make a data available off-canvas mini-cart and express-buy

Configuration options

The Swift checkout implementation consists of several features that can be enabled or disabled. Some of them are configured simply by checking or unchecking a checkbox, while others might need some explanation.

Here is a list of the most important features.

Delivery Dates

Delivery dates allows the customer to choose specific dates for delivery instead of the next available date. This is often relevant in a B2B scenario. In Swift, you can create different settings for anonymous users and signed in users.

The settings are available either by entering the app column via the visual editor or the list view. Swift has two different pages depending on if the customer is signed-in or anonymous. This means that you will have to be specific about the situation you want to design for when configuring the delivery date.

  • Go to the the settings of the checkout App column
  • In the Content tab, check the Enable Delivery Date field in checkout checkbox

This will open a new section called Disabled Delivery Dates. Here, you can choose specific days of the week that are not available for delivery (e.g., weekends). You can also create longer periods of disabled dates (e.g., holidays).

If the customer has chosen a specific delivery date, it will be shown on their receipt.

Terms and Conditions

Accepting terms and conditions are often a fundamental part of purchasing online. However, in some scenarios you might want to disable the need for confirmation. Swift is constructed with two checkout pages; one for anonymous users and one for signed in users. This means that you will have to change the settings on both pages if you want all your customers to be affected by the changes.

This documentation covers disabling the terms and conditions feature. If you wish to enable it, simply reverse these steps.

If you want to disable the field of terms and conditions in the checkout process, you will need to do the following:

  1. In the Content tree, locate and click the checkout page (either for anonymous users or signed-in users).
  2. Enter the Checkout app either via the visual editor or the list view.
  3. In the Content tab, under the Links section, clear the Terms and Conditions Page Link field.
  4. Enter the App column.
  5. In the Field validation section, uncheck the Customer acceptance checkbox.
  6. Hit Save and close.

During checkout, a signed-in customer is presented with links for both editing the billing address and managing their addresses. If you wish to hide one or both links, you can configure these settings within the checkout app on the user checkout page.

  1. In the Content tree, locate and click on the Checkout page for signed in users.
  2. Enter the Checkout app either via the visual editor or the list view.
  3. In the Content tab, under the Addresses section, check one or both checkboxes for Hide edit billing address link and/or Hide manage your addresses link.
  4. Hit Save and close.

Removing account creation/login during checkout

When users are anonymous, the checkout phase will present different options for creating an account or logging in, based on the data provided by the user. If you prefer not to have this feature – for instance, if your Swift solution doesn't incorporate a user setup – it can be removed.

Checkout_ManualSetup_08

Given that users have both the option to create an account and to log in, we will divide this guide into two distinct sections.

  1. Already have an account? Log in
    • ​Locate the checkout page you want to change, this is properly the anonymous checkout page. In the default Swift solution, this is located at: Navigation/Utilities/Cart/Checkout anonymous
    • Enter the settings of the checkout app At the bottom in the Links section locate the Sign in page link field
    • Clearing this field will remove the "Already have an account Log in" link at the top of the checkout
  2. Create an account for easier checkout next time
    • Locate the checkout page you want to change, this is properly the anonymous checkout page. In the default Swift solution, this is located at: Navigation/Utilities/Cart/Checkout anonymous
    • Enter the settings of the Cart App
    • Enter the App tab
    • In the User Management section, if you deselect the Create user in checkout option, it will remove the Create an account for easier checkout next time option from the user's view on the front end

Manual Setup

If you want to set up the cart and checkout manually without using the page presets, you can follow this guide:

  1. Go to Content > Navigation > Utilities, add a new page and select Cart under Empty Items.
  2. Create these subpages under the Cart page:
    • Empty Cart
    • Checkout anonymous
    • Checkout user

Cart page

The Cart-page is used to show the contents of the shopping cart to the user - to set it up manually:

  1. Enter the Cart Page and add an empty 1 column row
  2. Add a Cart app to the empty row
  3. Give it the title Cart
  4. Under the Links section, add the appropriate links:
    • Shop page link: Products
    • Product page link: Products > Details
    • Checkout anonymous page: Navigation > Utilities > Cart > Checkout anonymous
    • Checkout signed in page link: Navigation > Utilities > Cart > Checkout user
  5. Enter the App tab
  6. Select the Shopping Cart app
  7. Under the Settings section, select a Channel
  8. Under the Steps section, add a new step, name it Cart and select the Cart.html, and select Ok
  9. Add a new step and call it Checkout. Do not select a template, but check the checkbox Is checkout
  10. Under the Field validation section, you can check the Customer acceptance checkbox and the A check for stock status checkbox
  11. Under the Field validation section, you can also add custom validation groups - typically for Billing and Delivery. To add a group, press Add, select an Id, and choose an error message
  12. Under the Empty cart section, check the Redirect to internal page checkbox and choose the Empty cart as the internal page

Empty Cart page

The subpage Empty cart is a regular content page – you can use the visual editor to create whichever content you want. In the example below, a Feature column with an icon and a text.

Checkout_ManualSetup

To create this specific design, follow these steps:

  1. Add a 1 column row
  2. Add a Feature column to the row
  3. Select the correct icon and select the icon size 128 x 128px
  4. Give it the title: Empty cart
  5. Give it the text: Seems like you don't have any items in your cart
  6. Under Title settings, select h1 and Headline 1

Checkout anonymous page

The checkout anonymous page uses a shopping cart to check out anonymous users – here’s how to do a full manual setup:

  1. Go to your checkout anonymous page, enter the page settings by pressing the pink circular button in the bottom right corner
  2. In the Publication tab, select Hidden in menu
  3. Hit Save and close
  4. Add a 1 column row and select the Checkout App
  5. Head to the App tab and select a Shopping Cart app
  6. Select a Channel
  7. Under the Steps section, add the following steps:
    • Information - for reference, the standard setup uses the InformationAnonymous_v2.cshtml template
    • Delivery - for reference, the standard setup uses DeliveryAnonymous_v2.cshtml template
    • Payment - for reference, the standard setup uses the PaymentAnonymous_v2.cshtml template
    • Checkout - remember to call it checkout and check the Is checkout checkbox
    • Receipt - for reference, the standard setup uses the Receipt.cshtml
  8. Under the Field validation section, you can check the Customer acceptance checkbox and the A checkout for stock status
  9. Under the Field validation section in Custom validation groups, you can add field validation as appropriate - typically for billing and shipping address fields
  10. Under the Newsletter section, you can check the Use email subscription
  11. Under the Empty cart section, check the Redirect to internal page and select the Empty Cart page
  12. Under the User management section, disable Apply user details to order and enable Create user in checkout
  13. In Groups for new users, add Accounts
  14. Now go to the Content tab and it it the title: Checkout
  15. Scroll down and fill out the following:
    • Add your Logo
    • Logo link: Home
    • Product page link: Products > Details
    • Cart page link: Navigation > Utilities > Cart
    • Sign-in page link: Navigation > Utilities > Sign in
    • User addresses page link: Navigation > Utilities > My account > My addresses
    • User account page link: Navigation > Utilities > My account > My account information
    • Checkout User page link: Navigation > Utilities > Cart > Checkout user
    • Terms and Conditions page link: Navigation > Footer > About the shop > Terms
  16. Hit Save and close

Checkout user page

Like the checkout anonymous page, the checkout users page uses a shopping cart to check out logged-in users – the setup is almost identical, but there are key differences:

  1. Select your checkout user page and enter the Page settings by clicking the pink circular button in the bottom right corner
  2. Head to the Publication tab and select Hidden in menu
  3. Hit Save and close
  4. Add a 1 column row and add the Checkout App to the row.
  5. Head to the App tab and select a Shopping Cart app
  6. Select a Channel
  7. Under the Steps section, add the following steps
    • Information - for reference, the standard setup uses the InformationUser_v2.cshtml template
    • Delivery - for reference, the standard setup uses DeliveryUser_v2.cshtml template
    • Payment - for reference, the standard setup uses the PaymentUser.cshtml template
    • Checkout - for reference, the standard setup uses Cart.cshtml template. Remember to check the Is checkout checkbox.
    • Receipt - for reference, the standard setup uses the Receipt.cshtml
  8. Under the Field validation section, you can check the Customer acceptance checkbox and the A checkout for stock status
  9. Under the Field validation section in Custom validation groups, you can add field validation as appropriate - typically for billing and shipping address fields
  10. Under theNewsletter section, you can check the Use email subscription
  11. Under the Empty cart section, check the Redirect to internal page and select the Empty Cart page
  12. Under theUser management section, disable Apply user details to order and Create user in checkout
  13. Now go to the Content tab and give it the title: Checkout
  14. Scroll down and fill out the following:
    • Add your Logo
    • Logo link: Home
    • Product page link: Products > Details
    • Cart page link: Navigation > Utilities > Cart
    • User addresses page link: Navigation Utilities > My account > My addresses
    • User account page link: Navigation > Utilities > My account > My account information
    • Terms and conditions page link: Navigation > Footer > About the shop > Terms
  15. Hit Save and close

Quote checkout user

To manually create the quote checkout user page:

First, create the page:

  1. Go to the Cart folder in the content tree
  2. Press the three dots to the right of the Cart folder and create a New page
  3. Choose the Checkout page
  4. Add a 1 column row by pressing the +-sign in the Visual Editor
  5. Add the Quote checkout App and give it the title Quote checkout user
  6. Configure the app:
    • On the Content-tab add a logo and a logo link
    • In the Links-section, add a link to your overall Cart-page
  7. Switch to the App-tab and select a Shopping Cart app - then configure it:
    • In the Settings section, choose your shop and enable checkout to quote
    • In the Steps section your steps should be as shown in Table 1
    • In field validation section disable customer acceptance
    • Hit Save and close
Step Name Template
1 Quote request QuoteRequestUser.cshtml
2 Submit quote
3 Receipt QuoteReceipt.cshtml

Please note that the Quotes-feature depend on a custom order field of the type Text(255) called QuoteRequest being present on the solution.

If you're manually implementing this, you should also remember to link the standard Cart-page to the quote checkout page un the Links section of the Cart app.

Improve this doc
To top