perf: disable rendering of view contexts by default (#1650)

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

Hide file tree

Showing 10 changed files with 160 additions and 9 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,42 @@ 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.
+Be aware that some Jest component tests need to be adapted once view contexts are enabled (`MockComponent(ContentViewcontextComponent),`).
+
+> [!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
@@ -27,6 +27,11 @@ For ICM 7.10 and ICM 11 this is done by default with a duplicated `encodeURIComp
 For ICM 12 and newer this needs to be changed to a single `encodeURIComponent` with additional `+` character handling.
 The ICM 12 handling is already prepared in [`encodeResourceID`](../../src/app/core/utils/url-resource-ids.ts) and needs to be activated in the source code if the Intershop PWA is used together with ICM 12.
 
+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
@@ -5,7 +5,6 @@ import { instance, mock, when } from 'ts-mockito';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
-import { ContentViewcontextComponent } from 'ish-shared/cms/components/content-viewcontext/content-viewcontext.component';
 import { ProductAddToBasketComponent } from 'ish-shared/components/product/product-add-to-basket/product-add-to-basket.component';
 import { ProductIdComponent } from 'ish-shared/components/product/product-id/product-id.component';
 import { ProductInventoryComponent } from 'ish-shared/components/product/product-inventory/product-inventory.component';
@@ -40,7 +39,6 @@ describe('Product Detail Component', () => {
 
     await TestBed.configureTestingModule({
       declarations: [
-        MockComponent(ContentViewcontextComponent),
         MockComponent(LazyProductAddToOrderTemplateComponent),
         MockComponent(LazyProductAddToQuoteComponent),
         MockComponent(LazyProductNotificationEditComponent),
@@ -101,7 +99,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
@@ -8,7 +8,6 @@ import { CategoryView } from 'ish-core/models/category-view/category-view.model'
 import { createProductView } from 'ish-core/models/product-view/product-view.model';
 import { Product, ProductCompletenessLevel } from 'ish-core/models/product/product.model';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
-import { ContentViewcontextComponent } from 'ish-shared/cms/components/content-viewcontext/content-viewcontext.component';
 import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
 import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 
@@ -36,7 +35,6 @@ describe('Product Page Component', () => {
     await TestBed.configureTestingModule({
       declarations: [
         MockComponent(BreadcrumbComponent),
-        MockComponent(ContentViewcontextComponent),
         MockComponent(LazyRecentlyViewedComponent),
         MockComponent(LoadingComponent),
         MockComponent(ProductBundlePartsComponent),
@@ -83,18 +81,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",
       ]
     `);
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,7 @@ @@
     *.crt
     *.key
     *.lua
+    *.xml
     .*ignore
     .husky
     .gitattributes
@@ Expand Down @@