Update product service and detail view with gallery support
This commit is contained in:
masoodafar-web
@@ -7,7 +7,7 @@
|
||||
{
|
||||
<MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
|
||||
<MudStack AlignItems="AlignItems.Center">
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
|
||||
<MudProgressCircular Color="Color.Primary" Indeterminate="true"/>
|
||||
</MudStack>
|
||||
</MudContainer>
|
||||
}
|
||||
@@ -15,7 +15,9 @@ else if (_product is null)
|
||||
{
|
||||
<MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
|
||||
<MudAlert Severity="Severity.Warning">محصول یافت نشد.</MudAlert>
|
||||
<MudButton Class="mt-2" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Products)">بازگشت</MudButton>
|
||||
<MudButton Class="mt-2" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack"
|
||||
OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Products)">بازگشت
|
||||
</MudButton>
|
||||
</MudContainer>
|
||||
}
|
||||
else
|
||||
@@ -24,39 +26,105 @@ else
|
||||
<MudGrid Spacing="3">
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Class="rounded-lg pa-2">
|
||||
<MudImage Src="@_product.ImageUrl" Alt="@_product.Title" Style="width:100%" Class="rounded-lg" />
|
||||
@if (!string.IsNullOrWhiteSpace(MainImageUrl))
|
||||
{
|
||||
<div class="rounded-lg" style="width:100%;height:360px;background-image: url('@MainImageUrl');background-size: cover; background-position: center;border-radius: 0.5rem;color: transparent;" >@MainImageAlt</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="360px" />
|
||||
}
|
||||
|
||||
@if (_galleryItems.Count > 1)
|
||||
{
|
||||
<MudStack Row="true" Spacing="1" Class="mt-3" Style="overflow-x:auto;flex-wrap:wrap;">
|
||||
@foreach (var item in _galleryItems)
|
||||
{
|
||||
<MudButton Variant="Variant.Text" Class="p-0" Style="min-width:0;" OnClick="() => SelectGalleryImage(item)">
|
||||
<MudImage Src="@GetThumbnailUrl(item)" Alt="@item.Title" Class="rounded-sm" Style="@GetThumbnailStyle(item)" />
|
||||
</MudButton>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="6">
|
||||
<MudStack Spacing="2">
|
||||
<MudText Typo="Typo.h4">@_product.Title</MudText>
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary">@_product.Description</MudText>
|
||||
<MudDivider Class="my-2" />
|
||||
<MudDivider Class="my-2"/>
|
||||
<MudText Typo="Typo.h5" Color="Color.Primary">@FormatPrice(_product.Price)</MudText>
|
||||
|
||||
<!-- Desktop/tablet actions -->
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
|
||||
<MudNumericField T="int" @bind-Value="_qty" Min="1" Max="20" Immediate="true" HideSpinButtons="true" Style="max-width:120px" />
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">افزودن به سبد</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Cart)">مشاهده سبد</MudButton>
|
||||
<MudNumericField T="int" @bind-Value="_qty" Min="@MinQty" Max="@MaxQty" Immediate="true"
|
||||
HideSpinButtons="true" Style="max-width:120px"/>
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">افزودن به
|
||||
سبد
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudHidden>
|
||||
|
||||
<!-- Mobile actions: stacked and full-width -->
|
||||
|
||||
<!-- Mobile actions use sticky bar rendered below -->
|
||||
</MudStack>
|
||||
|
||||
|
||||
</MudItem>
|
||||
|
||||
|
||||
</MudGrid>
|
||||
|
||||
|
||||
</MudContainer>
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp" Style="position: absolute; bottom: 0; left: 0; width: 100%">
|
||||
<MudStack Spacing="2 " Class="d-flex flex-row-">
|
||||
<MudNumericField T="int" @bind-Value="_qty" Min="1" Max="20" Immediate="true" HideSpinButtons="true" Class="w-100-mobile" />
|
||||
<MudButton Class="w-100-mobile" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">افزودن به سبد</MudButton>
|
||||
<MudButton Class="w-100-mobile" Variant="Variant.Outlined" Color="Color.Secondary" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Cart)">مشاهده سبد</MudButton>
|
||||
</MudStack>
|
||||
<MudHidden Breakpoint="Breakpoint.MdAndUp">
|
||||
<MudPaper Class="mud-width-full mud-elevation-3 pa-3"
|
||||
Style="position:sticky;bottom:0;left:0;z-index:9;border-top-left-radius:1rem;border-top-right-radius:1rem;">
|
||||
|
||||
<MudGrid Class="align-center" Justify="Justify.SpaceBetween">
|
||||
<MudItem xs="6">
|
||||
<MudStack Spacing="1">
|
||||
@if (HasDiscount && OriginalPrice is not null)
|
||||
{
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
|
||||
<MudText Typo="Typo.caption"
|
||||
Class="mud-text-secondary mud-line-through">@FormatPrice(OriginalPrice.Value)</MudText>
|
||||
<MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small"
|
||||
Label="true">@($"٪{_product!.Discount}")</MudChip>
|
||||
</MudStack>
|
||||
}
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary">@FormatPrice(TotalPrice)</MudText>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
|
||||
@if (IsInCart)
|
||||
{
|
||||
<MudItem xs="5" Class="">
|
||||
<MudPaper Class="mud-width-full d-flex align-center justify-space-between px-2"
|
||||
Elevation="1" Style="border-radius:1rem;">
|
||||
<MudIconButton
|
||||
Icon="@(CurrentCartQuantity == 1 ? Icons.Material.Filled.Delete : Icons.Material.Filled.Remove)"
|
||||
Color="Color.Error" Variant="Variant.Text" OnClick="RemoveFromCart"/>
|
||||
<MudText Typo="Typo.subtitle2" Class="mud-font-weight-bold">@CurrentCartQuantity</MudText>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Add" Color="Color.Primary"
|
||||
Variant="Variant.Text" Disabled="@(CurrentCartQuantity >= MaxQty)"
|
||||
OnClick="AddToCart"/>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudItem xs="6" >
|
||||
<MudStack Spacing="1">
|
||||
|
||||
<MudButton Variant="Variant.Filled" Size="Size.Large" Color="Color.Error" Class="mud-width-full"
|
||||
StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">
|
||||
افزودن به سبد
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
|
||||
|
||||
</MudPaper>
|
||||
</MudHidden>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user