product.component.html (1714B)
1 <a class="card text-decoration-none" [routerLink]="[product().eid]" [attr.disabled]="addingToCart()"> 2 <header class="card-header d-flex justify-content-between align-items-start p-3 border-bottom-0"> 3 @if (product().brand) { 4 <span class="brand badge fw-semibold border rounded-2 px-2">{{ product().brand | titlecase }}</span> 5 } 6 @if (product().discount) { 7 <span class="discount badge fw-semibold border rounded-2 px-2 py-1">{{ discount | number: '.1' }}% OFF</span> 8 } 9 </header> 10 <div class="card-body pt-0"> 11 <h5 class="card-title">{{ product().product_name }}</h5> 12 <div class="rating d-flex gap-1 mb-2 text-warning align-items-center"> 13 <i class="bi bi-star" [ngClass]="ratingStars()"></i> 14 <small class="text-muted ms-1">{{ product().average_rating || 'No rating' }}</small> 15 </div> 16 <p class="card-text text-body-secondary">{{ product().description }}</p> 17 </div> 18 <div class="card-footer border-top-0 justify-content-between d-flex align-items-center"> 19 <div class="d-flex align-items-center"> 20 <h6 class="mb-0">{{ product().final_price | currency: 'USD' }}</h6> 21 @if (product()!.initial_price && product()!.discount) { 22 <small class="text-muted ms-2 text-decoration-line-through"> 23 {{ product().initial_price | currency: 'USD' }} 24 </small> 25 } 26 </div> 27 <button class="btn btn-add-cart py-0" [disabled]="product()!.stock === 0" (click)="addToCart($event)"> 28 @if (product()!.stock === 0) { 29 Out of Stock 30 } @else { 31 <i class="bi bi-cart-plus fs-5 pe-none"></i> 32 } 33 </button> 34 </div> 35 </a> 36 37 <div class="cart-morph rounded-circle" #morphDiv> 38 <span class="p-1">+1</span> 39 </div>