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
50
51
52
53
54
55
56
57
58
59
60
61
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div
  class="quick-cart-link"
  [ngClass]="{ 'd-none': view !== 'full', 'd-md-block': view !== 'small' }"
  ishClickOutside
  (isClickedOutside)="collapse()"
  ngbDropdown
  #miniBasketDropdown="ngbDropdown"
  placement="bottom-right"
>
  <button
    type="button"
    class="btn btn-link"
    ngbDropdownToggle
    aria-haspopup="menu"
    [attr.aria-label]="'shopping_cart.ministatus.label' | translate : { '0': itemCount$ | async }"
  >
    <i class="bi bi-cart-fill header-icon"></i>
    <span>{{ 'shopping_cart.ministatus.items.text' | translate : { '0': itemCount$ | async } }}</span>
    @if (itemTotal$ | async; as itemTotal) {
    <span> / </span> <span class="mini-cart-price">{{ itemTotal | ishPrice }}</span>
    }
  </button>
 
  <div ngbDropdownMenu class="mini-cart">
    <ish-lazy-mini-basket-content />
  </div>
</div>
 
<!-- Mobile -->
@if (view === 'small') { @if (itemCount$ | async; as itemCount) {
<a
  routerLink="/basket"
  class="item-count-container position-relative sticky-header-icon"
  [attr.aria-label]="'shopping_cart.ministatus.label' | translate : { '0': itemCount$ | async }"
>
  <i class="bi bi-cart-fill header-icon"></i>
  <span class="badge rounded-pill" [ngClass]="basketAnimation$ | async">{{ itemCount }}</span>
</a>
} @else {
<a
  class="item-count-container position-relative sticky-header-icon"
  [autoClose]="'outside'"
  [ngbPopover]="'shopping_cart.ministatus.empty_cart.text' | translate"
  placement="bottom-end"
  triggers="manual"
  #p="ngbPopover"
  (click)="p.open()"
  (keyup.enter)="p.open()"
  tabindex="0"
  [attr.aria-label]="'shopping_cart.ministatus.label' | translate : { '0': itemCount$ | async }"
>
  <i class="bi bi-cart-fill header-icon"></i>
  <span class="badge rounded-pill" [ngClass]="basketAnimation$ | async">0</span>
</a>
} }
 
<!-- dummy element tracking basket loading for cypress tests -->
@if (basketLoading$ | async) {
<span class="loading" style="display: none"></span>
}