From 74039c8dedb1bf148f266e9601f05f1ca26b04a4 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 3 Oct 2025 21:39:01 +0330
Subject: [PATCH] added product link for cart item

---
 frontend/components/cart/index/CartItem.vue | 36 ++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index d1793a3..85276eb 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -36,7 +36,7 @@ const { isLoading: cartImageIsLoading } = useImage({
 
 const { mutateAsync: deleteCartItem, isPending: deleteCartItemIsPending } = useDeleteCartItem();
 
-const { mutateAsync: addCartItem } = useAddCartItem();
+const { mutateAsync: addCartItem, isPending: addItemInCartQuantityIsPending } = useAddCartItem();
 
 // methods
 
@@ -153,7 +153,7 @@ watch(
                 </div>
 
                 <NuxtLink
-                    :to="`product/${data.product.id}`"
+                    :to="{ name: 'product-id', params: { id: data.product.slug } }"
                     class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black underline underline-offset-2"
                 >
                     {{ data.product.title }}
@@ -196,7 +196,22 @@ watch(
                             />
                         </button>
 
-                        <div class="size-10 flex-center">{{ counter }}</div>
+                        <div
+                            v-if="addItemInCartQuantityIsPending"
+                            class="size-10 flex-center"
+                        >
+                            <Icon
+                                :name="'svg-spinners:180-ring-with-bg'"
+                                class="size-[18px]"
+                            />
+                        </div>
+
+                        <div
+                            v-else
+                            class="size-10 flex-center"
+                        >
+                            {{ counter }}
+                        </div>
 
                         <button
                             @click="handleDecreaseQuantity"
@@ -246,7 +261,20 @@ watch(
                     />
                 </button>
 
-                <div class="size-10 text-sm flex-center">
+                <div
+                    v-if="addItemInCartQuantityIsPending"
+                    class="size-10 text-sm flex-center"
+                >
+                    <Icon
+                        :name="'svg-spinners:180-ring-with-bg'"
+                        class="size-[25px]"
+                    />
+                </div>
+
+                <div
+                    v-else
+                    class="size-10 text-sm flex-center"
+                >
                     {{ counter }}
                 </div>