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	Comma-separated category identifiers	Limits the listing to specified categories.
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.
showScrollBar Boolean	true	true, false	Controls list-container overflow behavior.
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'	'vertical', 'horizontal'	Sets tile ordering 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; -1 uses the site’s Item Listing Page Size setting	Sets 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'	Sets the supplied pager theme.
addToCartButtonText String	'Add to Cart'	Text	Sets the add-to-cart button label.
addedToCartButtonText String	'Added to Cart'	Text	Sets the add-to-cart status label.
qtyLabelText String	'Qty:'	Text	Sets the quantity label.
learnMoreLinkText String	'Detail View'	Text	Sets the detail-view link label.
addedToCartMessageTimeout Number	1500	Milliseconds	Sets the success message duration.
addToCartErrorMessageTimeout Number	3500	Milliseconds	Sets the error message duration.

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. Verify tile dimensions, paging, and navigation labels at the intended viewport sizes.
4. Add an eligible item to the cart and confirm the cart status message and quantity behavior are correct.