add main_image field to product serializers and update components to use it

backend/product/serializers.py

@@ -67,9 +67,12 @@ class ProductVariantSerialzier(serializers.ModelSerializer):
     cart_quantity = serializers.SerializerMethodField()
     price = serializers.SerializerMethodField()
     price_after_discount = serializers.SerializerMethodField()
+    special_discount_amount = serializers.SerializerMethodField()
+    special_discount_link = serializers.SerializerMethodField()
+
     class Meta:
         model = ProductVariant
-        exclude = ('min_price', 'sell', 'currency', 'product', 'input_price', 'price_in_dollor')
+        exclude = ('min_price', 'sell', 'currency', 'product', 'input_price', 'price_in_dollor', 'profit', 'special_discount_percent')
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -77,6 +80,16 @@ class ProductVariantSerialzier(serializers.ModelSerializer):
         if view_type == 'list':
             self.fields.pop('in_pack_items', None)
 
+    def get_special_discount_amount(self, obj):
+        if obj.special_discount_percent:
+            special_discount_amount = obj.profit * (obj.special_discount_percent / 100)
+            return f'{special_discount_amount:,.0f} تومانءءء'
+        else:
+            return None
+    
+    def get_special_discount_link(self, obj):
+        return 'https://'
+
     def get_price_after_discount(self, obj):
         return f'{obj.price_after_discount:,.0f} تومانءءء'
 
@@ -139,6 +152,7 @@ class DynamicProductSerializer(serializers.ModelSerializer):
     best_deal_price_before_discount = serializers.SerializerMethodField()
     best_deal_price_after_discount = serializers.SerializerMethodField()
     best_deal_discount = serializers.SerializerMethodField()
+    main_image = serializers.SerializerMethodField()
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         view_type = self.context.get('view_type', 'all')
@@ -154,11 +168,17 @@ class DynamicProductSerializer(serializers.ModelSerializer):
         model = ProductModel
         fields = "__all__"
         view_type = {
-            'list': ['id', 'name', 'rating', 'slug', 'category', 'variants', 'colors', 'image', 'best_deal_price_before_discount', 'best_deal_price_after_discount', 'best_deal_discount', ],
+            'list': ['id', 'name', 'rating', 'slug', 'category',  'colors', 'image', 'best_deal_price_before_discount', 'best_deal_price_after_discount', 'best_deal_discount', 'main_image'],
             'slider': ['id', 'name', 'rating', 'slug', 'category', 'variants', 'colors', 'image', 'best_deal_price_before_discount', 'best_deal_price_after_discount', 'best_deal_discount', ],
             'instance': ['id', 'name', 'description', 'rating',  'slug', 'meta_description', 'meta_keywords', 'meta_rating', 'category', 'related_products', 'in_pack_items', 'variants', 'colors', 'added_to_favorites', 'image'],
             'chat': ['id', 'name', 'description', 'variants', 'image']
         }
+
+    def get_main_image(self, obj):
+        if obj.image:
+            return obj.image.url
+        return obj.variants.first().images.first().image.url if obj.variants.exists() and obj.variants.first().images.exists() else None
+
     def get_best_deal_price_before_discount(self, obj):
         best_deal = obj.get_best_deal_variant()
         if best_deal:

frontend/components/global/ProductsGrid.vue

@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
                     :id="product.id"
                     :slug="product.slug"
                     :title="product.name"
-                    :picture="product.image ?? product.variants[0].images[0].image"
+                    :picture="product.main_image"
                     :colors="product.colors"
                     :price="product.best_deal_price_before_discount"
                     :rate="product.rating"

frontend/components/global/product-detail/ProductsSlider.vue

@@ -91,7 +91,7 @@ const onSwiper = (swiper: SwiperClass) => {
                         :id="product.id"
                         :slug="product.slug"
                         :title="product.name"
-                        :picture="product.image ?? product.variants[0].images[0].image"
+                        :picture="product.main_image"
                         :colors="product.colors"
                         :rate="product.rating"
                         :dark-layer="true"

frontend/types/global.d.ts

@@ -106,7 +106,7 @@ declare global {
         category: SubCategory;
         colors: string[];
         added_to_favorites: boolean;
-        image: string | null;
+        main_image: string;
         best_deal_price_before_discount: string;
         best_deal_price_after_discount: string;
         best_deal_discount: number;
@@ -115,13 +115,12 @@ declare global {
     type ProductListItem = Pick<
         Product,
         | "id"
-        | "variants"
         | "name"
         | "rating"
         | "slug"
         | "category"
         | "colors"
-        | "image"
+        | "main_image"
         | "best_deal_discount"
         | "best_deal_price_after_discount"
         | "best_deal_price_before_discount"