56 lines
4.1 KiB
HTML
56 lines
4.1 KiB
HTML
|
<div class="carousel-container" [class.novo-theme]="isnovo">
|
|||
|
|
@if (loading()) {
|
|||
|
|
<div class="carousel-loading">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<p>Загрузка товаров...</p>
|
|||
|
|
</div>
|
|||
|
|
} @else if (products().length > 0) {
|
|||
|
|
<p-carousel
|
|||
|
|
[value]="products()"
|
|||
|
|
[numVisible]="4"
|
|||
|
|
[numScroll]="1"
|
|||
|
|
[circular]="true"
|
|||
|
|
[responsiveOptions]="responsiveOptions"
|
|||
|
|
[autoplayInterval]="3000"
|
|||
|
|
[showNavigators]="true"
|
|||
|
|
[showIndicators]="true">
|
|||
|
|
<ng-template let-product pTemplate="item">
|
|||
|
|
<div class="item-card">
|
|||
|
|
<a [routerLink]="['/item', product.itemID]" class="item-link">
|
|||
|
|
<div class="item-image">
|
|||
|
|
<img [src]="getItemImage(product)" [alt]="product.name" loading="lazy" />
|
|||
|
|
@if (product.discount > 0) {
|
|||
|
|
<div class="discount-badge">-{{ product.discount }}%</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-details">
|
|||
|
|
<h3 class="item-name">{{ product.name }}</h3>
|
|||
|
|
|
|||
|
|
<div class="item-rating" *ngIf="product.rating">
|
|||
|
|
<span class="rating-stars">⭐ {{ product.rating }}</span>
|
|||
|
|
<span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-price">
|
|||
|
|
@if (product.discount > 0) {
|
|||
|
|
<span class="original-price">{{ product.price }} {{ product.currency }}</span>
|
|||
|
|
<span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ product.currency }}</span>
|
|||
|
|
} @else {
|
|||
|
|
<span class="current-price">{{ product.price }} {{ product.currency }}</span>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<button class="add-to-cart-btn" (click)="addToCart(product)">
|
|||
|
|
В корзину
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</ng-template>
|
|||
|
|
<ul class="p-carousel-indicator-list" data-pc-section="indicatorlist"><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="1" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="2" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="3" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="4" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="5" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="6" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator p-carousel-indicator-active" data-p-active="true" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="0" aria-label="7" aria-current="page" data-pc-section="indicatorbutton"></button></li><!----></ul>
|
|||
|
|
</p-carousel>
|
|||
|
|
}
|
|||
|
|
</div>
|