Displaying products

While this way of displaying products is still supported, it is considered a legacy technique. The recommended way is to work with the products as IContent. Refer to Catalog content for more information.

Introduction

This section 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 referred to here are available in the following namespaces:

• Mediachase.Commerce.Website
• Mediachase.Commerce.Website.Controls
• Mediachase.Commerce.Catalog.Objects

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

1. 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 the template for this control is EntriesFiltered.ascx.

2. 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

3. SearchControl.ascx uses the SearchFilterHelper API to create a CatalogIndexSearchDataSource instance. Refer to the Catalog Product Search section for more information regarding this topic.

4. SearchResultsModule.ascx is nested within SearchControl.ascx and contains a ListView control that 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.

5. BuyButtonModule.ascx and CompareButtonModule.ascx also expose product information using Entry object properties and StoreHelper static helper methods.The display of the data is described in more detail below.

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

1. A user navigates to an 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.

2. 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

3. The controls listed above have access to the properties of a particular Entry instance and B static helper methods are used declaratively and in code-behind to access data.The display of the data is described in more detail below.

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 meta data on an Entry, you can use the code example below. Here the ItemAttributes property of a local Entry instance is used.

Example: accessing display name meta data for an Entry

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

To access description meta data on an Entry object, you can use the code example below. Note that 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 meta data for an Entry

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

Displaying images

To access image data on an Entry object you 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 you 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 you can use methods from the StoreHelper class to display the sale price and the discounted price for an entry, below are 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 are handling multiple currencies, use the Mediachase.Commerce.Money object for instance to display the proper currency symbol.

Entry class properties

[Serializable()]
        public partial class Entry
        {
            // properties
            public 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;}
        }