merge

frontend/components/global/ProductsGrid.vue

@@ -47,10 +47,11 @@ withDefaults(defineProps<Props>(), {
                     :title="product.name"
                     :picture="product.image ?? product.variants[0].images[0].image"
                     :colors="product.colors"
-                    :price="product.variants[0].price_after_discount ?? product.variants[0].price"
+                    :price="product.best_deal_price_before_discount"
                     :rate="product.rating"
                     :dark-layer="true"
-                    :tag="`${product.variants[0].discount}% تخفیف`"
+                    :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
+                    :price-after="product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined"
                 />
             </li>
         </ul>

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

@@ -93,9 +93,13 @@ const onSwiper = (swiper: SwiperClass) => {
                         :title="product.name"
                         :picture="product.image ?? product.variants[0].images[0].image"
                         :colors="product.colors"
-                        :price="product.variants[0].price"
                         :rate="product.rating"
                         :dark-layer="true"
+                        :price="product.best_deal_price_before_discount"
+                        :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
+                        :price-after="
+                            product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
+                        "
                     />
                 </SwiperSlide>
             </Swiper>

frontend/components/global/product/ProductCard.vue

@@ -22,6 +22,7 @@ type Props = {
     colors: string[];
     price: string;
     picture: string;
+    priceAfter?: string;
     tag?: string;
     rate?: number;
     darkLayer?: boolean;
@@ -110,10 +111,14 @@ const parallaxStyle = computed(() => {
                 <span class="typo-sub-h-sm font-normal w-full truncate">
                     {{ title }}
                 </span>
-                <div class="flex items-center justify-between w-full mt-1">
-                    <span class="typo-p-xs !font-bold whitespace-nowrap">
+                <div class="flex flex-col w-full mt-1">
+                    <span
+                        class="typo-p-xs whitespace-nowrap"
+                        :class="priceAfter ? 'line-through' : '!font-bold'"
+                    >
                         {{ price }}
                     </span>
+                    <span v-if="priceAfter" class="whitespace-nowrap !font-bold">{{ priceAfter }}</span>
                 </div>
             </div>
         </div>

frontend/types/global.d.ts

@@ -107,11 +107,24 @@ declare global {
         colors: string[];
         added_to_favorites: boolean;
         image: string | null;
+        best_deal_price_before_discount: string;
+        best_deal_price_after_discount: string;
+        best_deal_discount: number;
     };
 
     type ProductListItem = Pick<
         Product,
-        "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors" | "image"
+        | "id"
+        | "variants"
+        | "name"
+        | "rating"
+        | "slug"
+        | "category"
+        | "colors"
+        | "image"
+        | "best_deal_discount"
+        | "best_deal_price_after_discount"
+        | "best_deal_price_before_discount"
     >;
 
     type Article = {