From 0c349d816c0a5e0f7b8864a048c743c89d05722b Mon Sep 17 00:00:00 2001
From: kusowl <kushal.saha@outlook.com>
Date: Wed, 25 Mar 2026 15:48:14 +0530
Subject: [PATCH] fix: show empty cart if cart is empty

---
 src/app/shared/components/cart/cart.html | 53 +++++++++++++-----------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/app/shared/components/cart/cart.html b/src/app/shared/components/cart/cart.html
index e23d592..4c8befb 100644
--- a/src/app/shared/components/cart/cart.html
+++ b/src/app/shared/components/cart/cart.html
@@ -1,31 +1,36 @@
 <ul>
   @if (authService.authState() === AuthState.Unauthenticated) {
-  <li><a class="block h-full w-full" routerLink="/login">Login to access cart</a></li>
+    <li><a class="block h-full w-full" routerLink="/login">Login to access cart</a></li>
   } @else if (authService.authState() === AuthState.Loading) {
-  <li><a class="block h-full w-full">Loading</a></li>
+    <li><a class="block h-full w-full">Loading</a></li>
   } @else {
-  <ol
-    [class.pointer-events-none]="isLoading()"
-    [class.opacity-40]="isLoading()"
-    [class.cursor-block]="isLoading()"
-    class="rounded-none!"
-  >
-    @for (item of cart.items; track item.id) {
-    <app-cart-item
-      (qtyChangeEvent)="updateProductQty($event)"
-      (productDeleteEvent)="removeProduct($event)"
-      [cartItem]="item"
-    />
+    <ol
+      [class.cursor-block]="isLoading()"
+      [class.opacity-40]="isLoading()"
+      [class.pointer-events-none]="isLoading()"
+      class="rounded-none!"
+    >
+      @for (item of cart.items; track item.id) {
+        <app-cart-item
+          (productDeleteEvent)="removeProduct($event)"
+          (qtyChangeEvent)="updateProductQty($event)"
+          [cartItem]="item"
+        />
+      }
+    </ol>
+    @if (cart.itemsCount > 0) {
+
+      <div class="flex justify-between mt-4 px-2 font-bold text-lg">
+        <p>Total</p>
+        <p>Rs. {{ cart.totalPrice }}</p>
+      </div>
+
+      <li class="pt-4! mt-4 border-t border-gray-200 rounded-none!">
+        <a [routerLink]="`/checkout/address`" class="btn btn-primary px-4">Proceed to checkout</a>
+      </li>
     }
-  </ol>
-
-  <div class="flex justify-between mt-4 px-2 font-bold text-lg">
-    <p>Total</p>
-    <p>Rs. {{ cart.totalPrice }}</p>
-  </div>
-
-  <li class="pt-4! mt-4 border-t border-gray-200 rounded-none!">
-    <a [routerLink]="`/checkout/address`" class="btn btn-primary px-4">Proceed to checkout</a>
-  </li>
+  @else{
+    <li><a class="block h-full w-full">Cart is empty !</a></li>
+  }
   }
 </ul>