All files / src/app/shared/components/product/product-inventory product-inventory.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
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (visible$ | async) {
  <div class="product-availability">
    @if (available$ | async) {
      <span class="product-in-stock">
        {{ 'product.instock.text' | translate }}
        @if (availableStock$ | async; as stock) {
          <ng-container class="availableStock">({{ stock }})</ng-container>
        }
        <link href="http://schema.org/InStock" itemprop="availability" />
      </span>
      @if (displayType === 'extended') {
        @if (supplierStock$ | async; as supplierStock) {
          @if (supplierStock.length) {
            <div class="pt-2 pb-3">
              @for (supStock of supplierStock; track supStock.id) {
                <div class="row">
                  <span class="col-6 stock-label">{{ supStock.displayName }}</span>
                  <span class="col-6 stock-level" [ngClass]="getStockLevel(supStock.availableStock)">
                    <!-- keep-localization-pattern: ^product\.inventory\.stock_level\..*$ -->
                    {{
                      'product.inventory.stock_level.' + getStockLevel(supStock.availableStock)
                        | translate: { count: supStock.availableStock }
                    }}
                  </span>
                </div>
              }
            </div>
          }
        }
      }
    } @else {
      <span class="product-out-of-stock">
        {{ 'product.out_of_stock.text' | translate }}
        <link href="http://schema.org/OutOfStock" itemprop="availability" />
      </span>
    }
  </div>
}