refactor: Update Cart.vue to improve empty cart message and add loadi…

…ng icon
beljp · Aug 19, 2024 · b8bebd6 · b8bebd6
1 parent 399091a
commit b8bebd6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/woonuxt_base/app/components/shopElements/Cart.vue b/woonuxt_base/app/components/shopElements/Cart.vue
@@ -28,16 +28,10 @@ const { cart, toggleCart, isUpdatingCart } = useCart();
         </div>
       </template>
       <!-- Empty Cart Message -->
-      <div v-else class="flex flex-col items-center justify-center flex-1 mb-20 text-gray-400">
-        <Icon name="ion:cart-outline" size="96" class="opacity-75 mb-5" />
-        <div class="mb-2 text-xl font-semibold">{{ $t('messages.shop.cartEmpty') }}</div>
-        <span class="mb-8">{{ $t('messages.shop.addProductsInYourCart') }}</span>
-        <NuxtLink
-          to="/products"
-          @click="toggleCart(false)"
-          class="flex items-center justify-center gap-3 p-2 px-3 mt-4 font-semibold text-center text-white rounded-lg shadow-md bg-primary hover:bg-primary-dark">
-          {{ $t('messages.shop.browseOurProducts') }}
-        </NuxtLink>
+      <EmptyCartMessage v-else-if="cart && cart.isEmpty" />
+      <!-- Cart Loading -->
+      <div v-else class="flex flex-col items-center justify-center flex-1 mb-20">
+        <LoadingIcon />
       </div>
     </ClientOnly>
     <!-- Cart Loading Overlay -->

diff --git a/woonuxt_base/app/components/shopElements/EmptyCartMessage.vue b/woonuxt_base/app/components/shopElements/EmptyCartMessage.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { toggleCart } = useCart();
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center flex-1 mb-20 text-gray-400">
+    <Icon name="ion:cart-outline" size="96" class="opacity-75 mb-5" />
+    <div class="mb-2 text-xl font-semibold">{{ $t('messages.shop.cartEmpty') }}</div>
+    <span class="mb-8">{{ $t('messages.shop.addProductsInYourCart') }}</span>
+    <NuxtLink
+      to="/products"
+      @click="toggleCart(false)"
+      class="flex items-center justify-center gap-3 p-2 px-3 mt-4 font-semibold text-center text-white rounded-lg shadow-md bg-primary hover:bg-primary-dark">
+      {{ $t('messages.shop.browseOurProducts') }}
+    </NuxtLink>
+  </div>
+</template>