Support Article - PWA Content Integration Guide

Product Version

7.10

Product To Version

Status

1 Introduction

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.

1.1 References

2 Standard CMS vs PWA CMS

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.

3 Integration of the Intershop CMS into the Intershop PWA

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 intershop-pwa/src/app/pages/home/home-page.component.html

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 in the includeId attribute.

3.1 Create a (System-Managed) CMS Include

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.

  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
    

4 Adjustments to the Content of a Page

4.1 The Standard "Homepage Content" Include 

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:

NameAssigned Components by DefaultSpecificationsRepresentation in the Storefront
PWA Homepage Grid - Full Width Single Slot

PWA Homepage Carousel

  • one available slot for components
  • the component takes up the whole width of the storefront

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

  • one available slot for components (one for each: left, middle, and right)
  • each component takes up one third of the width of the storefront

PWA Homepage Grid - Full Width Multiple SlotPWA Featured Products
  • multiple available slots for components
  • each component takes up the whole width of the storefront

4.2 Assign / Unassign Components

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:

  1. Terms & Conditions
  2. Privacy Policy
  3. PWA Homepage Carousel
  4. PWA Slider Teaser 1
  5. PWA Slider Teaser 2
  6. PWA Featured Products
  7. PWA Cat Teaser 1
  8. PWA Cat Teaser 2
  9. PWA Cat Teaser 3
  10. Helpdesk - Start

It is also possible to add components to other includes like "Content Include 01" and to use them instead.

4.3 Create New Components

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:

  1. Carousel
  2. Container
  3. Enhanced Image Teaser
  4. Free Style HTML
  5. Image
  6. Product List (Category)
  7. Product List (Filter)
  8. Product List (Manual)
  9. Text
  10. Video

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.

5 Including CMS Content Pages into the PWA

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.

5.1 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.

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.

5.2 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.

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 href link:

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

Now the page is available in the PWA storefront:

Disclaimer

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.

Customer Support
Knowledge Base
Product Resources
Tickets