product-details.component.html (5432B)
1 <div class="d-flex align-items-center"> 2 <a class="btn back py-1" [routerLink]="['/products']"> 3 <i class="bi bi-grid"></i> 4 Products 5 </a> 6 </div> 7 @if (product() === null) { 8 <h1 class="text-center text-danger">Product not found</h1> 9 } @else { 10 <div class="card border-0"> 11 <div class="card-text px-1 py-2 d-flex align-items-center justify-content-between"> 12 <div class="d-flex align-items-center gap-2"> 13 <span class="brand badge fw-semibold border rounded-2 px-2">{{ product()?.brand }}</span> 14 @if (product()?.category_name) { 15 <span class="text-muted">/</span> 16 <span class="category badge fw-semibold border rounded-2 px-2 py-1">{{ product()?.category_name }}</span> 17 } 18 </div> 19 <div class="d-flex align-items-center gap-2"> 20 @if ((product()?.stock ?? 0) > 0) { 21 <span class="stock badge fw-semibold border rounded-2 px-2 py-1"> 22 <i class="bi bi-check2-circle me-2"></i> 23 In Stock 24 </span> 25 } 26 @if (product()?.discount) { 27 <span class="discount badge fw-semibold border rounded-2 px-2 py-1">{{ discount | number: '.1' }}% OFF</span> 28 } 29 </div> 30 </div> 31 <img src="/product_img.jpg" class="card-img-top mt-3" [alt]="product()?.description" /> 32 <div class="card-body px-0"> 33 <h5 class="card-title d-flex justify-content-between align-items-center"> 34 {{ product()?.product_name }} 35 <button class="btn btn-add-cart" (click)="addToCart()"> 36 <i class="bi bi-cart-plus me-2"></i> 37 Add to Cart 38 </button> 39 </h5> 40 <p class="card-text text-body-secondary"> 41 {{ product()?.description }} 42 </p> 43 44 <div class="row"> 45 <section class="col"> 46 <ul class="list-group"> 47 <li class="list-group-item"> 48 <div class="me-auto d-flex align-items-center gap-2"> 49 @if (product()?.available_for_delivery) { 50 <i class="bi bi-check-square text-success"></i> 51 } @else { 52 <i class="bi bi-x-square text-danger"></i> 53 } 54 <div class="fw-bold">Available for Delivery</div> 55 </div> 56 <small class="text-muted ms-4"> 57 {{ 58 product()?.available_for_delivery 59 ? 'We ship to your preferred address. Just enter your location at checkout.' 60 : '' 61 }} 62 </small> 63 </li> 64 <li class="list-group-item"> 65 <div class="me-auto d-flex align-items-center gap-2 fw-bold"> 66 @if (product()?.available_for_pickup) { 67 <i class="bi bi-hand-thumbs-up text-success"></i> 68 } @else { 69 <i class="bi bi-hand-thumbs-down text-danger"></i> 70 Not 71 } 72 Available for Pickup 73 </div> 74 <small class="text-muted ms-4"> 75 {{ 76 product()?.available_for_pickup 77 ? 'You can pick up your order from our store.' 78 : 'This product is not available for in-store pickup.' 79 }} 80 </small> 81 </li> 82 <li class="list-group-item"> 83 <div class="me-auto d-flex align-items-center gap-2 fw-bold"> 84 @if (product()?.free_returns) { 85 <i class="bi bi-truck text-success"></i> 86 Free Returns 87 } @else { 88 <i class="bi bi-truck text-danger"></i> 89 Restocking Fee applies 90 } 91 </div> 92 <small class="text-muted ms-4"> 93 {{ 94 product()?.free_returns 95 ? 'You can return this product for free.' 96 : 'This product is not eligible for free returns.' 97 }} 98 </small> 99 </li> 100 </ul> 101 </section> 102 <section class="col"> 103 <ul class="list-group"> 104 <li class="list-group-item"> 105 <div class="me-auto d-flex align-items-center gap-2"> 106 <i class="bi bi-upc-scan"></i> 107 <div class="fw-bold">GTIN : {{ product()?.gtin }}</div> 108 </div> 109 <small class="text-muted ms-4">Global standard for tracking and inventory management</small> 110 </li> 111 <li class="list-group-item"> 112 <div class="me-auto d-flex align-items-center gap-2 fw-bold"> 113 <i class="bi bi-tag"></i> 114 SKU : {{ product()?.sku }} 115 </div> 116 <small class="text-muted ms-4">SKU (Stock Keeping Unit) is an internal inventory tracking code</small> 117 </li> 118 <li class="list-group-item"> 119 <div class="me-auto d-flex align-items-center gap-2 fw-bold"> 120 <i class="bi bi-box-seam"></i> 121 Stock : {{ product()?.stock || 'N/A' }} 122 </div> 123 <small class="text-muted ms-4"> 124 {{ 125 (product()?.stock ?? 0) > 0 126 ? 'In stock and ready to ship.' 127 : 'Currently out of stock. Please check back later.' 128 }} 129 </small> 130 </li> 131 </ul> 132 </section> 133 </div> 134 </div> 135 </div> 136 }