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,6 +23,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
 </script>
 
 <template>
+    <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}`"
@@ -67,4 +68,5 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
                 />
             </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

@@ -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"
+                class="flex flex-col gap-20"
+                v-if="filteredCategories.some(cat => cat.subcategorys.length > 0)"
             >
-                    <div class="w-full flex items-center justify-between">
-                        <span>
+
+                <template v-for="mainCategory in filteredCategories">
+                    <div
+                        class="flex flex-col gap-12"
+                        v-if="mainCategory.subcategorys.length > 0"
+                    >
+                        <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 mt-12"
+                            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.icon"
+                                :picture="category.image"
                                 :count="20"
                                 description="یک دسته بندی تستasdasd"
                                 dark-layer
                             />
                         </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