Create new page in Spartacus

Pages in Spartacus are based on CMS pages which are fetched from the SAP Commerce backend by using the responsible APIs. The data from the SAP Commerce side defines metadata like the url, headline etc. and also the structure of the pages. Structure means what kind of sections are available and which CMS components are assigned to this sections. Spartacus receives this information and provides the real components for this structure, including logic, ui, responsive design, styling etc. Due to this defined approach it requires 2 steps to create a new Spartacus page. First, it’s required to create the CMS page on SAP Commerce side. Second, the components on Spartacus side need to be created and assigned to the CMS components.

Let’s start with the SAP Commerce side definitions as first step. The creation of a new CMS page requires the creation of several instances for different kind of types. Let’s talk about these types first.

• Template: A template defines the sections of the page.
• ContentPage: It’s the page itself. It contains values like url, which template should be used, headline and so on. The url is stored on the attribute ‘label’ in this type.
• ContentSlot: This is the type that can be assigned to the sections and is responsible for the content itself. It doesn’t have content by his own, but components can get assigned to the slots. This components contain the content based on the assignment on Spartacus side.
• CMS Component: There are serval kind of CMS components available in standard Commerce system and it’s also possible to create new types. If there are no special attributes required, the generic CMSFlexComponent type can be used to create a component instance.
• ContentSlotForPage: This type just handles the assignment of the ContentSlot instance to the section of the ContentPage instance. Section is handled by the ‘position’ attribute of this type.

The impex for creating those instances has always the same structure and can be reused for creating new CMS pages. Just modify the content to your needs. It can also be done manually in the backoffice but I would recommend to use impex and import it in the HAC. Just login, go to Console tab and ImpEx Import and paste the modified impex content. The impex looks like this:

$contentCatalog=electronics-spaContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
$siteResource=jar:de.hybris.platform.spartacussampledataaddon.constants.SpartacussampledataaddonConstants&/spartacussampledataaddon/import/contentCatalogs/electronicsContentCatalog
 
###### Components and Pages ######
 
INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType
;;ZBestsellerComponent;ZBestsellerComponent;ZBestsellerComponentFlex
 
# Create the missing pages
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;ZBestseller;Bestseller Page;ContentPage1Template;/ourbestseller
 
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;Section2A-ZBestseller;Section 2A Slot for Bestseller Page;true;ZBestsellerComponent
 
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;Section2A-ZBestseller;Section2A;ZBestseller;Section2A-ZBestseller
 
#Language settings
$language=en
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];title[lang=$language]
;;ZBestseller;Our Bestseller

By importing those lines the required instances will be created. Directly after the import, the new site can be called by the defined url. In this example it would be http://localhost:4200/ourbestseller.

In case there is already an existing CMS component that wants to be reused, the creation of the CMSFlexComponent can be removed. But the existing component needs to be assigned to the ContentSlot instead of the new CMS component. In this use case, the second step of this article is not required.

With the first step, all required CMS instances are created and we get the page with the structure from the Commerce side. In the second step, we define which component on Spartacus side is the counterpart of the CMS component.

That’s quite easy and can be done by configuration. Just create a new component and add this configuration to the module file.

   ConfigModule.withConfig(<CmsConfig>{
      cmsComponents: {
        ZBestsellerComponentFlex: {
          component: BestsellerComponent,
        },
      },
    }),

CMSFlexComponent is mapped by flexType on the Angular side. ‘ZBestsellerComponentFlex’ is the flexType of the CMS component and ‘BestsellerComponent’ is the class name of the Angular component. After adding this to the configuration, the content of the component will be shown on the new created page.