Checkout pages 3.4.0

Last modified by Denis Pavlov on 2018/06/18 21:36

Overview

Default theme provides customer with simple checkout process: 

  • login - facilitated by special login page that consists of both login and registration forms to allows both returning and new customers to proceed
  • choose delivery address - driven by address book filtered by allowed locations by current shop. Note that this step may be automatically skipped if shop has shipping methods that do not require shipping address (e.g. digital deliveries)
  • choose shipping method - driven by carriers assigned to current shop
  • choose payment method and pay - driven by carrier SLA allowed payment methods in conjunction with allowed payment methods for current shop. The act of payment depends on the selected payment method as customer may be either presented with cart data capture form (e.g. Cybersource) or simple button to confirm the order (e.g. payment upon store collection) or be taken to external website (e.g. PayPal button).

Throughout the checkout the customer is presented with clearly marked steps showing them what stage they are at the moment and how many steps left to complete the checkout.

It must also be noted that checkout has a different header and footer implementation with less information to avoid customers distractions from the checkout. It is recommended to keep links leading away from the process to minimum and instead include all information right on the pages themselves to provide customer with guidance and reassurance thus preventing checkout abandonment.

Login step page

yc-3.0.0-default-checkout-page-1-login.png

Annotations

Element Template Configurations 1Content include 2Description 
C.1 Login form    This component is described in Login and Registration pages documentation 
C.2 Registration form    This component is described in Login and Registration pages documentation 
F.0 Footer meta include Checkout footer  "footer_include" Additional page meta data e.g. additional javascript.
  This is rendered at the bottom of the page and is not intended for any visible elements 
F.1 Footer Checkout footer  "footer_co_nav_include" Footer can include social links, additional menus, logos etc 
H.0 Header meta include Checkout header  "header_include" Additional page meta data e.g. Google Analytics meta tag.
  This is rendered at the very top of the page and is not intended for any visible elements 
H.1 Shop logo Checkout header Shop image "SHOP_IMAGE0"  Logo for shop is using first image attribute including localised versions 
H.2 Mini cart Checkout header   Mini cart view is non configurable but can be overridden in custom theme 
M.1 Customer login Checkout header Shop customer name format "SHOP_CUSTOMER_FORMATTER"  Two views depending on whether customer is logged in or not. When not logged in shows a login/registration link. When logged in displays a welcome message and a drop down menu to access personal data. 
M.2 Language selector Checkout header Shop language settings  Visible only if shop has more than one language option 
M.3 Currency selector Checkout header Shop currency settings  Visible only if shop has more than one currency option 
M.4 Checkout steps    Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. 

1 Configurations refer to shop and category custom attributes that define behaviour of components
2 Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"

Choose delivery address step page

yc-3.0.0-default-checkout-page-2-address.png

Annotations

Element Template Configurations 1Content include 2Description 
C.1 Same address option    When ticked instructs YC to use the same address for billing as the one that was used for shipping.
  If same address is enabled then C.3 is not visible. 
C.2 Shipping address selection    Allows to select shipping address to use. Works very similarly to address book on profile page
C.3 Billing address selection    Allows to select billing address to use. Works very similarly to address book on profile page.
  If same address is enabled then this element is not visible. 
M.4 Checkout steps    Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. 

1 Configurations refer to shop and category custom attributes that define behaviour of components
2 Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"

Choose shipping method step page

yc-3.0.0-default-checkout-page-3-shipping.png

Annotations

Element Template Configurations 1Content include 2Description 
C.1 Shipping method selection form    Allows to select carrier and then its SLA. The carrier list is filtered by allowed carrier for given shop, which have SLA for currently active currency. 
C.2 Shipping cost    Allows to view shipping costs including promotion discounts applied after carrier SLA has been selected. 
C.3 Fulfilment centre delivery    Items are grouped by fulfilment centres they are delivered by. C1 and C2 are specified per each fulfilment centre. 
M.4 Checkout steps    Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. 

1 Configurations refer to shop and category custom attributes that define behaviour of components
2 Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"

Choose payment method and pay step page

yc-3.0.0-default-checkout-page-4-payment.png
 

Annotations

Element Template Configurations 1Content include 2Description 
C.1 Order review    Provides detailed information about the order. Includes breakdown by each delivery in case of multiple delivery. 
C.2 Payment panel    Payment panel includes final preferences on delivery, payment method to be used and payment form that corresponds to the selected method. 
C.2.1 Multiple delivery    Provides customer with the option to split the order into multiple deliveries if some items cannot be delivered straight away (e.g. back order, pre-order). Selecting this option means that standard items will be delivered straight away, so that customer gets them sooner and the rest will be delivered when all items become available. If single delivery is chosen then there will be only one delivery when all items will be available.
  This option is only visible if some items in the order cannot be delivered straight away. 
C.2.2 Payment method selector    Allows customer to chose payment method they prefer. Selecting payment method changes the payment form element C.2.3 
C.2.3 Payment form    Form that allows to confirm or pay for the order. Can be as simple as a single button or contain form to capture payment details. 
M.4 Checkout steps    Shows checkout process. Blue colour indicates current step, green indicated completed steps, grey indicates steps to complete. 

1 Configurations refer to shop and category custom attributes that define behaviour of components
2 Content include refers to shop URI suffix for content. For example if shop has code "SHOP10" and content include is specified as "custom_content" then URI of the content include that will be rendered is "SHOP10_custom_content"

Tags:
Created by Denis Pavlov on 2018/06/18 21:36
    
YesCart.org © 2009 - 2018
v.1.0.0