Items_TileListing Widget

The Items_TileListing widget presents category or search-result items as tiles. The source item scope comes from the current category or shopper search and can be refined through widget options.

Add the widget to a page 

<Control src="LoadWidgetControl.ascx"
    FileLocation="Items_TileListing.html"
    Options="tileHeight: 415,
        tileWidth: 240,
        pageSize: -1" />

Widget options

Option Default Valid values or format Effect
includeItemsFromAllChildCategories
Boolean		 false true, false Includes items from child categories.
overrideCategoryList
String		 Not specified Value accepted by the search operation Uses the specified value instead of the current category when requesting items.
includeModels
Boolean		 true true, false Selects whether models are included.
includeStockCodes
Boolean		 true true, false Selects whether stock codes are included.
includeSKUs
Boolean		 false true, false Selects whether SKUs are included.
height
String		 'auto' CSS height Sets the list container height.
showScroll
Boolean		 true true, false Controls the Tile View scrollbar.
tileHeight
Number		 415 Pixels Sets the tile height.
tileWidth
Number		 240 Pixels Sets the tile width.
tileMargin
Number		 12 Pixels Sets the tile spacing.
tileFlowDirection
String		 'vertical' Value accepted by the Tile View Sets Tile View direction.
showTileBorder
Boolean		 true true, false Controls tile borders.
enableHighlightOnTileClick
Boolean		 false true, false Controls selection highlighting when a tile is selected.
pageSize
Number		 -1 Number Sets the requested number of items per page.
previousPageButtonText
String		 'Prev' Text Sets the previous-page navigation label.
nextPageButtonText
String		 'Next' Text Sets the next-page navigation label.
pagerCSSClass
String		 'light-theme' 'light-theme', 'dark-theme', 'compact-theme', 'circle-theme' Sets the supplied pager theme.
addToCartButtonText
String		 'Add to Cart' Text Sets the add-to-cart button label.
qtyLabelText
String		 'Qty:' Text Sets the quantity label.
learnMoreLinkText
String		 'Detail View' Text Sets the detail-view link label.

Search, display, and paging options

Option Default Valid values or format Effect
getPricingInResults
Boolean		 true true, false Uses the pricing-enabled search operation when True. When False, uses the characteristics search operation.
autoScrollTopOnTileLoad
Boolean		 true true, false Scrolls the page to the top after a paged tile load.
stockCodeLabel
String		 'Model Number' Text Sets the label displayed before a stock code.
noProductsFoundText
String		 'No Products found.' Text Sets the message displayed when no items are returned.
debugMode
Boolean		 false true, false Writes paging and item data to the browser console when True.
pagingMode
String		 'paged' 'paged', 'endless' Uses numbered paging or loads additional pages while the shopper scrolls.
showPagesizeDropdown
Boolean		 true true, false Shows the page-size selector in paged mode. The selector is not shown in endless mode.
pageSizeLabel
String		 'Page Size' Text Sets the page-size selector label.
pagerButtonsDisplayedBeforeEllipsis
Number		 3 Number Sets the number of page buttons displayed before an ellipsis.
enableGoToPageByEllipsis
Boolean		 true true, false Allows the shopper to select a page through the pager ellipsis.
pagerButtonsAtEdge
Number		 2 Number Sets the number of page buttons displayed at each pager edge.
pagerShowPrevAtEdge
Boolean		 true true, false Shows the previous-page control at the first pager edge.
pagerShowNextAtEdge
Boolean		 true true, false Shows the next-page control at the last pager edge.
pagerShowJustOne
Boolean		 true true, false Shows a pager when there is only one page.

Quick View options

Option Default Valid values or format Effect
enableItemQuickView
Boolean		 false true, false Replaces tile and list item-detail links with Quick View links when True.
popup_detailLinkText
String		 'View Item Details' Text Sets the item-detail link text in Quick View.
popup_priceText
String		 'Price' Text Sets the price label for stock-code Quick View.
popup_AddToCartBtnText
String		 'Add to Cart' Text Sets the Add to Cart label for stock-code Quick View.
popup_AddedToCartBtnText
String		 'Added to Cart' Text Sets the added-to-cart label passed from stock-code Quick View to the shared cart response handler.
popUpTitle
String		 'Quick View' Text Sets the Quick View popup title.
popup_showStockCode
Boolean		 True for stock-code Quick View; False for model Quick View true, false Shows the stock code in Quick View.
popup_showName
Boolean		 True for stock-code Quick View; False for model Quick View true, false Shows the item name in Quick View.
popup_showHeadline
Boolean		 True for stock-code Quick View; False for model Quick View true, false Shows the headline in Quick View.
popup_showSubHeadline
Boolean		 True for stock-code Quick View; False for model Quick View true, false Shows the subheadline in Quick View.
popup_showShortDescription
Boolean		 True for stock-code Quick View; False for model Quick View true, false Shows the short description in Quick View.
popup_showLongDescription2
Boolean		 false true, false Shows Long Description 2 in Quick View.
popup_showItemDetailLink
Boolean		 true true, false Shows the optional item-detail link in Quick View. Model Quick View also contains its own item-detail link.
popupShowTitle
Boolean		 true true, false Shows the Quick View popup title.
popupShowCloseButton
Boolean		 true true, false Shows the Quick View close button.
popupCloseOnOutsideClick
Boolean		 true true, false Closes Quick View when the shopper clicks outside the popup.
popupWidth
Number		 700 Pixels Sets the Quick View popup width.
popupHeight
Number		 500 Pixels Sets the Quick View popup height.
popupMinWidth
Number		 null Number or null Sets the minimum Quick View popup width.
popupMinHeight
Number		 null Number or null Sets the minimum Quick View popup height.
popupMaxWidth
Number		 null Number or null Sets the maximum Quick View popup width.
popupMaxHeight
Number		 null Number or null Sets the maximum Quick View popup height.
popupEnableDrag
Boolean		 true true, false Allows the shopper to drag the Quick View popup.
popupEnableResize
Boolean		 false true, false Allows the shopper to resize the Quick View popup.
popupModal
Boolean		 false true, false Applies popup shading when True.

Model Quick View pricing-grid options

Option Default Valid values or format Effect
pricingGridColumn_SKUtext
String		 'SKU' Text Sets the SKU column heading.
pricingGridColumn_Pricetext
String		 'Price' Text Sets the price column heading.
pricingGridColumn_CheckStockText
String		 'Stock' Text Sets the Check Stock column heading.
pricingGridColumn_QTYtext
String		 'QTY' Text Sets the quantity column heading.
pricingGridColumn_AddToCarttext
String		 '' Text Sets the Add to Cart column heading.
pricingGrid_CheckStockLinkText
String		 'Check Stock' Text Sets the Check Stock link label.
pricingGrid_addToCartBtnText
String		 'Add' Text Sets the Add to Cart link label.
pricingGrid_addedToCartText
String		 'Added' Text Sets the added-to-cart label passed from the pricing grid to the shared cart response handler.

Tile and list display integration

The Items_TileListing widget contains both the grid and list templates. When the Items_SortByDropdown widget is not present, Items_TileListing uses the grid template.

When both widgets are present, Items_SortByDropdown supplies the GetTileListingTemplate function that selects the template used by Items_TileListing. Configure the following options on Items_SortByDropdown, not on Items_TileListing.

Option Default Valid values or format Effect
defaultItemDisplayView
String		 'grid' 'grid', 'list' Sets the initial template. The grid template is used by default.
itemDisplayLayoutOptions
String		 'both' 'grid', 'list', 'both' Limits the available display layouts. With 'both', shoppers can use the Grid and List buttons.

Use Items_SortByDropdown on the same page as Items_TileListing when shoppers must be able to switch between grid and list display. The display-mode options are not read by Items_TileListing itself.

Filter integration

ItemCharacteristics_Filter and ItemPriceRange_Filter adjust the items displayed by Items_TileListing. The filter widgets use Items_TileListing to obtain the current search scope and refresh the listing after a shopper changes a filter.

ItemCharacteristics_Filter provides GetActiveFilters, which Items_TileListing uses when it constructs a search request. ItemPriceRange_Filter also uses this function, when available, so a price-range change retains selected characteristic filters.

Place each filter widget on the same page as Items_TileListing. The filter widgets do not render their own item results.

Validate the listing

  1. Open a category page and confirm the expected items appear.
  2. Test child-category and record-type options where configured.
  3. If Items_SortByDropdown is present, verify the configured initial display and the available Grid and List buttons.
  4. If a filter widget is present, change a filter and confirm the displayed items refresh.
  5. Verify tile dimensions, paging, and navigation labels at the intended viewport sizes.
  6. Add an eligible item to the cart and confirm the cart status message and quantity behavior are correct.