fix: click empty mini cart in mobile view

intershop · Jul 15, 2024 · 5ae95c3 · 5ae95c3
1 parent c3d4b79
commit 5ae95c3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/app/shell/header/mini-basket/mini-basket.component.html b/src/app/shell/header/mini-basket/mini-basket.component.html
@@ -17,10 +17,32 @@
   </div>
 </div>
 
-<a routerLink="/basket" *ngIf="view === 'small'" class="item-count-container position-relative">
-  <fa-icon [icon]="['fas', 'shopping-cart']" class="header-icon" />
-  <span class="badge badge-pill" [ngClass]="basketAnimation$ | async">{{ itemCount$ | async }}</span>
-</a>
+<ng-container *ngIf="view === 'small'">
+  <a
+    *ngIf="itemCount$ | async as itemCount; else emptyMobileCart"
+    routerLink="/basket"
+    class="item-count-container position-relative"
+  >
+    <fa-icon [icon]="['fas', 'shopping-cart']" class="header-icon" />
+    <span class="badge badge-pill" [ngClass]="basketAnimation$ | async">{{ itemCount }}</span>
+  </a>
+  <ng-template #emptyMobileCart>
+    <a
+      class="item-count-container position-relative"
+      [autoClose]="'outside'"
+      [ngbPopover]="'shopping_cart.ministatus.empty_cart.text' | translate"
+      placement="bottom"
+      triggers="manual"
+      #p="ngbPopover"
+      (click)="p.open()"
+      (keyup.enter)="p.open()"
+      tabindex="0"
+    >
+      <fa-icon [icon]="['fas', 'shopping-cart']" class="header-icon" />
+      <span class="badge badge-pill" [ngClass]="basketAnimation$ | async">0</span>
+    </a>
+  </ng-template>
+</ng-container>
 
 <!-- dummy element tracking basket loading for cypress tests -->
 <span *ngIf="basketLoading$ | async" class="loading" style="display: none"></span>
diff --git a/src/app/shell/shell.module.ts b/src/app/shell/shell.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Injector, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { AuthorizationToggleModule } from 'ish-core/authorization-toggle.module';
@@ -51,6 +51,7 @@ const exportedComponents = [CookiesBannerComponent, FooterComponent, HeaderCompo
     IconModule,
     NgbCollapseModule,
     NgbDropdownModule,
+    NgbPopoverModule,
     PipesModule,
     QuickorderExportsModule,
     RoleToggleModule,