Inserting the Product server control onto a page

Prerequisite

You must have installed the server controls. See Installing server controls into Visual Studio Toolbox.

1. In Visual Studio, choose View > Toolbox.
2. Click the Ektron server control tab to display the server controls.
3. Drag the Product server control and drop it into the desired location on the page.

   NOTE: You also can place the cursor on the page where you want the server control, then double click the server control that you want.

   <CMS:Product ID="Product1" runat="server" />

4. Click on Product in the code to display and modify the control’s properties using the Properties window of Visual Studio. The page is updated as you modify the property values.
   —Image—

   

Product properties

The following are Ektron-specific server controla server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. properties. For information about native .NET properties such as font, height, width and border style, use Visual Studio^® help.

• CacheInterval (Double)

  The number of seconds that a server controla server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified.’s data is cached. The default is 0 (zero). For example, if you want to cache the data for 5 minutes, set to 300. See also: Caching with server controls.

• CustomXml (Code-behind Only) (String)

  Lets you inject custom XML into the generated XML before being processed by the XSLTExtensible Stylesheet Language Transformations. Enter a string of XML that you want to make available to the XSLT as follows:

  <root><customXml>custom-xml-inserted-here</customXml></root>

  See also: Displaying custom XML in Ektron’s server controls.

• DefaultProductID (Integer)

  Enter a default product’s ID. This is the default product that’s displayed when the template containing this control is viewed by a customer and a product ID is not dynamically passed. To make this server control dynamic, enter zero (0) for this property and set the DynamicProductParameter to the QueryString parameter used to pass the product ID.

• DisplayXslt (String)

  If desired, enter a relative or absolute path to an Xslt that determines the display of the page. By default, the control uses product.xsl. This file is located in siteroot\Workarea\Xslt\Commerce. See also: The OverrideXslt and DisplayXslt properties.

  WARNING! Files stored in the siteroot\Workarea folder are overwritten (or deleted) when you upgrade Ektron. To avoid problems, copy the default file to a folder outside the siteroot\workarea folder then edit it. If there is no default file, create the file outside the siteroot\workarea folder. Next, in this property, enter the path to that file relative to the site root folder.

• DoInitFill (Boolean)

  By default, Fill occurs during the Page_Init event. Set to false if you want to postpone the fill-action until later. In this case, Fill is automatically called during the Page Render event. You might do this if you need to set or change a property on the control in code-behind and have it render with your changes shown.

• DynamicParameter (String)

  The QueryString parameter name, which is used to read the product ID. For example, if your QueryString parameter for products is ID, enter that. Then, when customers view a product’s details, the product’s ID is passed to this control.

• Hide (Boolean)

  Hides or displays the output of the control in design time and run time.

  • True. Hide the control output.
  • False. Display the control output.
• ImageGallery (ImageGalleryType)

  Determine if the image gallery appears along with a product’s information. Images that appear in the gallery are set in the product’s Media tab when creating or editing a product. The Gallery Display property for each image on the Media tab must be set to Yes. Choices:

  • List. Display gallery images
  • None. Hide gallery images

  In the Image Gallery, images are displayed at their smallest size. If a customer clicks an image, a full size version appears.

• Language (Integer)

  Set a language for viewing content; shows results in design-time (in Visual Studio) and at run-time (in a browser).

• OverrideXslt (Integer)

  Specifies an XSLT identified in the Edit Product Type Configuration screen.

• ShowAddToCart (Boolean)

  Set to true if you want to the Add to Cart button to appear. The default is True. Setting this property to false lets you show details of a product, but not offer it for sale. For example, a product is no longer for sale, but you want to allow people who purchased it to view details. Also, by using code-behind to dynamically set the property, you could create code that checks your inventory system and hides the button if a product is out of stock. You could also accomplish this for a product by removing the check from the Buyable property when creating or editing a product in the Workarea.

• Stylesheet (String)

  Specify the path to a style sheet for use with this server control. Leave blank to use the default style sheet. To use a custom style sheet, place it in a folder outside the siteroot\workarea folder then edit it. Next, in this property, enter the path to the custom style sheet relative to the site root folder.

• SuppressWrapperTags (Boolean)

  Suppresses the output of the span/div tags around the control.

  • True. Suppress wrap tags.
  • False (default). Allow wrap tags.
• TemplateCart (String)

  Enter the URL path of the template that contains the Cart server control. The path can be relative or absolute.

The OverrideXslt and DisplayXslt properties

The OverrideXslt and DisplayXslt properties

The DisplayXslt property is optional. If used, it specifies an external XSLTExtensible Stylesheet Language Transformations file. If the DisplayXslt property is not defined, the OverrideXslt property specifies an XSLT identified in the Edit Product Type screen. The following list provides more information about these properties.

• The default XSLT is specified in the Edit Smart Form Configuration screen. To use this display XSLT, enter 0 for OverrideXslt.

  NOTE: In this example, the XSLT Packaged option is the default XSLT, since it is selected. XSLT Packaged is the XSLT from the Edit Smart Form Configuration screen (that is, the XSLT created in the Data Designer).

  —Image—

  

• XSLT 1 from the Edit Smart Form Configuration screen; to use this display XSLT, enter 1 for OverrideXslt.
• XSLT 2 from the Edit Smart Form Configuration screen; to use this display XSLT, enter 2 for OverrideXslt.
• XSLT 3 from the Edit Smart Form Configuration screen; to use this display XSLT, enter 3 for OverrideXslt.
• An absolute or relative path to an XSLT file. For DisplayXslt, enter an external XSLT file not specified in the Edit Product Type Configuration screen. For example: sample.xslt. No value is required for OverrideXslt. If an XSLT value exists, OverrideXSLT is ignored.

IMPORTANT: Files stored in the siteroot\Workarea folder are overwritten (or deleted) when you upgrade. To avoid problems, back up the files to a folder outside the siteroot\Workarea folder.

Displaying a product

A product is an item that has no kit, bundle or subscription information associated with it.

—Image—

When displaying a simple product, the Product server control displays the following information:

• Title (optional). The Title field in the product’s Smart Form. A content editor enters this information when creating a product in the Workarea. This area does not use the title of the product in Ektron’s Workarea.
• Description (optional). The Description field in the product’s Smart form. A content editor enters this information when creating a product in the Workarea.
• Image Gallery. The Media tab when creating or editing a product. The Gallery Display property for each image on the Media tab must be set to Yes. In the Image Gallery, images are displayed at their smallest size. When a customer clicks an image, the full size version appears. See also: ActiveTopics.
• Price. The Pricing tab when creating or editing a product. This is the price defined in the Our Sales Price area. This is not the list price. See also: ActiveTopics.
• Add to Cart. This button appears in the server control when:
  • a path to the Cart server control is defined in the Templatecart property
  • the product is buyable. When a product is not buyable, information about the product appears, but customers cannot add it to their cart. This property is set in the Workarea when creating or editing a product.
  • the ShowAddToCart property is set to True

  When customers click this button, the product is added to their cart and they are sent to a template containing the Cart server control.

  You can hide this button by setting the ShowAddToCart property to false. This lets you show details of a product, but not offer it for sale. For example, you have a product that is no longer for sale, but you want to allow people who purchased the product to view its details.

  Also, by using code-behind to dynamically set the property, you could create code that looks at your inventory system and hides the button depending on whether a product is in stock.

Using the Add to Cart button with aliasing

Using the Add to Cart button with aliasing

When a product has an alias path associated with it:

• Make sure the TemplateCart property’s path is relative to the site root. For example:

  TemplateCart="Developer/Commerce/CartDemo.aspx"

• Add the following to the code-behind page. This example is in C#:

  protected void Page_Init(object sender, EventArgs e)
  { Utilities.RegisterBaseUrl(this.Page); }

Displaying a bundled product

A bundled product is made up of multiple products that have been grouped together for sale as one product.

—Image—

When displaying a bundled product, the Product server control displays all information displayed in a Product as well as information about the individual components of the bundle.

The This Bundle Includes area includes products listed on the Items tab for a Product Bundle in the Workarea. A content editor adds existing products to this tab when creating the bundle.

Any products on the tab are displayed with the image, title and description for each product. A link to additional information about each product is also displayed.

Displaying a complex product

A Complex Product lets the customer choose between variations of a product. For example, if your site sells books, variant selections might be Paperback or Electronic.

—Image—

When displaying a Complex Product, the Product server control displays all of the information displayed in a Product in addition to information on product variants. The Variants area includes products listed on the Items tab. A content editor adds products to this tab when creating content.

Products on the Items tab are displayed with a radio button, image, title and description. A link to additional information about each product is also displayed. The radio buttons are used to select which product will be added to the cart.

Displaying a kit

A kit lets the customer select product options, which can affect the product’s price. There is no limit to the types of options you can add, nor to the number of items in an option. For example, a customer purchasing a computer can add RAM, a hard drive, and a larger monitor.

—Image—

When displaying a kit, the Product server control displays all information displayed in a product in addition to options and subtotal information.

The Options area displays product options based on the Item tab for a kit in the Workarea. Options are divided into groups. A radio button, name and price appears for each item. The radio button lets you select one item from each group.

The Subtotal area shows the updated cost of the product with all options.