From 2817f3d461c97790c0a71bfbe18f5b0797abc268 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 21 Feb 2025 21:39:51 +0330
Subject: [PATCH] Updated

---
 frontend/components/product/ProductHero.vue | 26 ++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index 13d5549..ec46008 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -17,6 +17,8 @@ const selectedVariantId = ref(product.value!.variants[0].id);
 const selectedQuantity = ref(1);
 const selectedSlide = ref(product.value!.variants[0].images[0].id);
 
+const selectedColor = ref(product.value!.colors[0]);
+
 // provide / inject
 
 const { selectedVariant, changeSelectedVariant } = inject("productVariant") as ProductVariantProvideType;
@@ -32,6 +34,12 @@ const sanitizedProductDescription = computed(() => {
 watch(() => selectedVariantId.value, (newId) => {
     const newVariant = product.value!.variants.find(variant => variant.id === newId)!;
     changeSelectedVariant(newVariant);
+});
+
+watch(() => selectedColor.value, (newValue) => {
+    const filteredVariants = product.value!.variants.filter(v => v.color === newValue);
+    selectedVariantId.value = filteredVariants[0].id;
+    selectedVariant.value = filteredVariants[0];
 }, {
     immediate: true
 });
@@ -84,10 +92,26 @@ watch(() => selectedVariant.value, (newValue) => {
                 v-html="sanitizedProductDescription"
             />
 
+            <div class="flex items-center gap-4">
+                <span class="typo-p-lg">
+                    تنوع رنگی :
+                </span>
+                <div class="flex items-center gap-4 py-4">
+                    <ColorCircle
+                        v-for="color in product!.colors"
+                        :key="color"
+                        @click="selectedColor = color"
+                        :selected="selectedColor === color "
+                        :style="{backgroundColor: color}"
+                        class="cursor-pointer"
+                    />
+                </div>
+            </div>
+
             <div class="flex items-center gap-6 flex-wrap">
                 <ProductVariant
                     @click="variant.in_stock > 0 ? selectedVariantId = variant.id : undefined"
-                    v-for="variant in product!.variants"
+                    v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
                     :key="variant.id"
                     :variantDetail="variant"
                     :isSelected="selectedVariantId === variant.id"