perf: limit the number of items shown in the mini basket

intershop · Jul 27, 2022 · 7175453 · 7175453
1 parent 2f7c765
commit 7175453
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 1 deletion.
diff --git a/src/app/shared/components/basket/mini-basket-content/mini-basket-content.component.html b/src/app/shared/components/basket/mini-basket-content/mini-basket-content.component.html
@@ -6,7 +6,7 @@
 
 <ng-container *ngIf="lineItems$ | async as lineItems; else emptyBlock">
   <div class="product-rows-block">
-    <div *ngFor="let lineItem of lineItems" class="product-row">
+    <div *ngFor="let lineItem of lineItems | slice: 0:maxItemNumber" class="product-row">
       <ng-container ishProductContext [sku]="lineItem.productSKU">
         <div class="mini-product-img">
           <ish-product-image imageType="S" [link]="true"></ish-product-image>
@@ -20,6 +20,13 @@
         </div>
       </ng-container>
     </div>
+    <div
+      *ngIf="maxItemNumber && lineItems.length >= maxItemNumber + 1"
+      class="alert alert-info mb-0"
+      data-testing-id="show-all-cart-items-hint"
+    >
+      {{ 'shopping_cart.ministatus.show_all_items.text' | translate }}
+    </div>
   </div>
 
   <a class="view-cart btn btn-primary btn-lg btn-block" routerLink="/basket">

diff --git a/src/app/shared/components/basket/mini-basket-content/mini-basket-content.component.spec.ts b/src/app/shared/components/basket/mini-basket-content/mini-basket-content.component.spec.ts
@@ -51,10 +51,25 @@ describe('Mini Basket Content Component', () => {
   it('should render product rows if expanded', () => {
     fixture.detectChanges();
     expect(element.getElementsByClassName('product-row')).toHaveLength(3);
+    expect(element.querySelector('[data-testing-id=show-all-cart-items-hint]')).toBeFalsy();
   });
 
   it('should render product image component on expanded component', () => {
     fixture.detectChanges();
     expect(element.getElementsByTagName('ish-product-image')).toHaveLength(3);
   });
+
+  it('should not render all product rows if maxItemNumber is exceeded', () => {
+    component.maxItemNumber = 2;
+    fixture.detectChanges();
+    expect(element.getElementsByClassName('product-row')).toHaveLength(2);
+    expect(element.querySelector('[data-testing-id=show-all-cart-items-hint]')).toBeTruthy();
+  });
+
+  it('should render all product rows if maxItemNumber is undefined', () => {
+    component.maxItemNumber = undefined;
+    fixture.detectChanges();
+    expect(element.getElementsByClassName('product-row')).toHaveLength(3);
+    expect(element.querySelector('[data-testing-id=show-all-cart-items-hint]')).toBeFalsy();
+  });
 });
diff --git a/src/app/shared/components/basket/mini-basket-content/mini-basket-content.component.ts b/src/app/shared/components/basket/mini-basket-content/mini-basket-content.component.ts
@@ -13,6 +13,11 @@ import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-laz
 })
 @GenerateLazyComponent()
 export class MiniBasketContentComponent implements OnInit {
+  /**
+   maximum number of displayed items, undefined = display always all items
+   */
+  maxItemNumber = 25;
+
   basketError$: Observable<HttpError>;
   lineItems$: Observable<LineItemView[]>;
 

diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
@@ -1055,6 +1055,7 @@
   "shopping_cart.heading": "Ihr Warenkorb",
   "shopping_cart.ministatus.empty_cart.text": "Ihr Warenkorb ist leer.",
   "shopping_cart.ministatus.items.text": "{{0}} Artikel",
+  "shopping_cart.ministatus.show_all_items.text": "Gehen Sie zum Warenkorb, um alle Ihre Artikel anzusehen.",
   "shopping_cart.ministatus.view_cart.link": "Warenkorb ansehen",
   "shopping_cart.oci.transfer_basket.button": "Warenkorb übertragen",
   "shopping_cart.payment.creditCardExpiryDate.invalid.error": "Das Ablaufdatum der Kreditkarte muss eine Länge von 5 Zeichen und das Format nn/nn haben, wobei n eine Zahl ist.",

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -1055,6 +1055,7 @@
   "shopping_cart.heading": "Your Shopping Cart",
   "shopping_cart.ministatus.empty_cart.text": "Your cart is currently empty.",
   "shopping_cart.ministatus.items.text": "{{0, plural, one{# item} other{# items}}}",
+  "shopping_cart.ministatus.show_all_items.text": "Go to the shopping cart to view all your items.",
   "shopping_cart.ministatus.view_cart.link": "View Cart",
   "shopping_cart.oci.transfer_basket.button": "Transfer Cart",
   "shopping_cart.payment.creditCardExpiryDate.invalid.error": "The credit card expiration date must be 5 characters long and in the format nn/nn, where n is a number.",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -1055,6 +1055,7 @@
   "shopping_cart.heading": "Votre panier",
   "shopping_cart.ministatus.empty_cart.text": "Votre panier est actuellement vide.",
   "shopping_cart.ministatus.items.text": "{{0, plural, one{# article} other{# articles}}}",
+  "shopping_cart.ministatus.show_all_items.text": "Accédez au panier pour afficher tous vos articles.",
   "shopping_cart.ministatus.view_cart.link": "Afficher le panier",
   "shopping_cart.oci.transfer_basket.button": "Transférer le panier",
   "shopping_cart.payment.creditCardExpiryDate.invalid.error": "La date d’expiration de la carte de crédit doit contenir 5 caractères et être au format nn/nn, où n est un nombre.",