Header 插槽组件配置未反映在斯巴达克斯中

Question

以下 header 插槽配置在站点中没有任何影响。添加到 app.module.ts 文件中的配置下方，但带有插槽的页脚配置：[] 删除了页脚部分。

imports: [
ConfigModule.withConfig({
  layoutSlots: {
    header: {
      slots: ['SiteLogo', 'MiniCart', 'SearchBox', 'NavigationBar']
    },
    footer: {
      slots: []
    }
  },
} as LayoutConfig),
BrowserModule,

有什么建议吗？仅供参考，使用 Spartacus 4.0.0 和 Hybris 1905

Answer 1

如果你查看源代码：

https://github.com/SAP/spartacus/blob/release/4.0.0/projects/storefrontlib/src/recipes/config/layout-config.ts

您会看到 header 的插槽分配是根据断点（屏幕布局）配置的。 Spartacus 允许对每个断点进行自适应配置。可以为每个断点提供特定的插槽配置。

 layoutSlots: {
    header: {
      lg: {
        slots: [
          'PreHeader',
          'SiteContext',
          'SiteLinks',
          'SiteLogo',
          'SearchBox',
          'SiteLogin',
          'MiniCart',
          'NavigationBar',
        ],
      },
      slots: ['PreHeader', 'SiteLogo', 'SearchBox', 'MiniCart'],
    },

所以对于你的情况，请将插槽配置放在lg（大屏幕）断点下，如下代码。

ConfigModule.withConfig({
      layoutSlots: {
      header: {
        slots: [],
        lg: {
          slots: ['SiteLogo']
        }
      },
      footer: {
        slots: []
      }
  },
} as LayoutConfig)

最后，在呈现的店面中，header 区域只有徽标可见。看截图：

Header 插槽组件配置未反映在斯巴达克斯中

Header slot components configuration not reflecting in Spartacus

spartacus-storefront