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"