Introduction to the extension implementation of SAP Spartacus checkout process

Spartacus Medium checkout Characteristic is CMS Driven , It means checkout Every page in the stream is based on CMS page 、slots and Component. therefore , Development can change the content of each page 、 Add new components 、 take checkout Convert to single step checkout , Or you can create a very complex multi-step application with only a small amount of configuration in the storefront Application checkout workflow .

stay checkout In the process , There are usually links from one step to another , This is to put each checkout The page is registered as semantic page Why .

checkout The default routing configuration of is as follows :

provideConfig({
    
  routing: {
    
    routes: {
    
      checkout: {
    
        paths: ['checkout'],
      },
      checkoutShippingAddress: {
    
        paths: ['checkout/shipping-address']
      },
      checkoutDeliveryMode: {
    
        paths: ['checkout/delivery-mode']
      },
      checkoutPaymentDetails: {
    
        paths: ['checkout/payment-details']
      },
      checkoutReviewOrder: {
    
        paths: ['checkout/review-order']
      }
    },
  },
}),

Location of the above code ：default-routing-config.ts

Although the default checkout There are four steps , But the default configuration defines five semantic pages . This additional page has a general checkout route , It links to each that should be redirected to checkout The components of . From this routine checkout page ,Spartacus Redirect to Specific and correct Of checkout step step .

If you want to link to checkout, Then whatever your checkout How is the process specifically designed , Point to this general checkout page . such as , For multi-step checkout, have access to CheckoutGuard To redirect to the correct checkout step .

Through one step checkout, You can set all components on this checkout route , And delete from the component configuration CheckoutGuard.

In addition to routing configuration , You can also define the responsibilities of each step 、 The route to the page and the sequence of steps are configured checkout. The default configuration is as follows :

• id Attribute should have a unique value . When a specific step in the configuration needs to be identified , have access to id.

• stay CheckoutProgress Used in components name Property to indicate which checkout steps have been completed . This name is also used as a translation key .

• routeName Attribute specifies the semantic page for each step .

• type Attribute from checkout guards Use .