Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop
This commit is contained in:
Parsa Nazer
@@ -32,7 +32,12 @@ const megaMenuCategories = computed(() => {
|
||||
subitems: item.subcategorys.map((item) => {
|
||||
return {
|
||||
title: item.name,
|
||||
link: item.slug,
|
||||
subitems: item.subcategorys.map((item) => {
|
||||
return {
|
||||
title: item.name,
|
||||
link: item.slug,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -7,7 +7,10 @@ type Props = {
|
||||
title: string;
|
||||
subitems: {
|
||||
title: string;
|
||||
link: string;
|
||||
subitems: {
|
||||
title: string;
|
||||
link: string;
|
||||
}[];
|
||||
}[];
|
||||
}[];
|
||||
};
|
||||
@@ -157,14 +160,12 @@ onMounted(() => {
|
||||
/>
|
||||
|
||||
<div class="container relative z-10">
|
||||
<div
|
||||
class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200"
|
||||
>
|
||||
<div class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200">
|
||||
<div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
|
||||
<button
|
||||
v-for="(item, index) in items"
|
||||
:key="item.title"
|
||||
class="text-black transition-all p-4 rounded-xl cursor-default text-start max-lg:text-sm"
|
||||
class="text-black transition-all p-4 rounded-xl cursor-default text-start text-sm max-lg:text-xs"
|
||||
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
|
||||
:id="`mega-menu-tab-${index}`"
|
||||
@mouseenter="menuTabMouseEnter(index)"
|
||||
@@ -188,17 +189,26 @@ onMounted(() => {
|
||||
// justifyContent: 'center',
|
||||
}"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="item in selectedItemSubItems"
|
||||
:to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
|
||||
@click="closeAfterNavigate"
|
||||
class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all max-lg:text-sm"
|
||||
<template
|
||||
v-for="mainItem in selectedItemSubItems"
|
||||
:key="mainItem.title"
|
||||
>
|
||||
<span class="truncate w-[90%] flex items-center gap-2">
|
||||
|
||||
<span class="text-primary px-4 py-2 flex items-center gap-2 text-sm max-lg:text-xs font-semibold">
|
||||
<span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
|
||||
{{ item.title }}
|
||||
{{ mainItem.title }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-for="item in mainItem.subitems"
|
||||
:to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
|
||||
@click="closeAfterNavigate"
|
||||
class="px-4 py-2 whitespace-nowrap h-fit text-slate-500/85 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all text-sm max-lg:text-xs"
|
||||
>
|
||||
<span class="truncate w-[90%]">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
|
||||
:id="product.id"
|
||||
:slug="product.slug"
|
||||
:title="product.name"
|
||||
:picture="product.variants[0].images[0].image"
|
||||
:picture="product.image ?? product.variants[0].images[0].image"
|
||||
:colors="product.colors"
|
||||
:price="product.variants[0].price"
|
||||
:rate="product.rating"
|
||||
|
||||
@@ -13,12 +13,12 @@ const highlights = ref<Highlight[]>([
|
||||
{
|
||||
icon: "/img/heymlz/footer-support.gif",
|
||||
title: "خدمات مشتری",
|
||||
description: "پشتیبانی استثنایی، راهحلهای پایدار برای شما",
|
||||
description: "پشتیبانی ویژه، راهحلی پایدار برای شما",
|
||||
},
|
||||
{
|
||||
icon: "/img/heymlz/footer-send.gif",
|
||||
title: "ارسال سریع و رایگان",
|
||||
description: "ارسال رایگان برای سفارشهای بالای ۱۵۰ دلار",
|
||||
title: "ارسال سریع و مطمئن",
|
||||
description: "پردازش محصولات با سرعت بالا و ارسال مطمئن",
|
||||
},
|
||||
{
|
||||
icon: "/img/heymlz/footer-share.gif",
|
||||
|
||||
@@ -91,7 +91,7 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
:id="product.id"
|
||||
:slug="product.slug"
|
||||
:title="product.name"
|
||||
:picture="product.variants[0].images[0].image"
|
||||
:picture="product.image ?? product.variants[0].images[0].image"
|
||||
:colors="product.colors"
|
||||
:price="product.variants[0].price"
|
||||
:rate="product.rating"
|
||||
|
||||
@@ -77,14 +77,32 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex max-lg:flex-col 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-[5rem] pb-28">
|
||||
<div class="flex flex-col gap-3 lg:hidden">
|
||||
<NuxtLink
|
||||
to="#"
|
||||
class="typo-label-sm"
|
||||
>
|
||||
{{ product!.category.name }}
|
||||
</NuxtLink>
|
||||
<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"
|
||||
>
|
||||
<Icon
|
||||
v-if="isSaveProductPending || isFetchingPending"
|
||||
name="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' : 'bi:bookmark'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
|
||||
{{ product!.name }}
|
||||
</h1>
|
||||
@@ -122,17 +140,17 @@ watch(
|
||||
v-model:selectedSlide="selectedSlide"
|
||||
:slides="selectedVariant!.images"
|
||||
/>
|
||||
<div class="lg:w-1/2 flex flex-col gap-3 lg:mt-12">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<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 max-lg:hidden"
|
||||
>
|
||||
class="typo-label-sm"
|
||||
>
|
||||
{{ product!.category.name }}
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="saveProductHandler"
|
||||
:disabled="isSaveProductPending || isFetchingPending"
|
||||
:disabled="isSaveProductPending || isFetchingPending || !token"
|
||||
class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
|
||||
>
|
||||
<Icon
|
||||
@@ -189,7 +207,10 @@ watch(
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProductDescription :description="product!.description" />
|
||||
<ProductDescription
|
||||
class="max-lg:hidden"
|
||||
:description="product!.description"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="typo-md sm:typo-p-lg"> تنوع رنگی : </span>
|
||||
@@ -305,6 +326,11 @@ watch(
|
||||
|
||||
<Share />
|
||||
</div>
|
||||
|
||||
<ProductDescription
|
||||
class="lg:hidden"
|
||||
:description="product!.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -37,7 +37,7 @@ export const API_ENDPOINTS = {
|
||||
},
|
||||
products: {
|
||||
get_all: "/products",
|
||||
categories: "/products/categories",
|
||||
categories: "/products/categories/v2",
|
||||
saved: "/accounts/favorites",
|
||||
},
|
||||
resellers_products: {
|
||||
|
||||
Vendored
+7
-2
@@ -1,4 +1,4 @@
|
||||
export { };
|
||||
export {};
|
||||
|
||||
declare global {
|
||||
type ApiPaginated<T> = {
|
||||
@@ -105,9 +105,13 @@ declare global {
|
||||
category: SubCategory;
|
||||
colors: string[];
|
||||
added_to_favorites: boolean;
|
||||
image: string | null;
|
||||
};
|
||||
|
||||
type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">;
|
||||
type ProductListItem = Pick<
|
||||
Product,
|
||||
"id" | "variants" | "name" | "rating" | "slug" | "category" | "colors" | "image"
|
||||
>;
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
@@ -156,6 +160,7 @@ declare global {
|
||||
image: string;
|
||||
product_count: number;
|
||||
parent: string;
|
||||
subcategorys: SubCategory[];
|
||||
};
|
||||
|
||||
type Address = {
|
||||
|
||||
Reference in New Issue
Block a user