perf: disable rendering of view contexts by default

* commented out view context integration in HTML templates * providing an sample import file with the used view contexts for ICM * added documentation
intershop · May 2, 2024 · 8fbd4ea · 8fbd4ea
1 parent a74ccfb
commit 8fbd4ea
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 5 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -23,6 +23,7 @@
 *.crt
 *.key
 *.lua
+*.xml
 .*ignore
 .husky
 .gitattributes

diff --git a/docs/concepts/cms-integration.md b/docs/concepts/cms-integration.md
@@ -87,6 +87,41 @@ CREATE src/app/cms/components/cms-inventory/cms-inventory.component.spec.ts (795
 UPDATE src/app/cms/cms.module.ts (4956 bytes)
 ```
 
+## View Contexts
+
+With the Intershop PWA version 2.0.0 we introduced demo/example view contexts that are now by default disabled with Intershop PWA 5.2.0.
+Each integrated view context triggers a REST call that will potentially decrease the SSR rendering performance, something that is not necessary if this feature is not actively used in a PWA project.
+If the used ICM does not have the integrated view context instances configured, the requests result in 404 responses which is not helpful either.
+For that reason the examples were commented out in the source code and have to be activated in the project source code if needed.
+
+The PWA is prepared to work with the following set of view contexts.
+
+```
+viewcontext.include.category.base.bottom
+viewcontext.include.category.base.top
+viewcontext.include.category.content.bottom
+viewcontext.include.category.content.top
+viewcontext.include.category.navigation
+viewcontext.include.family.base.bottom
+viewcontext.include.family.base.top
+viewcontext.include.family.content.bottom
+viewcontext.include.family.content.top
+viewcontext.include.family.navigation
+viewcontext.include.product.base.bottom
+viewcontext.include.product.base.top
+viewcontext.include.product.content.bottom
+viewcontext.include.product.content.top
+viewcontext.include.product.productinfo
+```
+
+To easily add these view contexts to the used ICM (other then the inSPIRED demo data that already contains these view contexts) a content import file is provided in the project sources ([`src/assets/sample-data/view_contexts_import.xml`](../../src/assets/sample-data/view_contexts_import.xml)) that can be imported on organization level.
+
+To activate the view contexts in the PWA search for `<!-- DISABLED VIEW CONTEXT --` and `-- DISABLED VIEW CONTEXT -->` and remove these lines around the view contexts that should be used.
+
+> [!NOTE]
+> The default view contexts are examples for demonstration purposes that could be used in the same way in a customer project.
+> It is advised though to actually evaluate which view contexts are really needed in the project and to activate them accordingly or create the once that fit the project requirements even better.
+
 ## Design View
 
 > [!IMPORTANT]

diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
@@ -21,6 +21,11 @@ A few Stylelint rules were changed and the `.scss` files were adapted.
 In addition empty comments in `.scss` files are no longer allowed and removed.
 In migration projects either keep the Stylelint rules with the old settings or migrate all your styling files accordingly running `npm run format`.
 
+With the Intershop PWA version 5.2.0 the rendering of our demo/example view contexts was disabled by default.
+Each integrated view context triggers a REST call that will potentially decrease the SSR rendering performance, something that is not necessary if this feature is not actively used in a PWA project.
+For that reason the examples were commented out in the source code and have to be activated in the project source code if needed.
+See [CMS Integration - View Contexts](../concepts/cms-integration.md#view-contexts) for more information.
+
 ## From 5.0 to 5.1
 
 The OrderListComponent is strictly presentational, components using it have to supply the data.

diff --git a/src/app/pages/category/category-categories/category-categories.component.html b/src/app/pages/category/category-categories/category-categories.component.html
@@ -1,22 +1,26 @@
 <div class="category-page" [attr.data-testing-id]="category.uniqueId">
+  <!-- DISABLED VIEW CONTEXT --
   <div class="marketing-area">
     <ish-content-viewcontext
       *ngIf="category.categoryRef"
       viewContextId="viewcontext.include.category.base.top"
       [callParameters]="{ Category: category.categoryRef }"
     />
   </div>
+  -- DISABLED VIEW CONTEXT -->
   <div class="row">
     <div class="col-md-3">
       <div class="navigation-panel" [ngbCollapse]="isCollapsed">
         <ish-category-navigation [uniqueId]="category.categoryPath[0]" />
+        <!-- DISABLED VIEW CONTEXT --
         <div class="marketing-area">
           <ish-content-viewcontext
             *ngIf="category.categoryRef"
             viewContextId="viewcontext.include.category.navigation"
             [callParameters]="{ Category: category.categoryRef }"
           />
         </div>
+        -- DISABLED VIEW CONTEXT -->
       </div>
       <button type="button" class="d-md-none mobile-filter-toggle btn btn-link btn-link-action" (click)="toggle()">
         {{ 'search.mobile.filter.trigger' | translate }}
@@ -28,30 +32,36 @@
       <ish-breadcrumb />
       <h1>{{ category.name }}</h1>
 
+      <!-- DISABLED VIEW CONTEXT --
       <div class="marketing-area">
         <ish-content-viewcontext
           *ngIf="category.categoryRef"
           viewContextId="viewcontext.include.category.content.top"
           [callParameters]="{ Category: category.categoryRef }"
         />
       </div>
+      -- DISABLED VIEW CONTEXT -->
 
       <ish-category-list [categories]="category.children" />
 
+      <!-- DISABLED VIEW CONTEXT --
       <div class="marketing-area">
         <ish-content-viewcontext
           *ngIf="category.categoryRef"
           viewContextId="viewcontext.include.category.content.bottom"
           [callParameters]="{ Category: category.categoryRef }"
         />
       </div>
+      -- DISABLED VIEW CONTEXT -->
     </div>
   </div>
+  <!-- DISABLED VIEW CONTEXT --
   <div class="marketing-area">
     <ish-content-viewcontext
       *ngIf="category.categoryRef"
       viewContextId="viewcontext.include.category.base.bottom"
       [callParameters]="{ Category: category.categoryRef }"
     />
   </div>
+  -- DISABLED VIEW CONTEXT -->
 </div>
diff --git a/src/app/pages/category/category-products/category-products.component.html b/src/app/pages/category/category-products/category-products.component.html
@@ -3,13 +3,15 @@
   [attr.data-testing-id]="'family-page-' + category.uniqueId"
   id="family-page-top"
 >
+  <!-- DISABLED VIEW CONTEXT --
   <div class="marketing-area">
     <ish-content-viewcontext
       *ngIf="category.categoryRef"
       viewContextId="viewcontext.include.family.base.top"
       [callParameters]="{ Category: category.categoryRef }"
     />
   </div>
+  -- DISABLED VIEW CONTEXT -->
 
   <div class="row">
     <div class="col-md-3">
@@ -24,47 +26,55 @@
         <fa-icon [icon]="['fas', isCollapsed ? 'angle-down' : 'angle-up']" />
       </button>
 
+      <!-- DISABLED VIEW CONTEXT --
       <div class="marketing-area">
         <ish-content-viewcontext
           *ngIf="category.categoryRef"
           viewContextId="viewcontext.include.family.navigation"
           [callParameters]="{ Category: category.categoryRef }"
         />
       </div>
+      -- DISABLED VIEW CONTEXT -->
     </div>
     <div class="col-md-9">
       <ish-breadcrumb />
       <h1>{{ category.name }}</h1>
 
+      <!-- DISABLED VIEW CONTEXT --
       <div class="marketing-area">
         <ish-content-viewcontext
           *ngIf="category.categoryRef"
           viewContextId="viewcontext.include.family.content.top"
           [callParameters]="{ Category: category.categoryRef }"
         />
       </div>
+      -- DISABLED VIEW CONTEXT -->
 
       <ish-product-listing
         [categoryId]="category.uniqueId"
         [productListingId]="{ type: 'category', value: category.uniqueId }"
         fragmentOnRouting="family-page-top"
       />
 
+      <!-- DISABLED VIEW CONTEXT --
       <div class="marketing-area">
         <ish-content-viewcontext
           *ngIf="category.categoryRef"
           viewContextId="viewcontext.include.family.content.bottom"
           [callParameters]="{ Category: category.categoryRef }"
         />
       </div>
+      -- DISABLED VIEW CONTEXT -->
     </div>
   </div>
 
+  <!-- DISABLED VIEW CONTEXT --
   <div class="marketing-area">
     <ish-content-viewcontext
       *ngIf="category.categoryRef"
       viewContextId="viewcontext.include.family.base.bottom"
       [callParameters]="{ Category: category.categoryRef }"
     />
   </div>
+  -- DISABLED VIEW CONTEXT -->
 </div>
diff --git a/src/app/pages/product/product-detail/product-detail.component.html b/src/app/pages/product/product-detail/product-detail.component.html
@@ -47,11 +47,13 @@ <h1>
       <ish-product-warranty (submitWarranty)="setSelectedWarranty($event)" />
     </div>
 
+    <!-- DISABLED VIEW CONTEXT --
     <div class="marketing-area">
       <ish-content-viewcontext
         viewContextId="viewcontext.include.product.productinfo"
         [callParameters]="{ Product: product.sku }"
       />
     </div>
+    -- DISABLED VIEW CONTEXT -->
   </div>
 </div>
diff --git a/src/app/pages/product/product-detail/product-detail.component.spec.ts b/src/app/pages/product/product-detail/product-detail.component.spec.ts
@@ -101,7 +101,6 @@ describe('Product Detail Component', () => {
         "ish-lazy-product-add-to-quote",
         "ish-lazy-product-notification-edit",
         "ish-product-warranty",
-        "ish-content-viewcontext",
       ]
     `);
   });

diff --git a/src/app/pages/product/product-page.component.html b/src/app/pages/product/product-page.component.html
@@ -1,23 +1,27 @@
 <div class="product-page clearfix" data-testing-id="product-detail-page" itemscope itemtype="http://schema.org/Product">
   <ish-loading *ngIf="productLoading$ | async" />
   <div *ngIf="product$ | async as product">
+    <!-- DISABLED VIEW CONTEXT --
     <div class="marketing-area">
       <ish-content-viewcontext
         viewContextId="viewcontext.include.product.base.top"
         [callParameters]="{ Product: product.sku }"
       />
     </div>
+    -- DISABLED VIEW CONTEXT -->
 
     <ish-breadcrumb />
 
     <ish-product-detail />
 
+    <!-- DISABLED VIEW CONTEXT --
     <div class="marketing-area">
       <ish-content-viewcontext
         viewContextId="viewcontext.include.product.content.top"
         [callParameters]="{ Product: product.sku }"
       />
     </div>
+    -- DISABLED VIEW CONTEXT -->
 
     <ish-product-bundle-parts />
 
@@ -29,20 +33,24 @@
 
     <ish-product-links />
 
+    <!-- DISABLED VIEW CONTEXT --
     <div class="marketing-area">
       <ish-content-viewcontext
         viewContextId="viewcontext.include.product.content.bottom"
         [callParameters]="{ Product: product.sku }"
       />
     </div>
+    -- DISABLED VIEW CONTEXT -->
 
     <ish-lazy-recently-viewed *ngIf="(productLoading$ | async) !== true" />
 
+    <!-- DISABLED VIEW CONTEXT --
     <div class="marketing-area">
       <ish-content-viewcontext
         viewContextId="viewcontext.include.product.base.bottom"
         [callParameters]="{ Product: product.sku }"
       />
     </div>
+    -- DISABLED VIEW CONTEXT -->
   </div>
 </div>
diff --git a/src/app/pages/product/product-page.component.spec.ts b/src/app/pages/product/product-page.component.spec.ts
@@ -83,18 +83,14 @@ describe('Product Page Component', () => {
 
     expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
       [
-        "ish-content-viewcontext",
         "ish-breadcrumb",
         "ish-product-detail",
-        "ish-content-viewcontext",
         "ish-product-bundle-parts",
         "ish-retail-set-parts",
         "ish-product-detail-info",
         "ish-product-master-variations",
         "ish-product-links",
-        "ish-content-viewcontext",
         "ish-lazy-recently-viewed",
-        "ish-content-viewcontext",
       ]
     `);
   });

diff --git a/src/assets/sample-data/view_contexts_import.xml b/src/assets/sample-data/view_contexts_import.xml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<enfinity
+xmlns="http://www.intershop.com/xml/ns/enfinity/6.5/bc_pmc/impex"
+xmlns:dt="http://www.intershop.com/xml/ns/enfinity/6.5/core/impex-dt"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+xsi:schemaLocation="http://www.intershop.com/xml/ns/enfinity/6.5/bc_pmc/impex bc_pmc.xsd
+http://www.intershop.com/xml/ns/enfinity/6.5/core/impex-dt dt.xsd">
+<view-context id="viewcontext.include.category.base.bottom">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Category Base Marketing Bottom</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.category.base.top">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Category Base Marketing Top</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.category.content.bottom">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Category Content Marketing Bottom</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.category.content.top">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Category Content Marketing Top</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.category.navigation">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Category Navigation Panel Marketing</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.family.base.bottom">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Family Base Marketing Bottom</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.family.base.top">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Family Base Marketing Top</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.family.content.bottom">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Family Content Marketing Bottom</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.family.content.top">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Family Content Marketing Top</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.family.navigation">
+<definition-name>app_sf_base_cm:viewcontext.include.category.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Family Navigation Panel Marketing</display-name>
+<configuration-parameters>
+</configuration-parameters>
+</view-context>
+<view-context id="viewcontext.include.product.base.bottom">
+<definition-name>app_sf_base_cm:viewcontext.include.product.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Product Base Marketing Bottom</display-name>
+</view-context>
+<view-context id="viewcontext.include.product.base.top">
+<definition-name>app_sf_base_cm:viewcontext.include.product.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Product Base Marketing Top</display-name>
+</view-context>
+<view-context id="viewcontext.include.product.content.bottom">
+<definition-name>app_sf_base_cm:viewcontext.include.product.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Product Content Marketing Bottom</display-name>
+</view-context>
+<view-context id="viewcontext.include.product.content.top">
+<definition-name>app_sf_base_cm:viewcontext.include.product.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Product Content Marketing Top</display-name>
+</view-context>
+<view-context id="viewcontext.include.product.productinfo">
+<definition-name>app_sf_base_cm:viewcontext.include.product.pagelet2-ViewContext</definition-name>
+<display-name xml:lang="en-US">Product Info Marketing</display-name>
+</view-context>
+</enfinity>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,7 @@ @@
     *.crt
     *.key
     *.lua
+    *.xml
     .*ignore
     .husky
     .gitattributes
@@ Expand Down @@