All files / src/app/shell/header/mini-basket mini-basket.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div
  class="quick-cart-link"
  [ngClass]="{ 'd-none': view !== 'full', 'd-md-block': view !== 'small', 'mini-cart-active': !isCollapsed }"
  ishClickOutside
  (isClickedOutside)="collapse()"
>
  <button type="button" class="btn btn-link" (click)="toggleCollapse()">
    <fa-icon [icon]="['fas', 'shopping-cart']" class="header-icon" />
    <span>{{ 'shopping_cart.ministatus.items.text' | translate : { '0': itemCount$ | async } }}</span>
    <ng-container *ngIf="itemTotal$ | async as itemTotal">
      <span> / </span> <span class="mini-cart-price">{{ itemTotal | ishPrice }}</span>
    </ng-container>
  </button>
 
  <div *ngIf="!isCollapsed" class="mini-cart">
    <ish-lazy-mini-basket-content />
  </div>
</div>
 
<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>