Latest
This commit is contained in:
422
Prefab.Web.Client/Pages/Browse/Product.razor
Normal file
422
Prefab.Web.Client/Pages/Browse/Product.razor
Normal file
@@ -0,0 +1,422 @@
|
||||
@page "/browse/product"
|
||||
@using System.Globalization
|
||||
@using System.Linq
|
||||
@using System.Net
|
||||
@using Microsoft.AspNetCore.Http
|
||||
@using Prefab.Shared.Catalog.Products
|
||||
@using Prefab.Web.Client.Components.Catalog
|
||||
@using Prefab.Web.Client.Models.Catalog
|
||||
@using Prefab.Web.Client.Models.Shared
|
||||
@using Prefab.Web.Client.Services
|
||||
@using Telerik.Blazor.Components
|
||||
@using Telerik.Blazor
|
||||
@inject IProductDisplayService ProductDisplayService
|
||||
@inject PersistentComponentState? State
|
||||
@implements IDisposable
|
||||
|
||||
<PageTitle>@(Model?.Name ?? "Product") | Prefab</PageTitle>
|
||||
|
||||
<style>
|
||||
.pdp-skeleton--fallback {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pdp-skeleton__block {
|
||||
background-color: #f1f3f5;
|
||||
border-radius: 0.5rem;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.pdp-skeleton__block--image {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.pdp-skeleton__block--text {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.pdp-skeleton__block--options {
|
||||
min-height: 160px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container my-4">
|
||||
@if (_isLoading)
|
||||
{
|
||||
if (HasTelerikSkeleton)
|
||||
{
|
||||
<div class="pdp-skeleton">
|
||||
<TelerikSkeleton Width="100%" Height="320px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Rectangle" />
|
||||
<TelerikSkeleton Width="55%" Height="28px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Text" Class="mt-4" />
|
||||
<TelerikSkeleton Width="100%" Height="220px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Rectangle" Class="mt-4" />
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="pdp-skeleton pdp-skeleton--fallback">
|
||||
<div class="pdp-skeleton__block pdp-skeleton__block--image"></div>
|
||||
<div class="pdp-skeleton__block pdp-skeleton__block--text"></div>
|
||||
<div class="pdp-skeleton__block pdp-skeleton__block--options"></div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
else if (Problem is not null)
|
||||
{
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>@(Problem.Title ?? "Product unavailable")</strong>
|
||||
<div>@(Problem.Detail ?? "We couldn't load this product right now. Please try again later.")</div>
|
||||
</div>
|
||||
}
|
||||
else if (Model is not null)
|
||||
{
|
||||
var product = Model;
|
||||
var hasDocs = TryGetDocs(product, out var docsJson);
|
||||
|
||||
<div class="product product--layout--standard">
|
||||
<div class="product__content">
|
||||
<div class="product__gallery">
|
||||
<div class="product-gallery">
|
||||
<div class="product-gallery__featured">
|
||||
<img src="/images/placeholder-600x600.png" alt="@product.Name" class="img-fluid" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product__info">
|
||||
<div class="product__meta mb-2">
|
||||
<ul class="product__meta-list list-unstyled mb-2">
|
||||
@if (!string.IsNullOrWhiteSpace(product.Sku))
|
||||
{
|
||||
<li><span class="text-muted">SKU:</span> @product.Sku</li>
|
||||
}
|
||||
@if (product.Categories.Any())
|
||||
{
|
||||
<li>
|
||||
<span class="text-muted">Category:</span>
|
||||
@for (var index = 0; index < product.Categories.Count; index++)
|
||||
{
|
||||
var category = product.Categories[index];
|
||||
<span>@category.Name</span>
|
||||
if (index < product.Categories.Count - 1)
|
||||
{
|
||||
<span>, </span>
|
||||
}
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h1 class="product__name">@product.Name</h1>
|
||||
|
||||
@if (product.BasePrice.HasValue)
|
||||
{
|
||||
<div class="product__price mt-3">
|
||||
<span class="product__price-new">@FormatCurrency(product.BasePrice.Value)</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(product.Description))
|
||||
{
|
||||
<div class="product__description mt-3">@((MarkupString)product.Description)</div>
|
||||
}
|
||||
|
||||
@if (product.Options.Count > 0)
|
||||
{
|
||||
<div class="product__options mt-4">
|
||||
@foreach (var option in product.Options)
|
||||
{
|
||||
var optionIsChoice = option.DataType == (int)GetProductDetail.OptionDataType.Choice;
|
||||
|
||||
<div class="product__option mb-4">
|
||||
<label class="product__option-label d-block fw-semibold">
|
||||
@option.Name
|
||||
@if (option.IsVariantAxis)
|
||||
{
|
||||
<span class="badge bg-secondary ms-2">Axis</span>
|
||||
}
|
||||
</label>
|
||||
|
||||
@if (optionIsChoice)
|
||||
{
|
||||
<TelerikRadioGroup TValue="string" TItem="ChoiceItem"
|
||||
Class="product__option-group"
|
||||
Data="@BuildChoiceItems(option)"
|
||||
TextField="@nameof(ChoiceItem.Text)"
|
||||
ValueField="@nameof(ChoiceItem.Value)"
|
||||
Value="@GetChoiceSelection(option.Id)"
|
||||
ValueChanged="(string? value) => SetChoiceSelection(option.Id, value)" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="product__number-option d-flex align-items-center">
|
||||
<TelerikNumericTextBox Value="@GetNumberSelection(option.Id)"
|
||||
ValueChanged="(decimal? value) => SetNumberSelection(option.Id, value)"
|
||||
Min="@option.Min"
|
||||
Max="@option.Max"
|
||||
Step="@ResolveStep(option)"
|
||||
Format="n2"
|
||||
Width="200px" />
|
||||
@if (!string.IsNullOrWhiteSpace(option.Unit))
|
||||
{
|
||||
<small class="text-muted ms-2">Unit: @option.Unit</small>
|
||||
}
|
||||
</div>
|
||||
@if (option.Tiers.Count > 0)
|
||||
{
|
||||
<small class="text-muted d-block mt-1">Tiered pricing data available.</small>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="product__actions mt-4 d-flex align-items-center">
|
||||
<div class="product__actions-item me-3 d-flex align-items-center">
|
||||
<label class="form-label me-2 mb-0">Quantity</label>
|
||||
<TelerikNumericTextBox Value="@_quantity"
|
||||
ValueChanged="(int value) => _quantity = Math.Max(1, value)"
|
||||
Min="1"
|
||||
Step="1"
|
||||
Format="n0"
|
||||
Width="150px" />
|
||||
</div>
|
||||
<div class="product__actions-item">
|
||||
<TelerikButton Class="btn btn-primary btn-lg product__add-to-cart"
|
||||
ThemeColor="ThemeColor.Primary"
|
||||
Size="ButtonSize.Large">
|
||||
Add to cart
|
||||
</TelerikButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card product__tabs product-tabs product-tabs--layout--full mt-5">
|
||||
<div class="card-body">
|
||||
<TelerikTabStrip TabPosition="TabPosition.Top" Class="product-tabs__strip">
|
||||
<TabStripTab Title="Description">
|
||||
<div class="product__tab-description">
|
||||
@if (!string.IsNullOrWhiteSpace(product.Description))
|
||||
{
|
||||
<div class="typography">@((MarkupString)product.Description)</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="text-muted">No description available.</p>
|
||||
}
|
||||
|
||||
@if (hasDocs && docsJson is not null)
|
||||
{
|
||||
<ProductDocs Json="@docsJson" />
|
||||
}
|
||||
</div>
|
||||
</TabStripTab>
|
||||
<TabStripTab Title="Specification">
|
||||
<div class="product__tab-specification">
|
||||
@if (product.Specs.Any())
|
||||
{
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
@foreach (var spec in product.Specs)
|
||||
{
|
||||
<tr>
|
||||
<th scope="row">@spec.Name</th>
|
||||
<td>@FormatSpecValue(spec)</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="text-muted">No specifications were provided.</p>
|
||||
}
|
||||
</div>
|
||||
</TabStripTab>
|
||||
</TelerikTabStrip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private const string DocsAttributeKey = "catalog.product.docs";
|
||||
private const string StateKey = "browse-product-state";
|
||||
private static readonly bool HasTelerikSkeleton =
|
||||
Type.GetType("Telerik.Blazor.Components.TelerikSkeleton, Telerik.UI.for.Blazor") is not null;
|
||||
|
||||
[SupplyParameterFromQuery(Name = "slug")]
|
||||
public string? Slug { get; set; }
|
||||
|
||||
private Result<ProductDisplayModel>? _result;
|
||||
private string? _currentSlug;
|
||||
private bool _isLoading = true;
|
||||
private PersistingComponentStateSubscription? _subscription;
|
||||
private readonly Dictionary<Guid, string?> _choiceSelections = new();
|
||||
private readonly Dictionary<Guid, decimal?> _numberSelections = new();
|
||||
private int _quantity = 1;
|
||||
|
||||
private ProductDisplayModel? Model => _result?.Value;
|
||||
private ResultProblem? Problem => _result?.Problem;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
if (State is not null)
|
||||
{
|
||||
_subscription = State.RegisterOnPersisting(PersistStateAsync);
|
||||
|
||||
if (State.TryTakeFromJson<PageState>(StateKey, out var restored) && restored is not null)
|
||||
{
|
||||
_currentSlug = restored.Slug;
|
||||
_result = restored.Result;
|
||||
_isLoading = false;
|
||||
|
||||
if (_result?.Value is { } restoredModel)
|
||||
{
|
||||
PrepareSelections(restoredModel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(Slug))
|
||||
{
|
||||
_currentSlug = null;
|
||||
_result = Result<ProductDisplayModel>.Failure(new ResultProblem
|
||||
{
|
||||
Title = "Product not specified.",
|
||||
Detail = "A product slug is required to load this page.",
|
||||
StatusCode = (int)HttpStatusCode.BadRequest
|
||||
});
|
||||
_isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
var normalizedSlug = Slug.Trim();
|
||||
if (string.Equals(_currentSlug, normalizedSlug, StringComparison.OrdinalIgnoreCase))
|
||||
{
|
||||
_isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
_isLoading = true;
|
||||
var result = await ProductDisplayService.Get(normalizedSlug);
|
||||
_result = result;
|
||||
_currentSlug = normalizedSlug;
|
||||
|
||||
if (result.IsSuccess && result.Value is not null)
|
||||
{
|
||||
PrepareSelections(result.Value);
|
||||
}
|
||||
else
|
||||
{
|
||||
ClearSelections();
|
||||
}
|
||||
|
||||
_isLoading = false;
|
||||
}
|
||||
|
||||
private Task PersistStateAsync()
|
||||
{
|
||||
if (_currentSlug is not null && _result is not null && State is not null)
|
||||
{
|
||||
State.PersistAsJson(StateKey, new PageState(_currentSlug, _result));
|
||||
}
|
||||
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private static string FormatSpecValue(ProductDisplayModel.Spec spec)
|
||||
{
|
||||
var raw = spec.Value;
|
||||
if (!string.IsNullOrWhiteSpace(raw))
|
||||
{
|
||||
return raw;
|
||||
}
|
||||
|
||||
var numericValue = spec.NumericValue;
|
||||
if (numericValue.HasValue)
|
||||
{
|
||||
var formatted = numericValue.Value.ToString("0.##", CultureInfo.InvariantCulture);
|
||||
var unit = spec.UnitCode;
|
||||
return string.IsNullOrWhiteSpace(unit) ? formatted : $"{formatted} {unit}";
|
||||
}
|
||||
|
||||
return string.Empty;
|
||||
}
|
||||
|
||||
private static string FormatCurrency(decimal amount) =>
|
||||
amount.ToString("C", CultureInfo.CurrentCulture);
|
||||
|
||||
private string? GetChoiceSelection(Guid optionId) =>
|
||||
_choiceSelections.TryGetValue(optionId, out var value) ? value : null;
|
||||
|
||||
private void SetChoiceSelection(Guid optionId, string? value) =>
|
||||
_choiceSelections[optionId] = value;
|
||||
|
||||
private decimal? GetNumberSelection(Guid optionId) =>
|
||||
_numberSelections.TryGetValue(optionId, out var value) ? value : null;
|
||||
|
||||
private void SetNumberSelection(Guid optionId, decimal? value) =>
|
||||
_numberSelections[optionId] = value;
|
||||
|
||||
private static IEnumerable<ChoiceItem> BuildChoiceItems(ProductDisplayModel.OptionDefinition option) =>
|
||||
option.Values.Select(value =>
|
||||
new ChoiceItem(
|
||||
string.IsNullOrWhiteSpace(value.Code) ? value.Id.ToString("N") : value.Code,
|
||||
value.Label));
|
||||
|
||||
private static decimal? ResolveStep(ProductDisplayModel.OptionDefinition option) =>
|
||||
option.Step ?? 1m;
|
||||
|
||||
private void PrepareSelections(ProductDisplayModel product)
|
||||
{
|
||||
_choiceSelections.Clear();
|
||||
_numberSelections.Clear();
|
||||
_quantity = 1;
|
||||
|
||||
foreach (var option in product.Options)
|
||||
{
|
||||
if (option.DataType == (int)GetProductDetail.OptionDataType.Choice)
|
||||
{
|
||||
var defaultValue = option.Values.FirstOrDefault();
|
||||
_choiceSelections[option.Id] = defaultValue?.Code ?? defaultValue?.Id.ToString("N");
|
||||
}
|
||||
else
|
||||
{
|
||||
decimal? initial = option.Min ?? option.Max ?? 0m;
|
||||
_numberSelections[option.Id] = initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void ClearSelections()
|
||||
{
|
||||
_choiceSelections.Clear();
|
||||
_numberSelections.Clear();
|
||||
_quantity = 1;
|
||||
}
|
||||
|
||||
private static bool TryGetDocs(ProductDisplayModel product, out string? docsJson)
|
||||
{
|
||||
docsJson = null;
|
||||
return product.GenericAttributes is not null &&
|
||||
product.GenericAttributes.TryGetValue(DocsAttributeKey, out docsJson) &&
|
||||
!string.IsNullOrWhiteSpace(docsJson);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_subscription?.Dispose();
|
||||
}
|
||||
|
||||
private sealed record PageState(string Slug, Result<ProductDisplayModel> Result);
|
||||
private sealed record ChoiceItem(string Value, string Text);
|
||||
}
|
||||
Reference in New Issue
Block a user