94 lines
5.0 KiB
Plaintext
94 lines
5.0 KiB
Plaintext
@page "/bundle/{productid}"
|
|
@inject ProductAPIConsumer ProductService
|
|
@inject NavigationManager nav
|
|
|
|
|
|
<div class="text-gray-700 dark:text-gray-200 body-font overflow-hidden bg-white dark:bg-gray-900">
|
|
<div class="container px-5 py-12 mx-auto">
|
|
<div class="lg:w-4/5 mx-auto flex flex-wrap">
|
|
<div class="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
|
|
<h2 class="text-sm title-font text-gray-500 tracking-widest uppercase">@Loc["Bundle_Deal"]</h2>
|
|
<h1 class="text-gray-900 dark:text-white text-3xl title-font font-medium mb-1">@(Product.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)</h1>
|
|
@if (!string.IsNullOrEmpty(Product.CodeName))
|
|
{
|
|
<h2 class="text-xs text-gray-500 tracking-widest font-medium mb-4">MODEL: @Product.CodeName</h2>
|
|
}
|
|
|
|
<p class="leading-relaxed mb-6">@(Product.Translations?.FirstOrDefault()?.Info?.Description ?? string.Empty)</p>
|
|
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">@Loc["Included_in_Bundle"]:
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
@if (Product.ChildProducts != null)
|
|
{
|
|
@foreach (var item in Product.ChildProducts)
|
|
{
|
|
<li class="flex items-center text-gray-600 dark:text-gray-400">
|
|
<svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
@(item.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)
|
|
</li>
|
|
}
|
|
}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex items-center border-t border-gray-200 dark:border-gray-700 pt-6">
|
|
<div class="flex flex-col">
|
|
@if (Product.Discount > 0 && Product.Price.HasValue)
|
|
{
|
|
<span class="title-font font-medium text-2xl text-red-600 dark:text-red-400">
|
|
$@((Product.Price.Value - (Product.Price.Value * (Product.Discount.Value /
|
|
100))).ToString("N2"))
|
|
</span>
|
|
<div class="flex gap-2 items-center">
|
|
<span class="text-sm text-gray-500 line-through">
|
|
$@Product.Price.Value.ToString("N2")
|
|
</span>
|
|
<span class="text-xs font-bold text-white bg-red-500 px-2 py-1 rounded">
|
|
-@Product.Discount.Value.ToString("0")%
|
|
</span>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<span class="title-font font-medium text-2xl text-gray-900 dark:text-white">
|
|
$@(Product.Price.HasValue? Product.Price.Value.ToString("N2") : "N/A")
|
|
</span>
|
|
}
|
|
</div>
|
|
<button
|
|
class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">@Loc["Buy_Bundle"]</button>
|
|
<button
|
|
class="rounded-full w-10 h-10 bg-gray-200 dark:bg-gray-700 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
|
|
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
class="w-5 h-5" viewBox="0 0 24 24">
|
|
<path
|
|
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<img alt="@(Product.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded shadow-lg"
|
|
src="@(Product.Photos != null && Product.Photos.Any() ? Product.Photos.First() : "https://dummyimage.com/400x400")">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
|
public string ProductId { get; set; }
|
|
|
|
ProductVM Product = new();
|
|
protected async override Task OnInitializedAsync()
|
|
{
|
|
Product = await ProductService.GetProduct(ProductId);
|
|
}
|
|
} |