Displaying products

Note: While this method of displaying products is still supported, it is considered a legacy technique. The recommended way is to work with the products as IContent. See Catalog content.

This topic describes how the display of products works, with references to the templates and controls of the Episerver Commerce sample site. To display products in the sample site, a set of display templates with different functionality, such as individual product display or product listings, is used. These templates are included in the sample site installation.

Classes in this topic are in the following namespaces:

Displaying products in a category

Files involved

NodeView.ascx
EntriesFiltered.ascx
SearchControl.ascx
SearchResultsModule.ascx
PriceLineModule.ascx
BuyButtonModule.ascx
CompareButtonModule.ascx
StoreHelper.cs
Entry.cs

How it works

A user navigates to a product category page in the B2C Sample Site. The NodeView.ascx control on this website page loads its template; by default, this control's template is EntriesFiltered.ascx.
EntriesFiltered.ascx contains a set of nested controls that use the Catalog API to display the desired information for the entries contained in the current node:
- SearchControl.ascx
- SearchResultsModule.ascx
- BuyButtonModule.ascx
- CompareButtonModule.ascx
SearchControl.ascx uses the SearchFilterHelper API to create a CatalogIndexSearchDataSource instance. See Catalog Product Search.
SearchResultsModule.ascx is nested within SearchControl.ascx and contains a ListView control. That vontrol is bound to the CatalogIndexSearchDataSource instance above and exposes the collection of Entry objects contained by the CatalogIndexSearchDataSources CatalogEntries property. From here, Entry object properties and StoreHelper static helper methods are used declaratively and in code-behind to access data.
BuyButtonModule.ascx and CompareButtonModule.ascx also expose product information using Entry object properties and StoreHelper static helper methods.

Displaying a single product

Files Involved

EntryView.ascx
DigitalCameraTemplate.ascx
YouMayAlsoLikeModule.ascx
BuyModule.ascx
OverviewModule.ascx
ProductDisplayModule.ascx
CompareProductModule.ascx
RecentlyViewedModule.ascx
MetaImage.cs
Entry.cs

How it works

A user navigates to a product detail page in the B2C Sample Site. The EntryView.ascx control on the page loads its template; by default, the template for this control is DigitalCameraTemplate.ascx.
DigitalCameraTemplate.ascx contains a series of nested controls that make Catalog API calls and display the desired information about the selected entry:
- YouMayAlsoLikeModule.ascx
- MetaImage.cs
- BuyButtonModule.ascx
- BuyModule.ascx
- CompareButtonModule.ascx
- BuyButtonModule.ascx
- OverviewModule.ascx
- DocsModule.ascx
- ProductDisplayModule.ascx
- MetaImage.cs
- ImagesModule.ascx
- CompareProductModule.ascx
- RecentlyViewedModule.ascx
The controls listed above have access to the properties of a particular Entry instance. B static helper methods are used declaratively and in code-behind to access data.

Working with the Entry class

Displaying meta data returned

The Entry object you are manipulating has a specific meta-class whose meta-fields are accessible through an indexer property of the ItemAttributes object returned by Entry.ItemAttributes using a string key. To access display name metadata on an Entry, use the code example below. Here the ItemAttributes property of a local Entry instance is used.

Example: accessing display name metadata for an Entry

// from StoreHelper.csstring displayName = entry.ItemAttributes["DisplayName"].ToString();

To access description metadata on an Entry object, use the code example below. ItemAttributes is not a static property. Rather, the control has a public property with the name and type "Entry" which exposes the instance.

Example: accessing description metadata for an Entry

// from OverviewModule.ascx<%# Entry.ItemAttributes["Description"].ToString() %>

Displaying images

To access image data on an Entry object, use the Images property of the ItemAttributes object. The Images type exposes an array of Image types which hold information about your images (name, url, height, width, thumbnail url, thumbnail height, thumbnail width). In the following context, the Images collection of an an entry's ItemAttributes object is set as the DataSource for a MetaImage control.

Example: accessing image data for an Entry

<%-- from ProductDisplayModule.ascx --%>
<cms:MetaImage 
 OpenFullImage="true"
 AlternateText='<%# StoreHelper.GetEntryDisplayName(Entry)%>'
 ShowThumbImage="false"
 ID="PrimaryImage"
 PropertyName="PrimaryImage"
 DataSource="<%# Entry.ItemAttributes.Images%>"
 runat="server" />

Displaying other assets

To access asset data on an Entry object, use the Assets property of the Entry object. The Assets type exposes an array of ItemAsset types which hold information about the assets you are accessing (asset key, asset type, group name, sort order). In the following context, the Assets collection of an an Entry object is set as the DataSource for a DocsModule control. In the code-behind for the DocsModule control, the collection is traversed, and the AssetKey property of each ItemAsset object is used to populate a collection of FolderElementEntity objects.

Example: accessing asset data for an Entry

<%-- from OverviewModule.ascx --%&gt
 <catalog:DocsModule
 ID="DocsModule2"
 GroupName="Downloads"
 DataSource="<%# Entry.Assets%>"  runat="server"></catalog:DocsModule>

Displaying prices

To access list price and discounted prices, use methods from the StoreHelper class to display an entry's sale and discounted prices. The following example shows the method signatures for these methods.

Example: accessing list and discount price for an Entry

// use for list price
   public static Price GetSalePrice(Entry entry, decimal quantity);

// use the following overloads for discounted price
   public static Price GetDiscountPrice(Entry entry);
   public static Price GetDiscountPrice(Entry entry, string catalogName);
   public static Price GetDiscountPrice(Entry entry, string catalogName, string catalogNodeCode);

Handling multiple language values

If you handle multiple currencies, use the Mediachase.Commerce.Money object to display the proper currency symbol.

Entry class properties

[Serializable()]
  public partial class Entry
  {
    // propertiespublic int CatalogEntryId {get;set;}
    public string ID {get;set;}
    public string Name {get;set;}
    public Entry ParentEntry {get;set;}
    public DateTime StartDate {get;set;}
    public DateTime EndDate {get;set;}
    public bool IsActive {get;set;}
    public string DisplayTemplate {get;set;}
    public int MetaClassId {get;set;}
    public ItemAttributes ItemAttributes {get;set;}
    public RelationInfo RelationInfo {get;set;}
    public Seo[] SeoInfo {get;set;}
    public SalePrices SalePrices {get;set;}
    public string EntryType {get;set;}
    public Entries Entries {get;set;}
    public Inventory Inventory {get;set;}
    public Association[] Associations {get;set;}
    public ItemAsset[] Assets {get;set;}
    public CatalogNodes Nodes {get;set;}
  }

Do you find this information helpful? Please log in to provide feedback.

Last updated: Oct 12, 2015