Add or Remove Checkout Steps
Each checkout flow configuration file corresponds to a configured checkout flow option. Each of these files contain multiple groups to achieve a specific task for that flow, such as adding shipping information. These groups contain one or more checkout steps to achieve that task. Each checkout step provides one or more wizard modules to guide the user through the checkout process.
Groups define the breadcrumbs available at the top of the page. Checkout steps then provide the modules that guide the shopper through the checkout process. You can add or remove checkout steps to any named group array by adding or removing steps as objects. You can also customize each step by editing properties.
For example, the following code sample in the SC.Checkout.Configuration.Steps.Standard.js file defines the Shipping Address group. This group contains two checkout steps: Choose Shipping Address and Enter Shipping Address. Each checkout step contains three modules. You can customize the Shipping Address group by modifying each step’s code.
{
name: _('Shipping Address').translate()
, steps: [
{
name: _('Choose Shipping Address').translate()
, url: 'shipping/address'
, isActive: function ()
{
return !this.wizard.isMultiShipTo();
}
, modules: [
OrderWizardModuleMultiShipToEnableLink
, OrderWizardModuleAddressShipping
, [OrderWizardModuleCartSummary, cart_summary_options]
]
}
, {
name: _('Enter Shipping Address').translate()
, url: 'shipping/selectAddress'
, isActive: function ()
{
return this.wizard.isMultiShipTo();
}
, modules: [
[OrderWizardModuleMultiShipToEnableLink, {exclude_on_skip_step: true}]
, [OrderWizardModuleMultiShipToSelectAddressesShipping, {edit_addresses_url: 'shipping/selectAddress' }]
, [OrderWizardModuleCartSummary, cart_summary_options]
]
}
]
}