All files / src/app/shared/components/product/product-listing product-listing.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
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (fragmentOnRouting === 'product-list-top') {
<a id="product-list-top" title="top"></a>
} @if (productListingView$ | async; as listing) { @if (isEndlessScrolling) {
<div
  infiniteScroll
  (scrolled)="loadMoreProducts('down')"
  (scrolledUp)="loadMoreProducts('up')"
  [alwaysCallback]="true"
  [immediateCheck]="true"
  [infiniteScrollDistance]="scrollDistance"
>
  <ish-product-list-toolbar
    [itemCount]="listing.itemCount"
    [sortableAttributes]="listing.sortableAttributes"
    [viewType]="viewType$ | async"
    [sortBy]="sortBy$ | async"
    [fragmentOnRouting]="fragmentOnRouting"
  />
  <ish-product-list [products]="listing.products()" [categoryId]="categoryId" [viewType]="viewType$ | async" />
  <div class="row justify-content-center">
    @if (!listing.allPagesAvailable()) {
    <ish-product-list-paging
      [currentPage]="listing.lastPage"
      [pageIndices]="listing.pageIndices()"
      [fragmentOnRouting]="fragmentOnRouting"
    />
    }
  </div>
</div>
} @if (isPaging) {
<div>
  @if (currentPage$ | async; as currentPage) {
  <ng-template #pagingToolbar>
    <ish-product-list-toolbar
      [itemCount]="listing.itemCount"
      [sortableAttributes]="listing.sortableAttributes"
      [viewType]="viewType$ | async"
      [sortBy]="sortBy$ | async"
      [currentPage]="currentPage"
      [pageIndices]="listing.pageIndices(currentPage)"
      [fragmentOnRouting]="fragmentOnRouting"
      [isPaging]="true"
    />
  </ng-template>
  <ng-container *ngTemplateOutlet="pagingToolbar" />
  <ish-product-list
    [products]="listing.productsOfPage(currentPage)"
    [categoryId]="categoryId"
    [viewType]="viewType$ | async"
  />
  @if (listingLoading$ | async) {
  <ish-loading [standalone]="true" />
  }
  <ng-container *ngTemplateOutlet="pagingToolbar" />
  }
</div>
} }