Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

frontend/components/global/BlogPost.vue

@@ -10,6 +10,7 @@ type Props = {
     description: string;
     link: string;
     variant?: "sm" | "lg";
+    image: string,
 }
 
 // props
@@ -45,7 +46,7 @@ const {} = toRefs(props);
             </Tag>
 
             <img
-                src="/img/hero-bg.jpg"
+                :src="image"
                 class="absolute size-full object-cover z-10"
                 alt=""
             />
@@ -104,7 +105,7 @@ const {} = toRefs(props);
 
         <img
             v-if="variant === 'lg'"
-            src="/img/hero-bg.jpg"
+            :src="image"
             class="absolute size-full object-cover z-10"
             alt=""
         />

frontend/components/global/CategoryCard.vue

@@ -23,48 +23,50 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 </script>
 
 <template>
-    <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
-        <img
-            :id="`category-image-${id}`"
-            class="absolute object-contain size-full"
-            :src="picture"
-            alt=""
-        />
-        <div
-            v-if="darkLayer"
-            class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
-        />
-
-        <div
-            class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
-        >
+    <NuxtLink :to="`/products?category=${id}`">
+        <div class="relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
+            <img
+                :id="`category-image-${id}`"
+                class="absolute object-contain size-full"
+                :src="picture"
+                alt=""
+            />
             <div
-                :class="
+                v-if="darkLayer"
+                class="bg-linear-to-t from-black/50 to-transparent to-40% absolute z-10 size-full"
+            />
+
+            <div
+                class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
+            >
+                <div
+                    :class="
                     colorObject?.isLight && !darkLayer
                         ? 'text-black'
                         : 'text-white'
                 "
-                class="flex flex-col gap-2"
-            >
-                <div class="typo-s-h-md">
-                    {{ category }}
-                    <span class="typo-p-xs -translate-y-1 inline-block mr-1">
+                    class="flex flex-col gap-2"
+                >
+                    <div class="typo-s-h-md">
+                        {{ category }}
+                        <span class="typo-p-xs -translate-y-1 inline-block mr-1">
                         {{ count }}
                     </span>
+                    </div>
+                    <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
                 </div>
-                <span class="typo-p-md">محصولات ما را مشاهده کنید</span>
-            </div>
 
-            <Icon
-                size="24"
-                name="ci:arrow-left"
-                class="mb-1"
-                :class="
+                <Icon
+                    size="24"
+                    name="ci:arrow-left"
+                    class="mb-1"
+                    :class="
                     colorObject?.isLight && !darkLayer
                         ? '**:stroke-black'
                         : '**:stroke-white'
                 "
-            />
+                />
+            </div>
         </div>
-    </div>
+    </NuxtLink>
 </template>

frontend/components/home/Categories.vue

@@ -52,7 +52,7 @@ const onSwiper = (swiper: SwiperClass) => {
                         dark-layer
                         :id="slide.id"
                         :category="slide.name"
-                        :picture="slide.icon"
+                        :picture="slide.image"
                         :count="slide.product_count"
                         description="توضیحات دسته بندی"
                     />

frontend/components/home/LatestStories.vue

@@ -24,6 +24,7 @@ const {} = toRefs(props);
         <div class="flex gap-12">
             <div class="flex-1 flex flex-col gap-12">
                 <BlogPost
+                    image="/img/blog-1.jpeg"
                     description="aaasd"
                     title="asd"
                     :comments="2"
@@ -32,6 +33,7 @@ const {} = toRefs(props);
                     tag="asdsa"
                 />
                 <BlogPost
+                    image="/img/blog-2.jpeg"
                     description="aaasd"
                     title="asd"
                     :comments="2"
@@ -42,6 +44,7 @@ const {} = toRefs(props);
             </div>
             <div class="flex-[0.8] flex flex-col">
                 <BlogPost
+                    image="/img/blog-3.jpeg"
                     description="aaasd"
                     title="asd"
                     :comments="2"
@@ -51,6 +54,7 @@ const {} = toRefs(props);
                     variant="sm"
                 />
                 <BlogPost
+                    image="/img/blog-4.jpeg"
                     description="aaasd"
                     title="asd"
                     :comments="2"

frontend/components/product/ProductHero.vue

@@ -22,11 +22,11 @@ const slides = computed(() => {
         },
         {
             id: 1,
-            picture: product.value!.image2
+            picture: product.value?.image2 ?? product.value!.image1
         },
         {
             id: 2,
-            picture: product.value!.image3
+            picture: product.value!.image3 ?? product.value!.image1
         }
     ];
 });
@@ -46,9 +46,12 @@ const slides = computed(() => {
                 <span class="typo-p-2xl"> {{ product!.price }} </span>
                 <Rating />
             </div>
-            <p class="typo-p-md text-slate-500 text-justify">
-                {{ product!.description }}
-            </p>
+
+            <p
+                class="py-8 typo-p-md text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
+                v-html="product!.description"
+            />
+
             <div class="w-full flex flex-col gap-6 mt-4">
                 <RemainQuantity
                     :maxQuantity="product!.in_stock"

frontend/composables/api/home/useHomeData.ts

@@ -6,7 +6,7 @@ import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
 // types
 
 export type GetHomeDataResponse = {
-    "sliders":  {
+    "sliders": {
         "id": number,
         "link": string,
         "title": string,
@@ -14,12 +14,7 @@ export type GetHomeDataResponse = {
         "image": string | null,
         "video": string | null
     }[],
-    "sub_categories":  {
-        "id": number,
-        "name": string,
-        "icon": string,
-        "product_count": number,
-    }[],
+    "sub_categories": SubCategory[],
     "products": Product[],
     "difreance_section": {
         "image1": string,

frontend/composables/api/products/useGetProducts.ts

@@ -50,7 +50,7 @@ const useGetProducts = (params?: GetProductsFilters) => {
                     category: params?.category,
                     price_gte: params?.price_gte,
                     price_lte: params?.price_lte,
-                    offest: params?.page! * 9 - 9,
+                    offset: params?.page ? Number(params.page) * 9 - 9 : 0,
                     limit: 9,
                 },
             }

frontend/pages/category.vue

@@ -17,11 +17,12 @@ const filteredCategories = computed(() => {
 
     if (debouncedSearch.value.length > 0) {
         return categories.value!.map((cat) => {
-            cat.subcategorys = cat.subcategorys.filter((subcat) => {
+            const copyOfCategory = { ...cat };
+            copyOfCategory.subcategorys = copyOfCategory.subcategorys.filter((subcat) => {
                 return subcat.name.includes(debouncedSearch.value);
             });
 
-            return cat;
+            return copyOfCategory;
         });
     }
 
@@ -66,32 +67,43 @@ await useAsyncData(async () => {
             </Input>
         </div>
         <Transition name="fade" mode="out-in">
-            <div v-if="filteredCategories">
-                <div
-                    class="flex flex-col gap-6"
-                    v-for="mainCategory in filteredCategories"
-                >
-                    <div class="w-full flex items-center justify-between">
-                        <span>
-                            {{ mainCategory.name }}
-                        </span>
-                    </div>
+            <div
+                class="flex flex-col gap-20"
+                v-if="filteredCategories.some(cat => cat.subcategorys.length > 0)"
+            >
+
+                <template v-for="mainCategory in filteredCategories">
                     <div
-                        v-auto-animate
-                        class="grid grid-cols-3 gap-4 w-full mt-12"
+                        class="flex flex-col gap-12"
+                        v-if="mainCategory.subcategorys.length > 0"
                     >
-                        <CategoryCard
-                            v-for="category in mainCategory.subcategorys"
-                            :key="category.id"
-                            :id="category.id"
-                            :category="category.name"
-                            :picture="category.icon"
-                            :count="20"
-                            description="یک دسته بندی تستasdasd"
-                            dark-layer
-                        />
+                        <div class="w-full flex items-center justify-between gap-8">
+                            <div class="flex items-center gap-2">
+<!--                                <img :src="mainCategory.icon" alt="" class="w-[30px] opacity-50" />-->
+                                <span class="typo-h-5">
+                                    {{ mainCategory.name }}
+                                </span>
+                            </div>
+                            <div class="h-px w-full bg-slate-200" />
+                        </div>
+                        <div
+                            v-auto-animate
+                            class="grid grid-cols-3 gap-4 w-full"
+                        >
+                            <CategoryCard
+                                v-for="category in mainCategory.subcategorys"
+                                :key="category.id"
+                                :id="category.id"
+                                :category="category.name"
+                                :picture="category.image"
+                                :count="20"
+                                description="یک دسته بندی تستasdasd"
+                                dark-layer
+                            />
+                        </div>
                     </div>
-                </div>
+                </template>
+
             </div>
 
             <div v-else class="flex w-full mt-12">

frontend/pages/product/[id].vue

@@ -30,7 +30,7 @@ await useAsyncData(async () => {
         <ProductVideo />
         <ProductComments />
         <ProductDetails />
-        <ProductsSlider title="محصولات مشابه" />
+<!--        <ProductsSlider title="محصولات مشابه" />-->
         <ChatButton />
     </div>
 </template>

frontend/types/global.d.ts

@@ -57,6 +57,7 @@ declare global {
         "name": string,
         "slug": string,
         "icon": string,
+        "image" : string,
         "product_count": string,
         "parent": string,
         "show": boolean