All steps are based on PWA 3.1, but are also valid for newer versions. Some of the features such as the category and product includes require at least PWA 2.1. This article will be extended in the future, with the release of new PWA versions.

References

• Video Tutorial - Content Management System (Part 1): How to Create an own Page From Scratch
• Concept - Intershop Progressive Web App - CMS Integration

RSS CMS vs PWA CMS

There are a few differences between the standard CMS of the responsive storefront and the CMS used in the PWA. One of them being that the standard CMS heavily relies on pages and their respective slots to display content while the PWA CMS makes use of Includes and View Contexts which are referenced in Angular files.

Adjustments to the Content of the Homepage

Content (from the ICM back office) can be integrated into the PWA via the <ish-content-include> element. For example, the Homepage Content include is used in the home-page.component.html file under intershop-pwa/src/app/pages/home/home-page.component.html. 

<ish-content-include includeId="include.homepage.content.pagelet2-Include"></ish-content-include>

In this way, it is possible to add includes with assigned components to a page in the PWA project by using the <ish-content-include> element and referencing the appropriate include via the includeId attribute.

However, when includes are to be added to the application header and footer, the <ish-lazy-content-include> element must be used instead.

<ish-lazy-content-include includeId="include.homepage.content.pagelet2-Include"></ish-lazy-content-include>

This is required since the element enables providing a lazy loading content include component that can be used within the ShellModule and therefore in the header and footer of the application.

Adjust and Use the Content of an Already Existing Include

It is possible to use already existing includes in the back office and use them in the Intershop PWA storefront. To do so, perform the following steps:

1. In the ICM back office, switch to a PWA application and go to Content | Includes.
   There are ten already prepared content includes which can be used as a fresh include to display content in the PWA storefront.
   
   To provide a simple example, in the following it is described how to use a content include to display content in the footer of the PWA storefront.
2. Open a content include (e.g.: Content Include 01), switch to the tab Components and assign a new or already existing component to it.
   
   In this example, a promotional banner image will be assigned to the include.
   

3. Reference the include in the PWA source code.
   Therefore open the file footer.component.html under \src\app\shell\footer\footer\footer.component.html and add an <ish-lazy-content-include> element.

   <div class="footer">
       <div class="container">
   	[...]
   		<ish-lazy-content-include includeId="include.general.01.pagelet2-Include"></ish-lazy-content-include>
   	[...]
   	</div>
   </div>

   As "includeId" please specify the "ID" of the appropriate include. This "ID" can be found by opening the include in the ICM (under Content | Includes) and switching to the "Properties" tab.

   The <ish-lazy-content-include> element is required since it enables providing a lazy loading content include component that can be used within the ShellModule and therefore in the header and footer of the application.

   After these changes, the specified content is displayed in the PWA storefront.

   

Create a (System-Managed) CMS Include

It is also possible to create an own system-managed CMS include via a custom project cartridge if the already existing includes are not suitable.

This example shows how to create a system-managed CMS include that can later be used to integrate content into the PWA application:

1. Specify the (headless) application type the cartridge is assigned to, e.g., intershop.REST.

   app_sf_ext_content_cartridge/staticfiles/cartridge/components/apps-extension.component

   <?xml version="1.0" encoding="UTF-8"?>
   <components xmlns="http://www.intershop.de/component/2010">
       <fulfill requirement="selectedCartridge" value="app_sf_ext_content_cartridge" of="intershop.REST.Cartridges"/>
   </components>
   

2. Define a new empty CMS include and reference one or more interfaces.

   app_sf_ext_content_cartridge/staticfiles/cartridge/pagelets/includes/include.ext.homepage.content.pagelet2

   <?xml version="1.0" encoding="UTF-8"?>
   <pagelet:PageletModel xmlns:pagelet="http://www.intershop.de/pagelet/2010" name="include.ext.homepage.content.pagelet2">
     <componentEntryPointDefinitions name="Include" multiplicity="ZERO_MANY" systemManaged="true">
       <callParameterInterfaces referencedName="app_sf_base_cm:interface.common.content.pagelet2-Interface"/>
       <callParameterInterfaces referencedName="app_sf_base_cm:interface.common.content.advanced.pagelet2-Interface"/>
     </componentEntryPointDefinitions>
   </pagelet:PageletModel>
   

   Interfaces are used to be able to associate components with the include. In this example, the standard interfaces interface.common.content.pagelet2-Interface and interface.common.content.advanced.pagelet2-Interface from cartridge app_sf_base_cm are used.

   If no component can be assigned to the include, check the referenced interface and its component references. Interfaces must be referenced from the component itself.

   Component Example (component.common.example.pagelet2)

   <?xml version="1.0" encoding="UTF-8"?>
   <pagelet:PageletModel xmlns:pagelet="http://www.intershop.de/pagelet/2010" name="component.common.example.pagelet2">
     <pageletDefinitions name="Component">
       <callParameterInterfaces referencedName="app_sf_responsive_cm:interface.common.content.pagelet2-Interface"/>
       <renderTemplate referencedName="component/common/Example"/>
     </pageletDefinitions>
   </pagelet:PageletModel>
   
   

3. Add localized properties values to the CMS include.

   app_sf_ext_content_cartridge/staticfiles/cartridge/pagelets/includes/include.ext.homepage.content.properties

   #Localizable properties associated with include.ext.homepage.content.pagelet2
   ComponentEntryPoint.Include.description=Include to manage extension content of the Homepage.
   ComponentEntryPoint.Include.displaygroup=Homepage Include Ext
   ComponentEntryPoint.Include.displayname=Homepage Content Ext
   

Integration of Custom CMS Content Pages into the PWA Storefront

All pages that are delivered with the PWA sources provide the necessary functionality to operate a storefront. They follow a similar concept like system pages known from the Intershop CMS. However, it is still possible to extend the storefront by using content pages. These pages can be created and managed in the ICM back office and integrated into your PWA.

Create a New Content Page

First off all, you need to create a page. Ensure to do this inside of the Progressive Web App of your channel.

After having created the page, you need a page variant to display content.

You can fill your page variant with different content.

The Standard Page page template already provides a header and footer.

Link the Page to Your PWA

After you have created a new page and assigned a page variant with some content, you need to link it to the PWA.

The link to the page needs to be in the following format: page://Page_ID.

There are two options two link the page:

• You can use the link in CMS components like HTML components:
  

• Alternatively, you can include it directly in the PWA sources, for example, in the localization key footer.content located in .../src/assets/i18n/en_US.json
  .
  There you need to add a href link:

  href link

  <a href=\"page://Content_Page\">Content Page</a>

Now the page is available in the PWA storefront: