Spartacus: Display component in section (ProductListPage)

[andreas_lenggenhager]

I am using SAP Spartacus and I am trying to display some category related information on a product list page. The backend component has been setup like this:

INSERT_UPDATE CategoryHeaderComponent; $contentCV[unique=true];uid[unique=true];name
;;CategoryHeaderComponent;Category Header Component

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid, $contentCV)
;;Section1Content-categoryHeaderComponent;CategoryHeaderComponent

INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='ProductListPageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;Section1-ProductListPage;Section1;ProductListPageTemplate;Section1Content-categoryHeaderComponent;true
;;Section1-ProductGridPage;Section1;ProductGridPageTemplate;Section1Content-categoryHeaderComponent;true

This new component is transferred to the frontend (as seen in the network tab). A new component has been created with Angular and in cms-module.ts, the component has been declared and assigned:

ConfigModule.withConfig({
  cmsComponents: {
    CategoryHeaderComponent: {
      component: CategoryHeaderComponent
    },
  }
})

And of course added to the app.module.ts. But still the section (should be "Section1" by default) above the search results/refinement component is not displayed. Can someone help me?

Best regards

Andy

[former_member632827]

Hi andreas.lenggenhager,

This solution is based 1.4 Spartacus b2c. Here no need declare Hybris content components at Spartacus end. Only Flex type of components should be declare in the providers of the their module file. In you case Section1 slot should be present in the b2c-layout-config.ts. Include like below if not exist.

ProductListPageTemplate: {
      slots: ['Section1','ProductLeftRefinements', 'ProductListSlot'],
    },
    ProductGridPageTemplate: {
      slots: ['Section1','ProductLeftRefinements', 'ProductGridSlot'],
    }

[andreas_lenggenhager]

Adding the following to a separate file:

import {LayoutConfig} from '@spartacus/storefront';


export const b2cLayoutConfig: LayoutConfig = {
  layoutSlots: {
    ProductListPageTemplate: {
      slots: ['Section1', 'ProductLeftRefinements', 'ProductListSlot'],
    },
    ProductGridPageTemplate: {
      slots: ['Section1', 'ProductLeftRefinements', 'ProductGridSlot'],
    }
  },
};

And refering it in app.module.ts like this will break my page.

import {b2cLayoutConfig} from './layout/layout-config';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    StorefrontModule.withConfig({
      layoutSlots: b2cLayoutConfig.layoutSlots
    }),
    ...
  ],
...
  bootstrap: [AppComponent]
})

The build runs without an issue, but the page is displayed blank. What is wrong here? Sorry, I am new with Spartacus.

[former_member632827]

Find the OOTB b2c-layout-config.ts file in code base. Add Section1 in slots array of the existing ProductListPageTemplate and ProductGridPageTemplate elements. No need to change in other places.You don't wants to disturb OOTB file then create new file with existing code with updates and use new b2cLayoutConfig.

[former_member632827]

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

[andreas_lenggenhager]

I do not have this file in my project as I am working with the compiled version of Spartacus. Further, I don't think it's recommended to override Spartacus default files

Therefore, I copied the whole file from https://github.com/SAP/spartacus/blob/3.1.1/projects/storefrontlib/src/recipes/config/layout-config.... and added my "Section1" into the right spot.

Still, the page comes out as blank. Is there anything wrong with the import in my app.module.ts file?

StorefrontModule.withConfig({
    layoutSlots: b2cLayoutConfig.layoutSlots
}),