当前位置: 首页 > Web前端 > HTML

SAP电商云SpartacusUI去除Checkout页面页眉页脚区域的几种方法,介绍

时间:2023-03-28 10:28:40 HTML

1如何去除结账页面的页脚和页眉实现无干扰结账方法1-只需删除结账CMS页面的页眉和页脚槽可以在Backoffice或SmartEdit中手动删除,也可以删除通过创建一个Impex。这样当HybrisRe-initialize时,这些Impex脚本就可以复用了。需要删除所有结帐页面,包括送货地址、送货方式和其他页面。这一步完成后,我们仍然可以在左上角看到一个HiXXX字段:这个字段位于名为SiteLogin的内容槽中,其中包含一个cx-login组件。请注意,此内容信息不是来自CommerceCloudCMS后端,而是Spartacus静态配置的一部分。这个静态配置是在Spartacus代码中此时定义的:现在我们需要将这个静态配置移动到CMS组件。(1)在SiteLogin槽中添加一个flexType类型的CMSFlexComponent:LoginComponent。将此Component分配关系添加到所有页面,包括结帐页面。(2)对PreHeaderslot和HamburgerMenuComponent重复上述操作。除了结帐页面之外的页面。(3)从SpartacusConfigurationModule中移除静态配置。即...defaultCmsContentProviders相关代码。方法二——复制页面模板MultiStepCheckoutSummaryPageTemplate的header和footer部分,使用以下代码将这两个区域设置为[]:provideConfig({layoutSlots:{MultiStepCheckoutSummaryPageTemplate:{header:{slots:[],},footer:{slots:[],},},},}asLayoutConfig),这种简单粗暴的方法让我们失去了在CMS中控制页面布局的可能。有一个折衷方案,即使用另一组内容槽。provideConfig({layoutSlots:{MultiStepCheckoutSummaryPageTemplate:{header:{slots:['CheckoutHeader'],},footer:{slots:['CheckoutFooter'],},},},}作为LayoutConfig),developmentheadernggmspartacus/my-storefront$nggcspartacus/my-storefront--export$nggmspartacus/my-storefront/my-desktop-header$nggcspartacus/my-storefront/my-desktop-header--export使用MyStorefrontComponent扩展StorefrontComponentAll将原.html文件中的内容复制到原.html文件中。将StorefrontComponentModuleimport区域的值拷贝到MyStorefrontModule.@NgModule({imports:[CommonModule,RouterModule,GlobalMessageComponentModule,OutletModule,OutletRefModule,PageLayoutModule,PageSlotModule,KeyboardFocusModule,SkipLinkModule,MyDesktopHeaderModule,],declarations:[MyStorefrontComponent],exports:[MyStorefrontComponent],})上面的exportclassMyStorefrontModule{}就是my-storefront.module.ts的值。然后将MyStorefrontModule导入AppModule。将app.component.html文件中的cx-storefront替换为app-my-storefront。现在我们已经对app-my-storefront有了100%的控制权,我们可以随意修改它的html文件的内容了。我们仍然希望我们header区域的某些部分可以在CMS中被编辑,例如链接和导航栏。因此,我们将cx-page-slot组件放在这些位置。这个slotComponent的作用是渲染分配给CMS中某个slot的Component。

下载我们的应用程序。了解更多
上面是文件my-desktop-header.component.html的内容为了让这个模板能够工作,我们需要在MyDesktopHeaderModule中导入一些依赖。@NgModule({imports:[CommonModule,GenericLinkModule,SearchBoxModule,PageSlotModule,MiniCartModule,IconModule,UrlModule,],declarations:[MyDesktopHeaderComponent],exports:[MyDesktopHeaderComponent],})exportclassMyHeaderModule{}一切完成后,新的头部区域如下图所示:这是因为新的标头结构与默认的Spartacus样式不匹配。修改styles.scss的值://更改默认font@importurl(“https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900&display=swap&subset=latin-ext”);$font-family-base:“Raleway”,sans-serif;$styleVersion:4.2;//删除标题部分和一些组件的默认样式$skipComponentStyles:(header,cx-mini-cart);@import“~@spartacus/styles/index”;//定义颜色变量:root{--cx-color-secondary:#f1f2f3;--cx-color-primary:#43464e;}