Checkout

Swift ships with a checkout design which guides the customers through their purchase - it consists of the following:

  • Cart page with a shopping cart app - this page is used to show the cart contents to the customer when the cart-icon is clicked
  • A Checkout anonymous page which handles the actual checkout procedure for anonymous users
  • Checkout user page which handles the actual checkout procedure for registered users

A summary of the cart is always presented, to show the customers what they are purchasing (Figure 1.1).

Figure 1.1 Checkout

When you work with Swift you therefore have three options for setting up the checkout:

  • You can use the existing set up – in which case you don’t have to do anything
  • You can use the page presets as a starting point
  • You can do a manual setup from scratch

If you want to slightly modify the checkout design you can use our page presets as a starting point (Figure 2.1).

Figure 2.1 Checkout page presets

To create a checkout using the page presets:

  1. Go to Navigation > Utilities and create a new Cart page
  2. Under the Checkout section select the Cart page preset – this preset contains a preconfigured shopping cart app amongst other things
  3. Under the new cart page create the following subpages – there’s a preset for each of them:
    1. Empty cart
    2. Checkout anonymous
    3. Checkout user

You can then modify the new checkout as you please without overwriting the standard design – making it easy to roll back any changes.

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

  1. Go to Navigation/Utilities add new page and call it Cart
  2. The Cart page should have these subpages:
    1. Empty cart
    2. Checkout anonymous
    3. Checkout user
  3. The Cart page consist of a shopping cart app that uses the Bikes shop and has 2 steps.
    1. A Cart-step using the eCom7/CartV2/Cart.cshtml template
    2. A Checkout-step
  4. Under the Field Validation section you can add field validation as appropriate – typically for billing & shipping address fields 
  5. On the Cart-app paragraph open the item-settings and add the appropriate links (Figure 3.1):
    1. Shop page link: Products
    2. Product page link : Products /details
    3. Checkout anonymous page: Navigation/Utilities/Checkout anonymous
    4. Checkout user: Navigation/Utilities/Checkout user

Next you must manually create content for the subpages – see below.

Figure 3.1 Adding the appropriate links to the cart item settings will link this paragraph correctly to other pages on Swift

The subpage Empty cart is a regular content page – you can use the visual editor to create whichever content you want, here a Feature-column with an icon and a text (Figure 4.1).

Figure 4.1 Creating an empty cart page

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

  1. Open the page and set it to Hide in menu
  2. Add a Shopping Cart app to the page and create the following steps:
    1. Information – for reference, the standard setup uses the eCom7/CartV2/InformationAnonymous.cshtml template.
    2. Delivery – for reference, the standard setup uses the eCom7/CartV2/DeliveryAnonymous.cshtml template.
    3. Payment – for reference, the standard setup uses the eCom7/CartV2/PaymentAnonymous.cshtml template.
    4. Checkout – remember to call it Checkout
    5. Receipt – for reference, the standard setup uses the eCom7/CartV2/Receipt.cshtml template.
  3. Under the Field Validation section you can add field validation as appropriate – typically for billing & shipping address fields 
  4. Open the paragraph item settings of the paragraph with the shopping cart app and fill in the following:
    1. Logo and logo link
    2. Product page link
    3. Cart page link
    4. Sign-in page
    5. Checkout user page link
    6. Terms and Conditions page link

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. Open the page and set it ti Hide in menu and setup permissions so it can only be accessed by logged-in users
  2. Add a Shopping Cart app to the page and create the following steps:
    1. Information – for reference, the standard setup uses the eCom7/CartV2/InformationUser.cshtml template.
    2. Delivery – for reference, the standard setup uses the eCom7/CartV2/DeliveryUser.cshtml template.
    3. Payment – for reference, the standard setup uses the eCom7/CartV2/PaymentUsers.cshtml template.
    4. Checkout – remember to call it Checkout
    5. Receipt – for reference, the standard setup uses the eCom7/CartV2/Receipt.cshtml template.
  3. Under the Field Validation section you can add field validation as appropriate – typically for billing & shipping address fields 
  4. Open the paragraph item settings of the paragraph with the shopping cart app and fill in the following:
    1. Logo and logo link
    2. Product page link
    3. Cart page link
    4. User address page link
    5. User account page link
    6. Terms and Conditions page link