Browse - Product Detail Page

Build a product detail page which will delight customers using the server-side APIs. Learn how to display language specific content via dynamic properties. As a bonus, we will dive into the client-side APIs as well.

 


Relevant APIs

 

 

UCommerce.Runtime
     SiteContext.Current.CatalogContext
          CurrentProduct
          CurrentCatalog
UCommerce.Api
     CatalogLibrary.CalculatePrice(Product, Catalog)
     CatalogLibrary.GetRelatedProducts(productId, relationType)
UCommerce.Extensions
     DynamicEntityExtensions.DynamicProperty()
     ProductExtensions.DisplayName()
     ProductExtensions.Description()

Hands-on

Find the “MasterClassProductController”.
The method “Index” renders the view “/views/product.cshtml” with the productViewModel.
Map “CurrentProduct” from the CatalogLibrary to the productViewModel with:

  • Name
  • Description
  • Sku
  • VariantSku
  • LongDescription
  • Variants
  • PriceCalculation

Bonus

Display product images using Sitefinity APIs.
Explore related products on CatalogLibrary using the following line of code:

CatalogLibrary.GetRelatedProducts(productId).SelectMany(x => x.Value)
{{lineitem.ProductName}}

{{lineitem.VariantName}} - {{lineitem.Quantity}} x {{lineitem.FormattedPrice}} {{lineitem.FormattedPrice}}

Your cart is empty ;(
Total {{basket.FormattedProductsTotal}}
Checkout