如何在Spartacus中更改页面布局?

Question

地狱专家，

我是新的spartacus和尝试自定义页面布局。如何改变如下图所示的布局(页面结构)

页面布局

Answer 1

您可以通过创建自定义布局文件并使用该文件作为app.module.ts中的布局文件来自定义页面模板的布局

你可以改变插槽的顺序，即页面结构在你的ts文件，并调整布局的css从layout.scss为您的页面看起来像在你的照片

你可以在这里找到默认的spartacus布局配置文件

例如:

custom-layout-config.ts

import { LayoutConfig } from '@spartacus/storefront';
export const customLayoutConfig: LayoutConfig = {
layoutSlots: {
header: {
lg: {
slots: [
'PreHeader',
'SiteContext',
...
],
},
slots: ['PreHeader', 'SiteLogo', 'SearchBox', 'MiniCart'],
},
navigation: {
lg: { slots: [] },
slots: ['SiteLogin', 'NavigationBar', 'SiteContext', 'SiteLinks'],
},
footer: {
slots: ['Footer'],
},
LandingPage2Template: {
pageFold: 'Section2B',
slots: [
'Section1',
'Section2A',
'Section2B',
'Section2C',
'Section3',
'Section4',
'Section5',
],
},
ProductDetailsPageTemplate: {
lg: {
pageFold: 'UpSelling',
},
pageFold: 'Summary',
slots: [
'Summary',
'UpSelling',
'CrossSelling',
'Tabs',
'PlaceholderContentSlot',
],
},
...
};

app.module.ts

B2cStorefrontModule.withConfig({
...
layoutSlots: customLayoutConfig.layoutSlots,
...
})

Answer 2

也许你可以在Spartacus文档中找到关于页面布局和CSS架构的一些信息