Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

frontend/components/global/ColorCircle.vue

@@ -3,7 +3,7 @@
 // types
 
 type Props = {
-    selected ?: boolean;
+    selected?: boolean;
 }
 
 // props
@@ -14,7 +14,7 @@ defineProps<Props>();
 
 <template>
     <div
-        class="size-[25px] rounded-full shadow-black/30 shadow-inner"
-        :class="selected ? 'ring-black' : 'ring-transparent'"
+        class="size-[25px] rounded-full transition-all ring-2 ring-offset-4 shadow-black/30 shadow-inner"
+        :class="selected ? 'ring-blue-500' : 'ring-transparent'"
     />
 </template>

frontend/components/global/LoadingIndicator.vue

@@ -21,7 +21,7 @@ nuxtApp.hook("page:finish", () => {
     <Transition name="fade">
         <div
             v-if="isLoading"
-            class="h-[20px] flex items-center justify-center bg-black w-full left-0 top-0 fixed z-100"
+            class="h-[20px] flex items-center justify-center bg-black w-full left-0 top-0 fixed z-9999"
         >
             <div class="absolute progress-indicator w-1/3 bg-white h-1 rounded-full"></div>
         </div>

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"

frontend/components/product/ProductVariant.vue

@@ -56,12 +56,12 @@ defineProps<Props>();
             </div>
             <div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
 
-                <div
-                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"
-                >
-                    <span>رنگ</span>
-                    <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />
-                </div>
+<!--                <div-->
+<!--                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
+<!--                >-->
+<!--                    <span>رنگ</span>-->
+<!--                    <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
+<!--                </div>-->
 
                 <div
                     v-for="attribute in variantDetail.product_attributes"

frontend/types/global.d.ts

@@ -55,7 +55,7 @@ declare global {
         "detail_category": number
     }
 
-    type ProductInPackItem =  {
+    type ProductInPackItem = {
         "id": number,
         "item_title": string,
         "cover": string
@@ -86,9 +86,10 @@ declare global {
         "meta_keywords": string | null,
         "meta_rating": number,
         "category": number,
+        "colors": string[]
     }
 
-    type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category">
+    type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">
 
     type Article = {
         id: number;