Product Display List

The Product Display List content item displays a list of products using an IQA query as the data source.

This content item displays the product thumbnail image and title. For product data to display, the underlying IQA query must return specific columns.

Note: When modifying the Cart [CartItemCount] sitemap, make sure the Navigation code is set to “Cart”; otherwise, the View Cart link will not appear on pages with the Product Display List content item.

Product Display List configuration options

  • Name - Enter a name for the content item. This text appears during design mode (configuration).
  • Title - Enter the text to display above this content item on the rendered page. If blank, no title displays.
  • Do not render in design mode - Select this option to prevent content record data from being loaded in the content editor. This improves performance during design time (configuration).
  • Display a border around this content - Select this option to display a border around this content item on the rendered page.
  • Source query - Specifies which IQA query to use as the data source for the list. The query must return certain named columns. See IQA query required columns below.
  • Results per page - Enter a value for the number of rows to list before the user must click arrows or page numbers to get to additional pages of results. The default value is 10 listings before paging is activated.
  • Display the item picture - Specify whether to have the item picture appear in the listing. To support this option, the IQA query must contain a column named THUMBNAIL_URL. See IQA query required columns below.
  • Maximum picture width - Set the maximum available width in pixels for displaying the picture. If the picture is wider than this value, the picture is scaled down to fit. To disable all scaling, enter a value of 0; this allows the picture to take as much space as it requires.
  • Enlarge picture to maximum width - Specify whether, if the picture width is less than the specified maximum, to scale (resize) the picture up to the maximum width. This option allows for a uniform size for all pictures, but be aware that stretching a graphic to appear larger might not look good in all cases.
  • Non-member price label - Specify how you want non-members to see their price. Include ${0:###,###,##0.00} as a placeholder for the price itself.
  • Member price label - Specify how you want members to see their price. Include ${0:###,###,##0.00} as a placeholder for the price itself. For more information, refer to Formatting Numeric Strings.
  • Show both prices to non-members - Specify whether to display non-member prices to members.
  • Member price label for non-members - Specify how you want non-members to see the member price. Include ${0:###,###,##0.00} as a placeholder for the price itself.
  • Show both prices to members - Specify whether to display non-member prices to members.
  • Non-member price label for members - Specify how you want members to see the non-member price. Include ${0:###,###,##0.00} as a placeholder for the price itself. For more information, refer to Formatting Numeric Strings.
  • Show discount percentage - Specify whether to display the percentage of the member discount.
  • Discount label - Specify how you want to display the percentage of the member discount. Include {0:0%} as a placeholder for the percentage itself. To display decimal places, adjust the display mask accordingly, for example, {0:0.00%} would display 2 decimal places. For more information, refer to Formatting Numeric Strings.
  • Display Add to Cart button - Display the button that enables users to add the product to their carts.

IQA query-required columns

In order for the product listing to display data, the IQA query must return the specific named columns below. You can change the order of the columns in the IQA query to change the order in which they appear in the product list.

  • THUMBNAIL_URL - This field is the URL of the product image relative to the website root. Typically the URL will be prefixed with ~ to represent the webroot, such as:

    ~/Images/MyProduct.png

    If you have disabled the option to have the list include product images, the query does not need to return this column.

  • Title - This field is the title of the product, to display in the list.
  • Product code - The query must contain the Product code, which must be aliased as key_ProductCode. Without the Product code, the Product Display List will not use the query, and an error will be displayed.

Note: If the content item throws a problem loading error, you might need to filter out problematic products. For example, if certain items are set to show but not sell on the web, edit your underlying query and add a filter for WEB_OPTION = 2, to include only purchasable items.