تصاویر مربعی محصولات (Product Images 1:1 Square Ratio)
تاریخ: اسفند ۱۴۰۴ (February 2026)
وضعیت: ✅ پیادهسازی شده — مرج به production
پروژه: FrontOffice
۱. خلاصه
تمامی تصاویر محصولات در سمت مشتری (FrontOffice) در هر دو فروشگاه (عادی و اعتباری) به نسبت 1:1 مربعی تغییر یافت.
۲. تغییرات اعمال شده
۲.۱ لیست محصولات (Products Grid)
| صفحه |
تغییر |
Store/Products.razor |
height:300px → حذف ارتفاع ثابت کارت |
|
height:60% → aspect-ratio:1/1; width:100% |
DiscountStore/Products.razor |
همان تغییرات |
قبل:
بعد:
۲.۲ جزئیات محصول (Product Detail — Main Image)
| صفحه |
تغییر |
Store/ProductDetail.razor |
max-height:400px → aspect-ratio:1/1 |
DiscountStore/ProductDetail.razor |
ObjectFit.Contain → ObjectFit.Cover + aspect-ratio:1/1 |
۲.۳ سبد خرید (Cart)
| صفحه |
ویو |
تغییر |
Store/Cart.razor |
Desktop (64×64) |
product-thumb → rounded-lg + ObjectFit.Cover |
Store/Cart.razor |
Mobile (50×50) |
rounded-circle → rounded-lg + ObjectFit.Cover |
DiscountStore/Cart.razor |
Desktop (64×64) |
product-thumb → rounded-lg + ObjectFit.Cover |
DiscountStore/Cart.razor |
Mobile (50×50) |
rounded-circle → rounded-lg + ObjectFit.Cover |
۲.۴ صفحه پرداخت (Checkout Summary)
| صفحه |
تغییر |
Store/CheckoutSummary.razor (48×48) |
rounded-circle → rounded-lg + ObjectFit.Cover |
DiscountStore/Checkout.razor (40×40) |
rounded-circle → rounded-lg + ObjectFit.Cover |
۲.۵ جزئیات سفارش (Order Detail)
| صفحه |
ویو |
تغییر |
Store/OrderDetail.razor |
Desktop (60×60) |
rounded-circle → rounded-lg + ObjectFit.Cover |
Store/OrderDetail.razor |
Mobile (60×60) |
rounded-circle → rounded-lg + ObjectFit.Cover |
۳. خلاصه تکنیکال
| الگوی قبلی |
الگوی جدید |
محل |
height: 60% + height: 300px card |
aspect-ratio: 1/1; width: 100% + no fixed card height |
لیست محصولات |
max-height: 400px |
aspect-ratio: 1/1 |
جزئیات محصول |
ObjectFit.Contain |
ObjectFit.Cover |
تصاویر اعتباری |
Class="rounded-circle" |
Class="rounded-lg" ObjectFit="ObjectFit.Cover" |
تمام thumbnailها |
Class="product-thumb" |
Class="rounded-lg" ObjectFit="ObjectFit.Cover" |
سبد خرید Desktop |
۴. فایلهای تغییر یافته (۹ فایل)
| فایل |
تغییر |
Pages/Store/Products.razor |
✏️ |
Pages/Store/ProductDetail.razor |
✏️ |
Pages/Store/Cart.razor |
✏️ |
Pages/Store/CheckoutSummary.razor |
✏️ |
Pages/Store/OrderDetail.razor |
✏️ |
Pages/DiscountStore/Products.razor |
✏️ |
Pages/DiscountStore/ProductDetail.razor |
✏️ |
Pages/DiscountStore/Cart.razor |
✏️ |
Pages/DiscountStore/Checkout.razor |
✏️ |
masoodafar-web