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

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"