exercises

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

cart.component.html (2398B)

      1 <ul class="list-group mt-3">
      2   @for (item of cartService.cartItems(); track item.product.eid) {
      3     @let product = item.product;
      4     <li class="list-group-item p-0 border-0 mb-1">
      5       <a class="card text-decoration-none" [routerLink]="['products', product.eid]">
      6         <header class="card-header border-bottom-0">
      7           {{ product.product_name }}
      8         </header>
      9         <div class="card-body py-0 d-flex align-items-center justify-content-between">
     10           <div class="d-flex align-items-center gap-3">
     11             @if (product.brand) {
     12               <span class="brand badge fw-semibold border rounded-2 px-2">{{ product.brand | titlecase }}</span>
     13             }
     14             <span class="category badge fw-semibold border rounded-2 px-2 py-1">{{ product?.category_name }}</span>
     15           </div>
     16           <span class="d-flex align-items-center gap-2">
     17             Qty:
     18             <button class="qty btn btn-sm" (click)="updateQuantity(item, $event)">
     19               {{ item.quantity }}
     20               <i class="bi-bag-plus-fill pe-none fs-6 ms-2"></i>
     21             </button>
     22           </span>
     23         </div>
     24         <div class="card-footer border-top-0 justify-content-between d-flex align-items-center">
     25           <div class="d-flex align-items-center">
     26             <small class="mb-0 fw-semibold">
     27               Cost: {{ +item.product.final_price * item.quantity | currency: 'USD' : 'symbol' : '.2' }}
     28             </small>
     29             @if (product!.initial_price && product!.discount) {
     30               <small class="text-muted ms-2">
     31                 Savings: {{ +product.initial_price * item.quantity | currency: 'USD' : 'symbol' : '.2' }}
     32               </small>
     33             }
     34           </div>
     35           <button class="btn btn-sm btn-danger bi-trash" (click)="removeItem(product.eid, $event)"></button>
     36         </div>
     37       </a>
     38     </li>
     39   }
     40 </ul>
     41 <div class="actions d-flex justify-content-between align-items-center px-2">
     42   <strong class="total px-3 py-1 rounded-3">
     43     Total: {{ cartService.totalPrice() | currency: 'USD' : 'symbol' : '.2' }}
     44   </strong>
     45   <span class="d-flex gap-2">
     46     <button class="btn cancel btn-sm me-2" (click)="clearCart()">Clear Cart</button>
     47     @if (checkoutInProgress()) {
     48       <a class="btn checkout btn-sm disabled">Checkout</a>
     49     } @else {
     50       <a class="btn checkout btn-sm" [routerLink]="['/checkout']">Checkout</a>
     51     }
     52   </span>
     53 </div>