From 8e706e92931cf7811e532306526f9ce0c4c99e52 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 13 Mar 2025 20:22:58 +0330
Subject: [PATCH] added no cart item style

---
 frontend/pages/cart/index.vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/cart/index.vue b/frontend/pages/cart/index.vue
index 3a97f13..f6052b6 100644
--- a/frontend/pages/cart/index.vue
+++ b/frontend/pages/cart/index.vue
@@ -7,7 +7,7 @@ import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
 
 definePageMeta({
     layout: "cart",
-    middleware: ["check-is-logged-in", 'check-has-cart-item'],
+    middleware: "check-is-logged-in",
     pageTitle: "سبد خرید",
     prevPage: { name: "index", label: "بازگشت به خانه" },
     nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
@@ -15,12 +15,21 @@ definePageMeta({
 
 // queries
 
-const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
+const { data: cart, isLoading: cartIsLoading, suspense } = useGetOrdersCart();
+
+await suspense();
+
+// computed
+
+const hasCartItem = computed(
+    () => !!cart.value && cart.value.items.length! > 0
+);
 </script>
 
 <template>
     <div class="w-full flex flex-col gap-4 lg:gap-6">
         <div
+            v-if="hasCartItem"
             class="flex items-center justify-between w-full gap-3 px-5 py-4 rounded-xl bg-slate-50 border border-slate-200"
         >
             <Skeleton
@@ -52,10 +61,16 @@ const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
 
         <div v-else class="w-full h-max">
             <div v-if="!cart?.items.length" class="flex flex-grow w-full">
-                <Placeholder
-                    title="محصولی در سبد خرید یافت نشد :("
-                    icon="bi:cart"
-                />
+                <Placeholder title="سبد خرید شما خالی است :(" icon="bi:cart">
+                    <template #actions>
+                        <NuxtLink :to="{ name: 'products' }">
+                            <Button class="rounded-full" size="md">
+                                <span> مشاهده محصولات </span>
+                                <Icon name="ci:left-rotation" size="24" />
+                            </Button>
+                        </NuxtLink>
+                    </template>
+                </Placeholder>
             </div>
             <ul v-else class="w-full flex flex-col gap-4 lg:gap-6">
                 <CartItem