Search code examples
spartacus-storefront

Header slot components configuration not reflecting in Spartacus

Below header slot configuration does not have any impact in the site. added below config in app.module.ts file, but footer config with slots:[] removes the footer section.

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

Any suggestions plz? FYI, Using Spartacus 4.0.0 with Hybris 1905

Solution

  • If you look at source code:

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

    you will see the slots assignment for header is configured per break point ( screen layout ). Spartacus allows for an adaptive configuration for each breakpoint. A specific slot configuration can be provided for each breakpoint.

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

    So for your case, please put slot configuration under lg(large screen) break point, as code below.

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

    Finally, in rendered storefront, there is only logo visible in header area. See screenshot: enter image description here