heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update frontend

Browse Source
This commit is contained in:
Parsa Nazer
2026-05-28 10:35:35 +03:30
parent a89376e4c4 e5eaf80199
commit e6965fe3b8
11 changed files with 238 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/ProductsSlider.vue
+9 -5
View File
@@ -113,11 +113,15 @@ const onSwiper = (swiper: SwiperClass) => {
</Swiper>
</div>
<template #fallback>
<div class="w-full grid grid-cols-3 sm:grid-cols-4 gap-6">
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="w-full flex sm:grid justify-between sm:grid-cols-4 gap-6">
<div
class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-e-2xl sm:rounded-2xl sm:aspect-square"
/>
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
<div
class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-s-2xl sm:rounded-2xl sm:aspect-square"
/>
<div class="bg-neutral-100 size-full rounded-2xl aspect-square max-sm:hidden" />
</div>
</template>
</ClientOnly>
frontend/components/global/product-detail/Rating.vue
+8 -6
View File
@@ -1,21 +1,23 @@
<script lang="ts" setup>
// types
type Props = {
rate: number
}
rate: number;
haveRate?: boolean;
};
// props
defineProps<Props>();
</script>
<template>
<div class="flex items-center gap-2">
<span class="typo-p-sm font-normal translate-y-px">
{{ rate }}
<template v-if="haveRate">
{{ rate }}
</template>
<template v-else> ( بدون نظر ) </template>
</span>
<div class="flex items-center gap-1">
<Icon
@@ -30,4 +32,4 @@ defineProps<Props>();
/>
</div>
</div>
</template>
</template>
frontend/components/global/product-detail/Share.vue
-23
View File
@@ -1,23 +0,0 @@
<template>
<div class="flex items-center gap-6">
<span class="typo-p-md text-black">
اشتراک گذاری:
</span>
<div class="flex items-center gap-3">
<NuxtLink>
<Icon name="ci:instagram" class="**:stroke-slate-500 size-6" />
</NuxtLink>
<NuxtLink>
<Icon name="ci:facebook" class="**:stroke-slate-500 size-6" />
</NuxtLink>
<NuxtLink>
<Icon name="ci:tiktok" class="**:stroke-slate-500 size-6" />
</NuxtLink>
<NuxtLink>
<Icon name="ci:youtube" class="**:stroke-slate-500 size-6" />
</NuxtLink>
</div>
</div>
</template>
<script setup lang="ts">
</script>
frontend/components/global/product-detail/Slider.vue
+44 -35
View File
@@ -72,45 +72,54 @@ const changeSlide = (id: number) => {
</div>
<div class="relative w-full">
<Swiper
:slides-per-view="3"
:space-between="20"
@swiper="onSwiper"
class="w-full"
>
<SwiperSlide
v-for="slide in slides"
:key="slide.id"
<ClientOnly>
<Swiper
:slides-per-view="3"
:space-between="20"
@swiper="onSwiper"
class="w-full"
>
<div
@click="changeSlide(slide.id)"
:class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
<SwiperSlide
v-for="slide in slides"
:key="slide.id"
>
<NuxtImg
class="absolute object-cover size-full"
:src="slide.image"
loading="lazy"
fetch-priority="low"
:alt="String(slide.id)"
/>
</div>
</SwiperSlide>
<SwiperSlide
v-if="emptySlidesCount > 0"
v-for="slide in emptySlidesCount"
:key="slide"
>
<div
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
<div
@click="changeSlide(slide.id)"
:class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
>
<NuxtImg
class="absolute object-cover size-full"
:src="slide.image"
loading="lazy"
fetch-priority="low"
:alt="String(slide.id)"
/>
</div>
</SwiperSlide>
<SwiperSlide
v-if="emptySlidesCount > 0"
v-for="slide in emptySlidesCount"
:key="slide"
>
<Icon
name="ci:image-slash"
class="size-[40px] sm:size-[60px] **:fill-black/20"
/>
<div
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
>
<Icon
name="ci:image-slash"
class="size-[40px] sm:size-[60px] **:fill-black/20"
/>
</div>
</SwiperSlide>
</Swiper>
<template #fallback>
<div class="w-full grid grid-cols-3 gap-6">
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
</div>
</SwiperSlide>
</Swiper>
</template>
</ClientOnly>
<div
v-if="slides.length > 3"
frontend/components/product/ProductComments.vue
+1 -1
View File
@@ -102,7 +102,7 @@ const limitedComments = computed(() => {
v-if="!!comments"
class="bg-slate-50"
>
<div class="flex relative gap-8 my-42 container max-lg:flex-col">
<div class="flex relative gap-8 my-24 sm:my-42 container max-lg:flex-col">
<div
class="sticky top-0 flex flex-col gap-6 lg:min-w-100 h-fit bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
>
frontend/components/product/ProductDetails.vue
+1 -1
View File
@@ -9,7 +9,7 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
</script>
<template>
<section class="w-full container pt-20 flex flex-col gap-y-[1.5rem]">
<section class="w-full container sm:pt-20 flex flex-col gap-y-6">
<div class="w-full flex">
<span class="text-black max-lg:hidden typo-h-4 mb-4"> جزئیات محصول </span>
</div>
frontend/components/product/ProductHero/SaveButton.vue
+57
View File
@@ -0,0 +1,57 @@
<script lang="ts" setup>
// imports
import { useAuth } from "~/composables/api/auth/useAuth";
import useGetProduct from "~/composables/api/product/useGetProduct";
import useSaveProduct from "~/composables/api/product/useSaveProduct";
import { useToast } from "~/composables/global/useToast";
import { QUERY_KEYS } from "~/constants";
// states
const route = useRoute();
const id = route.params.id as string | undefined;
const { $queryClient: queryClient } = useNuxtApp();
const { token } = useAuth();
const { addToast } = useToast();
const { mutateAsync: saveProduct, isPending: isSaveProductPending } = useSaveProduct();
const { data: product, refetch: refetchProduct, isFetching: isFetchingPending } = useGetProduct(id);
// methods
const saveProductHandler = async () => {
if (!!token.value) {
await saveProduct({ product_slug: product.value!.slug });
await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.product] });
} else {
addToast({
options: { status: "info" },
message: "برای ذخیره کردن لطفا وارد شوید.",
});
}
};
</script>
<template>
<button
@click="saveProductHandler"
:disabled="isSaveProductPending || isFetchingPending"
class="px-2 sm:px-3 py-2 flex items-center gap-2 bg-slate-50 border-slate-200 border rounded-lg flex-center"
>
<span class="typo-label-sm max-sm:hidden"> ذخیره </span>
<Icon
v-if="isSaveProductPending || isFetchingPending"
name="ci:svg-spinners-180-ring-with-bg"
/>
<Icon
v-else
:class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
:name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
/>
</button>
</template>
frontend/components/product/ProductHero/ShareButton.vue
+69
View File
@@ -0,0 +1,69 @@
<script lang="ts" setup>
// imports
import { useToast } from "~/composables/global/useToast";
// types
type Props = {
product: Product;
};
// props
const props = defineProps<Props>();
const { product } = toRefs(props);
// states
const { addToast } = useToast();
// methods
const shareProduct = async () => {
const shareData = {
title: product.value.name,
text: `لینک اشتراک گذاری محصول ${product.value.name}`,
url: window.location.href,
};
// Native share
if (navigator.share) {
try {
await navigator.share(shareData);
} catch (error) {
console.error("Share canceled or failed", error);
}
return;
}
// Fallback → copy link
try {
await navigator.clipboard.writeText(shareData.url);
addToast({
message: "لینک کالا کپی شد !",
});
} catch (error) {
console.error("Clipboard failed", error);
addToast({
options: { status: "error" },
message: "کپی لینک کالا با خطا مواجه شد !",
});
}
};
</script>
<template>
<button
@click="shareProduct"
class="px-2 py-2 flex items-center gap-2 bg-slate-50 border-slate-200 border rounded-lg flex-center"
>
<span class="typo-label-sm max-sm:hidden"> ارسال </span>
<Icon
name="ci:bi-share"
/>
</button>
</template>
frontend/components/product/ProductHero/index.vue
+47 -52
View File
@@ -5,8 +5,6 @@ import useGetProduct from "~/composables/api/product/useGetProduct";
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
import useAddCartItem from "~/composables/api/orders/useAddCartItem";
import { useAuth } from "~/composables/api/auth/useAuth";
import useSaveProduct from "~/composables/api/product/useSaveProduct";
import { QUERY_KEYS } from "~/constants";
// state
@@ -14,11 +12,9 @@ const route = useRoute();
const id = route.params.id as string | undefined;
const { token } = useAuth();
const { $queryClient: queryClient } = useNuxtApp();
const { data: product, refetch: refetchProduct, isFetching: isFetchingPending } = useGetProduct(id);
const { mutateAsync: addCartItem, isPending: isAddCartItemPending } = useAddCartItem();
const { mutateAsync: saveProduct, isPending: isSaveProductPending } = useSaveProduct();
const selectedVariantId = ref(product.value!.variants[0].id);
const selectedQuantity = ref(1);
@@ -40,11 +36,6 @@ const addItemToCart = async () => {
await refetchProduct();
};
const saveProductHandler = async () => {
await saveProduct({ product_slug: product.value!.slug });
await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.product] });
};
// watch
watch([selectedVariantId, product], ([selectedVariantId, product]) => {
@@ -77,31 +68,32 @@ watch(
</script>
<template>
<div class="flex max-lg:flex-col lg:gap-12 xl:gap-16 container pt-[5rem] pb-28">
<div class="flex max-lg:flex-col lg:gap-12 xl:gap-16 container pt-8 sm:pt-20 pb-28">
<div class="flex flex-col gap-3 lg:hidden">
<div class="flex items-center justify-between w-full">
<NuxtLink
to="#"
class="typo-label-sm"
>
{{ product!.category.name }}
</NuxtLink>
<button
@click="saveProductHandler"
:disabled="isSaveProductPending || isFetchingPending || !token"
class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
>
<div class="flex items-center gap-1.5">
<NuxtLink
to="#"
class="typo-label-sm"
>
محصولات
</NuxtLink>
<Icon
v-if="isSaveProductPending || isFetchingPending"
name="ci:svg-spinners-180-ring-with-bg"
name="ci:bi-chevron-left"
size="14"
/>
<NuxtLink
to="#"
class="typo-label-sm"
>
{{ product!.category.name }}
</NuxtLink>
</div>
<Icon
v-else
:class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
:name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
/>
</button>
<div class="flex items-center gap-2">
<ShareButton :product="product!" />
<SaveButton />
</div>
</div>
<h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
{{ product!.name }}
@@ -136,7 +128,10 @@ watch(
<span class="max-sm:hidden"> تخفیف درصد </span>
</div>
</div>
<Rating :rate="product!.rating" />
<Rating
:rate="product!.rating"
:have-rate="product!.rating !== 0"
/>
</div>
</div>
<Slider
@@ -146,28 +141,28 @@ watch(
/>
<div class="lg:w-1/2 flex flex-col gap-3 mt-12">
<div class="flex items-center justify-between w-full max-lg:hidden">
<NuxtLink
to="#"
class="typo-label-sm"
>
{{ product!.category.name }}
</NuxtLink>
<button
@click="saveProductHandler"
:disabled="isSaveProductPending || isFetchingPending || !token"
class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
>
<div class="flex items-center gap-2.5">
<NuxtLink
to="#"
class="typo-label-sm"
>
محصولات
</NuxtLink>
<Icon
v-if="isSaveProductPending || isFetchingPending"
name="ci:svg-spinners-180-ring-with-bg"
name="ci:bi-chevron-left"
size="14"
/>
<Icon
v-else
:class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
:name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'ci:bi-bookmark'"
/>
</button>
<NuxtLink
to="#"
class="typo-label-sm"
>
{{ product!.category.name }}
</NuxtLink>
</div>
<div class="flex items-center gap-2">
<ShareButton :product="product!" />
<SaveButton />
</div>
</div>
<h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden">
{{ product!.name }}
@@ -205,12 +200,14 @@ watch(
<Rating
:rate="product!.rating"
:have-rate="product!.rating !== 0"
class="sm:hidden"
/>
</div>
<Rating
:rate="product!.rating"
:have-rate="product!.rating !== 0"
class="max-sm:hidden"
/>
</div>
@@ -338,8 +335,6 @@ watch(
</div>
<InfoCard />
<Share />
</div>
<ProductDescription
frontend/pages/product/[id].vue
+1 -1
View File
@@ -73,6 +73,6 @@ onMounted(() => {
</div>
<ProductComments :product="product!" />
<ChatButton :showChatButton="showChatButton" />
<!-- <ChatButton :showChatButton="showChatButton" /> -->
</div>
</template>
frontend/public/icons/bi-share.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M13.5 1a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 528 B