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

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-11-01 20:35:55 +03:30
parent 6524ae7605
commit 4fde6357d1
16 changed files with 292 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/CategoryCard.vue
+1 -1
View File
@@ -26,7 +26,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
</script>
<template>
<NuxtLink :to="`/products/category/${slug}`">
<NuxtLink :to="{ name: 'products-slug', params: { slug: ['category', slug] } }">
<div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
<Transition name="fade">
<video
frontend/components/global/FilterButton.vue
+1 -1
View File
@@ -9,7 +9,7 @@
<Button
end-icon="ci:filter"
variant="outlined"
class="max-lg:size-11 rounded-xl max-lg:aspect-square lg:py-3.5"
class="max-lg:size-11 rounded-xl max-lg:aspect-square lg:py-3.5 relative"
>
<span class="hidden lg:block"> فیلتر محصولات </span>
</Button>
frontend/components/global/MegaMenu.vue
+18 -13
View File
@@ -31,7 +31,7 @@ const isScrollLocked = useScrollLock(window);
const navbarEl = ref<HTMLElement | null>(null);
const { height: navbarHeight } = useElementSize(navbarEl);
const { $gsap: gsap } = useNuxtApp();
const { $gsap: gsap, hooks } = useNuxtApp();
let gsapTimeline: gsap.core.Timeline;
const prevNavbarStyle = ref({
@@ -71,6 +71,12 @@ const updatePrevStyle = () => {
prevNavbarStyle.value.itemFilter = getComputedStyle(headerNavbarItemEl).filter;
};
const closeAfterNavigate = () => {
hooks.hookOnce("page:finish", () => {
emit("update:isOpen", false);
});
};
// watches
watch(
@@ -92,12 +98,9 @@ watch(isOpen, async (newValue) => {
updatePrevStyle();
gsapTimeline
.to(
".header-navbar-item",
{
filter: "invert(0%)",
}
)
.to(".header-navbar-item", {
filter: "invert(0%)",
})
.to(
"#header-navbar",
{
@@ -146,7 +149,7 @@ onMounted(() => {
<div
v-if="isOpen"
:style="{ marginTop: `${navbarHeight}px` }"
class="fixed right-0 top-0 w-full z-999 bg-black/50 h-svh border-t border-slate-200 flex justify-center"
class="max-md:hidden fixed right-0 top-0 w-full z-1100 bg-black/50 h-svh border-t border-slate-200 flex justify-center"
>
<div class="container">
<div
@@ -157,7 +160,7 @@ onMounted(() => {
<button
v-for="(item, index) in items"
:key="item.title"
class="text-black transition-all p-4 rounded-xl cursor-default text-start"
class="text-black transition-all p-4 rounded-xl cursor-default text-start max-lg:text-sm"
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
:id="`mega-menu-tab-${index}`"
@mouseenter="menuTabMouseEnter(index)"
@@ -175,7 +178,7 @@ onMounted(() => {
>
<div
:key="selectedItem"
class="grid grid-cols-4 p-4 text-back w-full h-fit"
class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4 text-back w-full h-fit"
:style="{
// gridTemplateRows: 'repeat(5, auto)',
// justifyContent: 'center',
@@ -183,10 +186,12 @@ onMounted(() => {
>
<NuxtLink
v-for="item in selectedItemSubItems"
:to="'https://google.com'"
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"
: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"
>
<span class="truncate w-[90%]">
<span class="truncate w-[90%] flex items-center gap-2">
<span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
{{ item.title }}
</span>
</NuxtLink>
frontend/components/global/ProductsGrid.vue
+6 -4
View File
@@ -15,25 +15,27 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] container">
<section class="w-full flex flex-col gap-10 @min-[48rem]:gap-[4rem] py-[5rem] container @container">
<div
v-if="withHeader"
class="w-full flex justify-between items-center"
>
<span class="text-black typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">
<span class="text-black typo-h-6 @max-[40rem]:text-xl @min-[48rem]:typo-h-5 @min-[64rem]:typo-h-4">
{{ title }}
</span>
<NuxtLink to="/products">
<Button
variant="primary"
class="rounded-full max-md:h-[38px] max-md:text-xs"
class="rounded-full @max-[48rem]:h-[38px] @max-[48rem]:text-xs"
end-icon="ci:arrow-left"
>
نمایش همه
</Button>
</NuxtLink>
</div>
<ul class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm:gap-8">
<ul
class="grid grid-cols-2 @min-[40rem]:grid-cols-3 @min-[64rem]:grid-cols-4 @min-[80rem]:grid-cols-5 gap-y-8 gap-5 @min-[40rem]:gap-8"
>
<li
class="w-full"
v-for="product in products"
frontend/components/product/ChatBox/ChatBoxContainer.vue
+1
View File
@@ -7,6 +7,7 @@ import { useIsMutating } from "@tanstack/vue-query";
import { MUTATION_KEYS } from "~/constants";
import CloseButton from "~/components/product/ChatBox/CloseButton.vue";
import { useAuth } from "~/composables/api/auth/useAuth";
import { useScroll } from "@vueuse/core";
// provide-inject
frontend/components/product/ProductHero/index.vue
+35 -7
View File
@@ -5,6 +5,8 @@ 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
@@ -12,8 +14,11 @@ const route = useRoute();
const id = route.params.id as string | undefined;
const { token } = useAuth();
const { data: product, refetch: refetchProduct } = useGetProduct(id);
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);
@@ -35,6 +40,11 @@ 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]) => {
@@ -113,12 +123,30 @@ watch(
:slides="selectedVariant!.images"
/>
<div class="lg:w-1/2 flex flex-col gap-3 lg:mt-12">
<NuxtLink
to="#"
class="typo-label-sm max-lg:hidden"
>
{{ product!.category.name }}
</NuxtLink>
<div class="flex items-center justify-between w-full">
<NuxtLink
to="#"
class="typo-label-sm max-lg:hidden"
>
{{ product!.category.name }}
</NuxtLink>
<button
@click="saveProductHandler"
:disabled="isSaveProductPending || isFetchingPending"
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-4 xl:typo-h-3 max-lg:hidden">
{{ product!.name }}
</h1>
frontend/components/profile/global/ProfileSidebar.vue
+14 -13
View File
@@ -34,6 +34,12 @@ const profileLinks = ref([
path: { name: "profile-purchases-and-orders" },
matchPattern: /^profile-purchases-and-orders/,
},
{
icon: "bi:bookmark",
title: "علاقه‌مندی ها",
path: { name: "profile-saved-products" },
matchPattern: /^profile-saved-products/,
},
{
icon: "bi:ticket",
title: "تیکت ها",
@@ -95,26 +101,20 @@ const toggleSidebar = inject("toggleSidebar");
:src="account!.profile_photo"
:alt="
account?.first_name && account?.last_name
? `${account?.first_name.charAt(
0
)} ${account?.last_name.charAt(0)}`
? `${account?.first_name.charAt(0)} ${account?.last_name.charAt(0)}`
: 'بدون نام کاربری'
"
/>
</div>
</div>
<div
class="w-full flex flex-col gap-2 rounded-xl bg-slate-50 border border-slate-200 p-4"
>
<div class="w-full flex flex-col gap-2 rounded-xl bg-slate-50 border border-slate-200 p-4">
<NuxtLink
v-for="(link, index) in profileLinks"
:key="index"
:to="{ ...link.path }"
:class="
isLinkActive(link)
? 'bg-black text-slate-100 **:fill-slate-100'
: '**:fill-black hover:bg-gray-200'
isLinkActive(link) ? 'bg-black text-slate-100 **:fill-slate-100' : '**:fill-black hover:bg-gray-200'
"
class="flex items-center justify-between transition-all rounded-lg py-3.5 lg:py-4 px-3"
@click="toggleSidebar"
@@ -126,7 +126,10 @@ const toggleSidebar = inject("toggleSidebar");
<span class="text-xs lg:text-sm">{{ link.title }}</span>
</span>
<Icon name="bi:chevron-left" class="transition-all" />
<Icon
name="bi:chevron-left"
class="transition-all"
/>
</NuxtLink>
<LogoutModal>
@@ -141,9 +144,7 @@ const toggleSidebar = inject("toggleSidebar");
class="**:fill-danger-500"
/>
</div>
<span class="text-xs lg:text-sm">
خروج از حساب
</span>
<span class="text-xs lg:text-sm"> خروج از حساب </span>
</span>
<Icon