added no cart item style
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user