This article describes how to integrate content into the Intershop Progressive Web App by using the Intershop Commerce Management system.
All steps are based on PWA 1.4, but are also valid for newer version. This article will be extended in the future, with the release of new PWA versions.
There are a few differences between the standard CMS and the CMS used in the PWA. One of them being that the standard CMS heavily relies on pages and their respective slots for the display of content while the PWA CMS uses includes which are referenced in Angular files.
The Intershop CMS is integrated into the PWA through the
<ish-content-include> element. For example, the "Homepage Content" include is used in the
home-page.component.html file under
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 in the
It is possible to create an own system-managed CMS include via a custom project cartridge.
This example shows how to create a system-managed CMS include that can later be used to integrate content into the PWA application.
Specify the (headless) application type the cartridge is assigned to, e.g.,
<?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>
Define a new empty CMS include and reference one or more interfaces.
<?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.
<?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>
Add localized properties values to the CMS include.
#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
It is possible to assign or unassign components to or from specific includes through the ICM back office. To do so, open the "Progressive Web App" channel application and go to Content | Includes.
For example, you can find the include "Homepage Content" which gathers multiple component containers. These hold the components which are going to be displayed in the storefront.
Example: Include - Homepage Content (include.homepage.content.pagelet2-Include)
The include "Homepage Content" (include.homepage.content.pagelet2-Include) inherits the assignment of all component containers which are assigned to the container component "PWA Homepage Grid" (pwa_homepage_grid).
Example: Component container assignment to "Include - PWA Homepage Grid" (pwa_homepage_grid)
Example: Component assignment to component "Container - PWA Featured Products" (pwa_featured_products) to "PWA Homepage Grid - Full Width Multiple Slot" (pwa_homepage_grid5)
The following component groups are available:
|Name||Assigned Components by Default||Specifications||Representation in the Storefront|
|PWA Homepage Grid - Full Width Single Slot|
PWA Homepage Carousel
PWA Homepage Grid - Third Width Single Slot - left
PWA Homepage Grid - Third Width Single Slot - middle
PWA Homepage Grid - Third Width Single Slot - right
PWA Cat Teaser 1
PWA Cat Teaser 2
PWA Cat Teaser 3
|PWA Homepage Grid - Full Width Multiple Slot||PWA Featured Products|
To assign or unassign a component in the ICM back office, click on the appropriate component group mentioned in section Standard "Homepage Content" Include and assign or unassign them in the "Container Content" section.
The following standard components can be assigned / unassigned:
It is also possible to add components to other includes like "Content Include 01" and to use them instead.
It is possible to create further components with the available templates for new components by clicking on the New button.
The following standard templates are available by default:
However, it is also possible to create own templates by switching to the ICM menu Content | Component Templates | New. Furthermore, components can also be created without using a template at all.
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.
First off all, you need to create a page. Ensure to do this inside of the "Progressive Web App" of your channel.
If you do not know how to create a new page, please have a look at our Video Tutorial - Content Management System (Part 1): How to Create an own Page From Scratch.
After having created the page, you need a page variant in order to display content.
You can fill your page variant with different content.
The "Standard Page" page template already provides a header and footer.
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.
You can either use this link in the CMS components like HTML components
or 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
You need to add a
<a href=\"page://Content_Page\">Content Page</a>
Now the page is available in the PWA storefront:
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.