Product Browser
Reference for the AngularJS product browser component templates used in Print Store themes.
The product browser is an AngularJS-powered component that provides interactive product listing with filtering, sorting, pagination, and grid/list view switching. It is used on SubCategoryOverview pages and anywhere products need to be browsed with attribute-based filtering.
The component loads its HTML templates from the product-browser/ folder in your theme. There are four template files that together define the complete product browsing experience.
Template Files
| File | Purpose |
|---|---|
product-view.html | Main container — header, sort controls, product grid/list, and pagination. |
filter-panel.html | Sidebar — category navigation, active selections, and attribute filters. |
gridlist.html | Product card — used in both grid and list views. |
inline.html | Product card — used in the inline carousel view. |
product-view.html
The main container template that wraps the product listing. It handles:
- Results count and header
- Category, size, and quantity dropdowns
- Sort order (Default, A-Z, Z-A, Price Low-High, Price High-Low, Newest)
- Grid/list view toggle
- Product grid with pagination
- Inline carousel mode
Key AngularJS Bindings
| Binding | Description |
|---|---|
productView.products.length | Total number of products found. |
productView.items | Current page of products to display. |
productView.view | Current view mode: 'grid' or 'list'. |
productView.sort | Current sort order. |
productView.pages | Array of page numbers for pagination. |
productView.page | Current page index (zero-based). |
productView.loading | True while products are being loaded. |
productView.showInline | True when using inline carousel mode instead of grid/list. |
productView.labels | Translatable label strings (header, results, sortBy, etc.). |
Include Tokens
The product-view template uses special tokens to include the gridlist and inline templates:
<%-- Inside the ng-repeat for grid/list view --%>
<%gridlist%>
<%-- Inside the carousel component for inline view --%>
<%inline%>These tokens are replaced at runtime with the contents of gridlist.html and inline.html respectively.
Sort Options
| Value | Sort Order |
|---|---|
df | Default (display order) |
az | Name A to Z |
za | Name Z to A |
lh | Price Low to High |
hl | Price High to Low |
po | Popularity (hidden by default) |
nw | Newest first |
UI Visibility Controls
Show/hide sections with these scope variables:
| Variable | Controls |
|---|---|
showHeader | Results count, sort controls, and view toggle. |
ui.showCategory | Category/Style dropdown. |
ui.showSize | Size dropdown. |
ui.showQty | Quantity dropdown. |
ui.showSort | Sort order dropdown. |
ui.showView | Grid/list view toggle buttons. |
filter-panel.html
The sidebar filter panel that provides category navigation and attribute-based filtering. It includes:
- Category list with product counts
- Active filter selections with remove buttons
- Collapsible attribute filter groups with color swatches
Key AngularJS Bindings
| Binding | Description |
|---|---|
filterPanel.categories | Array of categories with cat (category object), count (product count), and ignoreCount flag. |
filterPanel.selections | Array of active filter selections, each with name and values array. |
filterPanel.groups | Array of attribute filter groups, each with name, items array, open state, and hidden flag. |
filterPanel.hasAttributes | True if attribute filters are available. |
filterPanel.loading | True while filters are loading. |
filterPanel.labels | Translatable labels (header, chosen, clear, remove, narrow). |
UI Visibility Controls
| Variable | Controls |
|---|---|
filterPanel.ui.hide_categories | Hides the category navigation list. |
filterPanel.ui.hide_selections | Hides the active selections panel. |
filterPanel.ui.hide_filters | Hides the "Narrow your results" filter section. |
Filter Item Properties
Each item in a filter group has:
| Property | Description |
|---|---|
item.value | Display value for the filter option. |
item.itemCount | Number of products matching this filter. |
item.color | Color hex code (for color attribute swatches). |
item.filtered | True if this filter is currently active. |
item.callback | Function to apply this filter. |
gridlist.html
The product card template used for both grid and list views. Renders inside an ng-repeat loop over productView.items.
Item Properties
| Property | Description |
|---|---|
item.Id | Product ID. |
item.Name | Product display name. |
item.Url | Product detail URL. |
item.Description | Product description (HTML, use with ng-bind-html). |
item.ItemNumber | Item/SKU number. |
item.ModelNumber | Model number. |
item.Inventory | Inventory status display. |
item.IsStatic | True for static (non-customizable) products. |
item.LinkText | Action button text (e.g., "Order Now", "Customize"). |
item.SizeId | Size ID for offline template download. |
item.Download | True if an offline template is available for download. |
item.GetPrice() | Returns the formatted starting price. |
item.GetQuantity() | Returns the quantity for the displayed price. |
item.GetUnitPrice() | Returns the formatted unit price. |
Thumbnail URL Pattern
Product thumbnails are loaded via the thumbnail handler:
<img src="/thumbnails/p/{{item.Id}}?width=300&height=300&fit=fill" alt="">Example
<div class="product-card">
<a href="{{item.Url}}">
<img src="/thumbnails/p/{{item.Id}}?width=300&height=300&fit=fill" class="img-fluid" alt="">
<h4>{{item.Name}}</h4>
</a>
<span>{{item.GetQuantity()}} {{item.GetPrice() | money}}</span>
<a href="{{item.Url}}" class="btn btn-primary">{{item.LinkText}}</a>
</div>inline.html
The product card template used in the inline carousel view (ui-carousel component). Same item properties as gridlist, but typically shows more detail since cards are displayed one at a time in a slider.
The inline template renders inside a <carousel-item> component and has access to the same item properties documented above.
Thumbnail URL Patterns
The product browser uses URL-based thumbnail generation:
| Pattern | Description |
|---|---|
/thumbnails/p/{id}?width=W&height=H&fit=MODE | Product thumbnail by product ID. |
/thumbnails/c/{id}?width=W&height=H&fit=MODE | Category thumbnail by category ID. |
/productthumb.ashx?p={id}&w=W&h=H&bw=0&fwnb=false | Legacy product thumbnail handler. |
The fit parameter accepts: fill, center, trim, stretch. See Object Models — ThumbnailEntry for details.
Related Pages
- Theme Structure — Where product-browser/ templates sit in the theme folder
- Object Models — ThumbnailEntry and other objects used for thumbnail URL generation
- Data Properties — Server-side properties available on SubCategoryOverview pages hosting the product browser