diff --git a/Prefab.Web.Client/Pages/Browse/Product.razor b/Prefab.Web.Client/Pages/Browse/Product.razor index cd6245c..f0012e6 100644 --- a/Prefab.Web.Client/Pages/Browse/Product.razor +++ b/Prefab.Web.Client/Pages/Browse/Product.razor @@ -39,9 +39,40 @@ .pdp-skeleton__block--options { min-height: 160px; } + + /* === PDP (Telerik bridge) === */ + .t-pdp .product__name { line-height: 1.1; margin-top: .25rem; } + .t-pdp .product__price-new { color: #e53935; font-weight: 700; font-size: 1.75rem; } + + /* Space option groups */ + .t-pdp .product__option { margin-bottom: 1.25rem; } + .t-pdp .product__option-label { text-transform: uppercase; font-size: .8rem; color: #6c757d; letter-spacing: .02em; margin-bottom: .5rem; } + + /* RadioGroup: make Kendo radios look like the template's radio-select */ + .t-pdp .t-pdp-radio.k-radio-group { display: grid; gap: .35rem; } + .t-pdp .t-pdp-radio .k-radio-item { display: flex; align-items: center; gap: .5rem; padding: .125rem 0; } + .t-pdp .t-pdp-radio .k-radio-label { font-size: 1rem; } + .t-pdp .t-pdp-radio input.k-radio:checked + .k-radio-label { font-weight: 600; } + + /* NumericTextBox sizing/spacing */ + .t-pdp .t-pdp-number .k-numerictextbox, + .t-pdp .t-pdp-qty .k-numerictextbox { display: inline-flex; } + .t-pdp .product__actions-item { display: inline-flex; align-items: center; } + + /* TabStrip headers: resemble template tabs underline */ + .t-pdp .t-pdp-tabstrip .k-tabstrip-items { border-bottom: 1px solid #e9ecef; } + .t-pdp .t-pdp-tabstrip .k-item .k-link { padding: .75rem 1rem; color: #6c757d; } + .t-pdp .t-pdp-tabstrip .k-item.k-active .k-link { color: #e53935; border-bottom: 2px solid #e53935; } + + /* Spec table tweaks */ + .t-pdp .product__tab-specification table { margin-top: .5rem; } + + /* Gallery image sizing */ + .t-pdp .product__gallery img { max-width: 100%; height: auto; display: block; } -
+
+
@if (_isLoading) { if (HasTelerikSkeleton) @@ -75,119 +106,130 @@
-
-
-
- @product.Name +
+
+
+
+
+ @product.Name +
+
-
-
-
-
    - @if (!string.IsNullOrWhiteSpace(product.Sku)) - { -
  • SKU: @product.Sku
    • - } - @if (product.Categories.Any()) - { -
  • - Category: - @for (var index = 0; index < product.Categories.Count; index++) +
    +
    + +
    +
      + @if (!string.IsNullOrWhiteSpace(product.Sku)) { - var category = product.Categories[index]; - @category.Name - if (index < product.Categories.Count - 1) - { - , - } +
    • SKU: @product.Sku
      • } - - } -
    -
    - -

    @product.Name

    - - @if (product.BasePrice.HasValue) - { -
    - @FormatCurrency(product.BasePrice.Value) -
    - } - - @if (!string.IsNullOrWhiteSpace(product.Description)) - { -
    @((MarkupString)product.Description)
    - } - - @if (product.Options.Count > 0) - { -
    - @foreach (var option in product.Options) - { - var optionIsChoice = option.DataType == (int)GetProductDetail.OptionDataType.Choice; - -
    - - - @if (optionIsChoice) + @if (product.Categories.Any()) { - - } - else - { -
    - - @if (!string.IsNullOrWhiteSpace(option.Unit)) +
  • + Category: + @for (var index = 0; index < product.Categories.Count; index++) { - Unit: @option.Unit + var category = product.Categories[index]; + @category.Name + if (index < product.Categories.Count - 1) + { + , + } + } +
    • + } +
+
+ +

@product.Name

+ + @if (product.BasePrice.HasValue) + { +
+ @FormatCurrency(product.BasePrice.Value) +
+ } + + @if (!string.IsNullOrWhiteSpace(product.Description)) + { +
@((MarkupString)product.Description)
+ } + + @if (product.Options.Count > 0) + { +
+ @foreach (var option in product.Options) + { + var optionIsChoice = option.DataType == (int)GetProductDetail.OptionDataType.Choice; + +
+ + + @if (optionIsChoice) + { + + } + else + { +
+ + @if (!string.IsNullOrWhiteSpace(option.Unit)) + { + Unit: @option.Unit + } +
+ @if (option.Tiers.Count > 0) + { + Tiered pricing data available. + } }
- @if (option.Tiers.Count > 0) - { - Tiered pricing data available. - } }
} -
- } -
-
- - -
-
- - Add to cart - +
+
+ + +
+
+ + Add to cart + +
+
@@ -195,7 +237,7 @@
- +
@if (!string.IsNullOrWhiteSpace(product.Description)) @@ -240,7 +282,8 @@
} -
+
+
@code { private const string DocsAttributeKey = "catalog.product.docs"; diff --git a/Prefab.Web/Gateway/Products.cs b/Prefab.Web/Gateway/Products.cs index 2611e18..babf84f 100644 --- a/Prefab.Web/Gateway/Products.cs +++ b/Prefab.Web/Gateway/Products.cs @@ -132,7 +132,7 @@ public static class Products } } - public sealed class DetailService(IModuleClient moduleClient) + public sealed class DetailService(IModuleClient moduleClient) : IProductDisplayService { public async Task> Get(string slug, CancellationToken cancellationToken) { diff --git a/Prefab.Web/Module.cs b/Prefab.Web/Module.cs index 024673f..cca60d7 100644 --- a/Prefab.Web/Module.cs +++ b/Prefab.Web/Module.cs @@ -49,6 +49,7 @@ public class Module : IModule builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddScoped(sp => sp.GetRequiredService()); + builder.Services.AddScoped(sp => sp.GetRequiredService()); builder.Services.AddScoped(sp => sp.GetRequiredService()); return builder;