Question

我正在尝试将我们的spartacus应用程序转换为使用单步结帐。我遵循了https://sap.github.io/spartacus-docs/extending-checkout/中的说明。

以下是我的app.module.ts配置：

      routing: {
        routes: {
          checkout: {
            paths: ['checkout'],
          },
          // Add a new route for the combined step
          checkoutSinglePageCheckout: {
            paths: ['checkout/single-page-checkout'],
          },
        },
      },
      checkout: {
        steps: [
          {
            id: 'singleStepCheckout',
            name: 'checkoutProgress.singleStepCheckout',
            routeName: 'checkoutSinglePageCheckout',
            type: [CheckoutStepType.SHIPPING_ADDRESS,
                  CheckoutStepType.DELIVERY_MODE,
                  CheckoutStepType.PAYMENT_DETAILS,
                  CheckoutStepType.REVIEW_ORDER]
          },
        ],
      },

我已经省略了cmscomponents映射，因为我认为可能不会导致此问题。

这是我单步结帐路线的提示：

$contentCatalog=electronics-spaContentCatalog
$contentCatalogName=Electronics spa Content Catalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])[default=$contentCatalog:Online]

INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
                         ;;CheckoutSingleStepCheckout;Checkout Single Step Checkout Page;MultiStepCheckoutSummaryPageTemplate;/checkout/single-step-checkout

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;cmsComponents(uid, $contentCV)
                         ;;BodyContentSlot-CheckoutSingleStepCheckout;Checkout Single Step Checkout;CheckoutProgressComponent,CheckoutProgressMobileTopComponent,CheckoutShippingAddressComponent,CheckoutDeliveryModeComponent,CheckoutPaymentDetailsComponent,CheckoutProgressMobileBottomComponent
                         ;;SideContentSlot-CheckoutSingleStepCheckout;Order Summary Slot;CheckoutOrderSummaryComponent
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
                                ;;BodyContent-CheckoutSingleStepCheckout;BodyContent;CheckoutSingleStepCheckout;BodyContentSlot-CheckoutSingleStepCheckout
                                ;;SideContent-CheckoutSingleStepCheckout;SideContent;CheckoutSingleStepCheckout;SideContentSlot-CheckoutSingleStepCheckout

我不确定为什么会出现这种行为。

Answer 1

我可以通过如下所示的impex实现此目的：

INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
                         ;;CheckoutSinglePageCheckoutDetails;Checkout Single Page Checkout Details Page;MultiStepCheckoutSummaryPageTemplate;/checkout/single-step-checkout

INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType
                              ;;CheckoutSinglePageCheckoutDetailsComponent;CheckoutSinglePageCheckoutDetailsComponent;CheckoutSinglePageCheckoutDetails

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;cmsComponents(uid, $contentCV)
                         ;;BodyContentSlot-checkoutSinglePageCheckoutDetails;Checkout Single Page Checkout Details Slot;CheckoutProgressComponent,CheckoutProgressMobileTopComponent,CheckoutSinglePageCheckoutDetailsComponent,CheckoutProgressMobileBottomComponent
                         ;;SideContentSlot-checkoutSinglePageCheckoutDetails;Order Summary Slot;CheckoutOrderSummaryComponent
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
                                ;;BodyContent-checkoutSinglePageCheckoutDetails;BodyContent;CheckoutSinglePageCheckoutDetails;BodyContentSlot-checkoutSinglePageCheckoutDetails
                                ;;SideContent-checkoutSinglePageCheckoutDetails;SideContent;CheckoutSinglePageCheckoutDetails;SideContentSlot-checkoutSinglePageCheckoutDetails

这里有几点需要注意：

内容页面uid必须与CMSFlexComponent中的flexType相同
flexType值（与内容页面uid相同）不应与 uid和CMSFlexComponent中的名称
我认为ContentSlot uid，ContentSlotForPage uid也遵循一些命名条件。

现在我可以在app.module.ts中进行此配置更改

      routing: {
        routes: {
          // Add a new route for the combined step
          checkoutSinglePageCheckoutDetails: {
            paths: ['checkout/single-step-checkout'],
          },
        },
      },
      checkout: {
        steps: [

          {
            id: 'singlePageCheckoutDetails',
            name: 'checkoutProgress.singlePageCheckoutDetails', // Provide translation for this key
            routeName: 'checkoutSinglePageCheckoutDetails',
            // This step sets both the delivery mode and the payment details, so you have to define both of these types
            type: [
              CheckoutStepType.SHIPPING_ADDRESS,
              CheckoutStepType.DELIVERY_MODE,
              CheckoutStepType.PAYMENT_DETAILS,
              CheckoutStepType.REVIEW_ORDER,
            ],
          },
        ],
      },

现在在我自己的single-page-checkout.module.ts中，我使用以下映射：

export const singleStepCheckoutConfig = {
  cmsComponents: {
    CheckoutSinglePageCheckoutDetails: {
          component: SingleStepCheckoutComponent
    }
  }
};

@NgModule({
  declarations: [SingleStepCheckoutComponent],
  imports: [
    CommonModule,
    ConfigModule.withConfig(singleStepCheckoutConfig),
  ],
  entryComponents: [SingleStepCheckoutComponent]
})

现在我的问题是我是否必须编写所有从现有角度复制/扩展的角度成分。映射现有的角度和CMS组件无效。

斯巴达克斯单步结帐进入循环

1 个答案: