71 lines
3.9 KiB
HTML
71 lines
3.9 KiB
HTML
<div class="carousel-container" [class.novo-theme]="isnovo">
|
|
@if (loading()) {
|
|
<div class="carousel-loading">
|
|
<div class="spinner"></div>
|
|
<p>{{ 'carousel.loading' | translate }}</p>
|
|
</div>
|
|
} @else if (products().length > 0) {
|
|
<p-carousel
|
|
[value]="products()"
|
|
[numVisible]="6"
|
|
[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] | langRoute" class="item-link">
|
|
<div class="item-image">
|
|
<img [src]="getItemImage(product)" [alt]="product.name" loading="lazy" />
|
|
@if (product.discount > 0) {
|
|
<span class="discount-badge">-{{ product.discount }}%</span>
|
|
}
|
|
@if (product.badges && product.badges.length > 0) {
|
|
<div class="item-badges-overlay">
|
|
@for (badge of product.badges; track badge) {
|
|
<span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<h3 class="item-name">{{ product.name }}</h3>
|
|
|
|
@if (product.rating) {
|
|
<div class="item-rating">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="#497671" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
|
|
</svg>
|
|
<span class="rating-value">{{ product.rating }}</span>
|
|
<span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="item-price-row">
|
|
<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>
|
|
<button class="cart-icon-btn" (click)="addToCart($event, product)" [title]="'carousel.addToCart' | translate">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</ng-template>
|
|
</p-carousel>
|
|
}
|
|
</div>
|