Step 11: Implement Product Detail Page

  • Article

In this step you will create a page to display detailed information about a selected product including product variants such as multiple color selection for the selected siding.

You will create another Web Form, add controls, and assign properties to populate the controls from the Commerce Server 2002 catalog database.

You can either add item content to DataList/DataGrid/Repeater controls or manually populate the fields by extracting data from the dataset to display content on the Product Detail page. Label and image controls cannot be directly pointed to a data source and depend on their parent control for information.

  1. Click Start, point to Programs, point to Microsoft Visual Studio .NET, and then click Microsoft Visual Studio .NET.

  2. In the Microsoft Development Environment [design] – Start Page screen, click Open Project.

  3. In the Open Project dialog box, select the NorthwindTraders project, and then click Open.

  4. In the NorthwindTraders – Microsoft Visual C# .NET [design] – Default.aspx window, in the Solution Explorer - NorthwindTraders window, right-click NorthwindTraders, point to Add, and then click Add Web Form.

  5. In the Add new Item - NorthwindTraders dialog box, in the Name box, type ProductDetail.aspx, and then click Open.

  6. Click View on the toolbar, and then click Toolbox.

  7. In the Toolbox window, in the Web Forms, drag and drop a DataList control onto the form.

  8. In the Properties window, make sure the control you just created is selected, and then in the ID property box type coreProdInfoDataList.

  9. Right-click coreProdInfoDataList, select Edit Template, and then click Item Templates.

  10. Click View on the toolbar, and then click Toolbox.

  11. In the Toolbox window, in the Web Forms, drag and drop an Image object onto the Item Template section of the DataList control.

  12. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type productImage.
    Height Type 250.
    Width Type 187
    (Databindings) Click the ellipsis [...] button.

  13. In the productImage Databindings dialog box, do the following:

    Use this To do this
    ImageUrl Select this item from the Bindable Properties list.
    Custom binding expression Select this option to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "Image").

  14. Click OK.

  15. Place the cursor next to the Image object in the Item Template section of the DataList control, press ENTER to add an additional line, and then type Name: .

  16. Click View on the toolbar, and then click Toolbox.

  17. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the Item Template section of the DataList control.

  18. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type nameLabel.
    (Databindings) Click the ellipsis[...] button.

  19. In the productImage Databindings dialog box, do the following:

    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this to indicate that you want to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "Name").

  20. Click OK.

  21. Place the cursor next to the Label object in the Item Template section of the DataList control, press ENTER to add an additional line, and then type Price:.

  22. Click View on the toolbar, and then click Toolbox.

  23. In the Toolbox window, in the Web Forms section, drag and drop a Label object onto the Item Template section of the DataList control.

  24. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type priceLabel.
    (Databindings) Click the ellipsis [...] button.

  25. In the productImage Databindings dialog box, do the following:

    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this option to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "cy_list_price","{0:c}").

  26. Click OK.

  27. Place the cursor next to the last Label object in the Item Template section of the DataList control, press Enter to add an additional line, and then type Description:.

  28. Click View on the toolbar, and then click Toolbox.

  29. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the Item Template section of the DataList control.

  30. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type descriptionLabel.
    (Databindings) Click the ellipsis [...] button.

  31. In the productImage Databindings dialog box, do the following:

    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this to edit the DataBinding expression. You can use the editing box to create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "description").

  32. Click OK.

  33. Click View on the toolbar, and then click Toolbox.

  34. In the Toolbox window, in the Web Forms, drag and drop a DataList control onto the form.

  35. In the Properties window, make sure the control you just created is selected, and then in the ID property box type sidingProductInfoDataList.

  36. Right-click sidingProductInfoDataList, select Edit Template, and then click Item Templates.

  37. Place the cursor in the Item Template section of the DataList control, type Siding Information: ,press Enter to add an additional line, and then type Description:.

  38. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the Item Template section of the DataList control.

  39. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type sidingTypeLabel.
    (Databindings) Click the ellipsis [...] button.

  40. In the sidingTypeLabel Databindings dialog box, do the following:

    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "SidingType").

  41. Click OK.

  42. Place the cursor next to the last Label object in the Item Template section of the DataList control, press Enter to add an additional line, type Maintenance Free?: , and then press ENTER again.

  43. Click View on the toolbar, and then click Toolbox.

  44. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the Item Template section of the DataList control.

  45. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type mainFreeLabel.
    (Databindings) Click the ellipsis [...] button.

  46. In the mainFreeLabel Databindings dialog box, do the following:

    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this to edit the data binding expression. The editing box is enabled and you can create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "SidingMaintenanceFree").

  47. Click OK.

  48. Place the cursor next to the Label object in the Item Template section of the DataList control, press Enter to add an additional line, and then type Siding Warranty: .

  49. Click View on the toolbar, and then click Toolbox.

  50. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the Item Template section of the DataList control.

  51. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type sidingWarrantyLabel.
    (Databindings) Click the ellipsis [...] button.

  52. In the sidingWarrantyLabel Databindings dialog box, do the following:

    Use this To do this
    Text Select this item from the Bindable Properties list.
    Custom binding expression Select this to edit the data binding expression. You can use the editing box to create a new expression or edit the one generated by the dialog box.

    In the editing box, type: DataBinder.Eval(Container.DataItem, "sidingWarrantyLengthYears").

  53. Click OK.

  54. Place the cursor next to the Label object in the Item Template section of the DataList control, press Enter to add an additional line, and then type Years .

  55. Right-click the DataList, and then click End Template Editing.

  56. Click View on the toolbar, and then click Toolbox.

  57. In the Toolbox window, in the Web Forms, drag and drop a Label object onto the form.

  58. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type sidingColorLabel.
    Text Type siding Color: .

  59. In the Toolbox window, in the Web Forms, drag and drop a DropDownList object onto the form.

  60. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type sidingColorList
    DataTextField Type SidingColor.
    DataValueField Type SKU.

  61. In the Toolbox window, in the Web Forms list, drag and drop a Button object onto the form.

  62. In the Properties window, make sure the object you just created is selected, and then do the following:

    Use this To do this
    ID Type addToCartBtn.
    Text Type Add To Cart >>.

  63. Double-click the Add to Cart >> button.

  64. Add the following code to the _Click method:

    if (defName.Trim().ToLower().Equals("electrical"))
{
   Response.Redirect("AddToBasket.aspx?ProductID=" + prodId.Value);
}
else
{
   Response.Redirect("AddToBasket.aspx?ProductID=" + 
            prodId.Value + "&SKU=" + sidingColorList.SelectedItem.Value);
}

  65. In the Solution Explorer window, click View Designer.

  66. Click View on the toolbar, and then click Toolbox.

  67. In the Toolbox window, in the HTML list, drag and drop a Hidden object onto the form.

  68. In the Properties window, make sure the object you just created is selected, and then in the ID property box type prodId.

  69. Right-click the page, and then click View HTML Source.

  70. In the html, locate the line <INPUT style="Z-INDEX........id="prodId">, and then add the runat attribute and set its value to server. (****)

  71. Right-click on the page, and then select View Design.

  72. In the Solution Explorer window, click View Code.

  73. In the NorthwindTraders – Microsoft Visual C# .NET [design] – ProductDetail.aspx.cs window, in the using section, add the following code:

    using Microsoft.CommerceServer.Runtime;
using Microsoft.CommerceServer.Runtime.Catalog;
using Microsoft.CommerceServer.Runtime.Diagnostics;
using System.Diagnostics;

In the public class ProductDetail : System.Web.UI.Page section, add the following protected variable:

protected string defName;

  74. In the Page_Load() method, add the following code:

    ProductCatalog catalog = CommerceContext.Current.CatalogSystem.GetCatalog("BuildingMaterials1033");

// Set product ID for lookup.  
string prodName = Request.Params["ProductID"];
Product prod = catalog.GetProduct(prodName);

// Extract the DataSet with the properties for the 
// category in it.
DataSet ds = prod.GetProductProperties();
// Extract the product definition.  If the definition matches our
// custom product definition (ResidentialSiding), we process one way.
// If it matches "Electrical" it is the one we imported from
// electrical.xml so process it as just having basic information.
defName = (string)ds.Tables[0].Rows[0]["DefinitionName"];
if (!IsPostBack)
{
   // We have to check and see what type of product we
   // are dealing with and enable fields on the form
   // accordingly.
   sidingProductInfoDataList.DataSource = null;
   coreProdInfoDataList.DataSource = ds;
   coreProdInfoDataList.DataBind();
   prodId.Value = (string)ds.Tables[0].Rows[0]["ProductID"];
   if (defName.Trim().ToLower().Equals("electrical"))
   {
      // An electrical product
      sidingProductInfoDataList.Visible = false;
      sidingColorLabel.Visible = false;
      sidingColorList.Visible = false;
   }
   else
   {
      // A siding product
      // Populate the siding-specific data
      // list with data.
      sidingProductInfoDataList.Visible = true;
      sidingProductInfoDataList.DataSource = ds;
      sidingProductInfoDataList.DataBind();
      sidingColorList.Visible = true;
      sidingColorLabel.Visible = true;
      sidingColorList.DataSource = prod.GetVariants();
      sidingColorList.DataBind();

   }
}

Copyright © 2005 Microsoft Corporation.
All rights reserved.