+
![]()
diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index d4e18ab..ddfa8f2 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -4,62 +4,88 @@
import Tag from "~/components/global/Tag.vue";
import Rate from "~/components/global/Rate.vue";
import ColorCircle from "~/components/global/ColorCircle.vue";
+import { useImageColor } from "~/composables/global/useImageColor";
// types
type Props = {
+ id: number,
brand: string;
title: string;
colors: string[];
- price: number;
+ price: string;
picture: string;
tag?: string;
rate?: number;
+ darkLayer?: boolean;
};
// props
-defineProps
();
+const props = defineProps();
+const { id } = toRefs(props);
+
+// state
+
+const { colorObject } = useImageColor(`#product-image-${id.value}`);
+
-
-

+
-
- {{ rate }}
-
-
- {{ tag }}
-
-
-
-
{{ price }}
-
-
+
+
+
+
+
+
+
+ {{ tag }}
+
+
+
+
+
+
{{ brand }}
-
+
{{ title }}
-
+
+
+
+
+
+ {{ price }}
+
+
+
-
+
diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
index 148d182..2ce7268 100644
--- a/frontend/components/global/products/FilterProducts.vue
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -131,16 +131,6 @@ watch(
دسته بندی
-
-
- {{ params.category }}
-
-
@@ -177,7 +167,7 @@ watch(
{{
"price_gte" in params
- ? params.price_gte.toLocaleString()
+ ? sliderValue[0].toLocaleString()
: PRODUCT_RANGE.min
}}
@@ -187,7 +177,7 @@ watch(
{{
"price_lte" in params
- ? params.price_lte.toLocaleString()
+ ? sliderValue[1].toLocaleString()
: PRODUCT_RANGE.max
}}
@@ -240,5 +230,3 @@ watch(
-
-
diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 8502fe1..d255779 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -29,12 +29,13 @@ const onSwiper = (swiper: SwiperClass) => {
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/components/product/ChatBox/ChatButton.vue b/frontend/components/product/ChatBox/ChatButton.vue
index dbdf9a3..22ab002 100644
--- a/frontend/components/product/ChatBox/ChatButton.vue
+++ b/frontend/components/product/ChatBox/ChatButton.vue
@@ -33,4 +33,4 @@ provide("isOpen", {
-
\ No newline at end of file
+
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 15c2611..4bc9a08 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -3,7 +3,7 @@
-
+
diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index a25ecc1..b49cb48 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -14,20 +14,22 @@ const { data: product } = useGetProduct(id);
const quantity = ref(1);
const selectedSlide = ref(0);
-const slides = [
- {
- id: 0,
- picture: "/img/product-1.jpg",
- },
- {
- id: 1,
- picture: "/img/product-2.jpg",
- },
- {
- id: 2,
- picture: "/img/product-3.jpg",
- },
-];
+const slides = computed(() => {
+ return [
+ {
+ id: 0,
+ picture: product.value!.image1
+ },
+ {
+ id: 1,
+ picture: product.value!.image2
+ },
+ {
+ id: 2,
+ picture: product.value!.image3
+ }
+ ];
+});
@@ -45,7 +47,7 @@ const slides = [
- {{product!.description}}
+ {{ product!.description }}
-
+