Product Catalog for ViewModel

Publish product data to frontend using the speed of ViewModels

The Product Catalog for ViewModel app is a paragraph app which is used to publish product data to frontend. It functions much like the regular Product Catalog app but uses ViewModels for added speed and code-hinting support.

The key functionality is to:

Select a subset of products to publish
Configure display-related settings, such as the number of products to show before paging
Control how the product data is rendered via templates

When adding this app to a paragraph, you will see a list of settings for configuring how the app works, they are explained below. The most important settings are in the Index and Templates-sections, but all are documented below.

Index

To select the products you want to publish, use the index-section to specify a query and any facet groups you want to have available in the template. Product Catalog for Viewmodel1

You can override standard parameters and sorting for the query if you need to. If the Use group sort in group context setting is active, product sort order is set to follow the group sort order whenever a GroupID-parameter is present in the url.

Spell check

The Spell Check-section is used to implement Did you mean-suggestions when users search for a product but can't spell. Product Catalog for Viewmodel2 The Spell Check applies the Lucene SpellChecker against an index document field and – based on the available terms in that field for all documents – find the closest matches using several distance filters. Check out our guide for implementing Did you mean-suggestions here.

Display

The Display-settings are used to specify how many products per page to display before creating a new virtual page for pagination purposes. Product Catalog for Viewmodel3

Templates

The Templates-section controls how the products returned by the query are presented in frontend. Product Catalog for Viewmodel4

There are four templates:

Template	Used for	Notes
List	Show a list of products	Should inherit the ProductListViewModel
Details	Show a single product	Shown when a `ProductId`-parameter is present in the URL. Should inherit the ProductViewModel.
Compare	Compare two or more products	Not currently available
Feed	Publish product data in a feed	Shown when feed=true is present in the url.

All templates for this app should be placed in a Designs\YourDesign\Ecom\ProductCatalog-folder.

List

List templates are used to show a list of products in frontend:

@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.ProductCatalog
@inherits ViewModelTemplate<ProductListViewModel>

@if (Model.Products != null) {
    foreach (var product in Model.Products)
    {
        // Do your stuff
    }
}

Details

Details templates are used to show a single product in frontend. They are loaded when a ProductID-parameter is present in the URL on a page with a ProductCatalog app attached.

@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.ProductCatalog
@inherits ViewModelTemplate<ProductViewModel>

<h1>@Model.Name</h1>
<div>@Model.LongDescription</div>
<div>@Model.Price</div>

// Do your thing

Feed

Feed templates are used to show data about one or more products in a feed-format, e.g. a JSON feed. This template is loaded when feed=true is present in the ULR on a page with a Product Catalog app attached.

@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.ProductCatalog
@inherits ViewModelTemplate<ProductListViewModel>


@if (Model.Products != null)
{
    foreach (var product in Model.Products)
    {
        //Do your feed thing
    }
}

Product properties

Below the Templates-selector, a series of property-selectors are shown. They allow you to specify exactly which product properties to include in the ViewModel, which may have a performance impact on some solutions.

To include a property, move it from excluded properties to included properties. Please note that if nothing is selected, all properties are includes. Product Catalog for Viewmodel5

Table of Contents