Product Catalog app

The Product Catalog app is used to publish your products on the frontend, and is therefore an essential part of working with Dynamicweb Ecommerce.

You can use the Product Catalog to publish either:

  • A single product
  • Selected product groups (such as all the top groups of a particular shop)
  • A selection of products based on an index-query

And, of course, you can control how they are displayed, searched, and rendered – and much more.

To start using the Product Catalog app add it to a paragraph on a page.

This will give you access to the app settings, which you can read about below.

Once added to a paragraph, you will have access to all the settings and configuration options available for the Product Catalog app.

These are described below – except for Catalog publishing, which is described in the Implementing section below.

The Show settings (Figure 3.1) are used to control what to publish with the app.

Figure 3.1 Publishing a single product

The Product option lets you select and publish a single product from your backend Product Catalog.

The product groups option (Figure 4.1) allows you to publish the contents of one or more product groups on your solution.

Figure 4.1 Publishing product groups

If you select Product groups, you can specify one or more groups to publish.

You can:

  • Publish All top groups in a particular shop
  • Publish a custom selection of groups

Using the include subgroups checkbox, you can include or exclude subgroups from being published.

The products (context) option (Figure 5.1) is used to render products in a particular context. Currently only used to render the correct products for back-in-stock notifications.

The Index option (Figure 6.1) allows you to publish the products which match one of your index queries, to control which facet groups should be available for your customers to refine the list of products displayed, and to override default query parameters and sorting settings. You can read more about indexing here.

Figure 6.1 Publishing the result of a query

To do so:

  • Select a query from the dropdown
  • Optionally select one or more facet groups that you want to make available in frontend to refine the search results
  • Enable or disable facet options with no results

If your query contains parameters (e.g. if it's a free text search query), you can override the default parameter values from the query definitions here, just like you can override any default sorting you may have set up on the query.

Please note that you should not sort by an analyzed field - and that by default, many schema extender fields are analyzed. If you want to sort by a field which is analyzed by default (such as the product name field), add a custom index field to you query which is store and indexed - but not analyzed - and sort by that field.

If you publish more than one product you have access to the extended display settings (Figure 7.1).

Figure 7.1 The display-settings

With the display settings you can customize:

  • How many products you want to display on each catalog page
  • How many teaser-text characters you want to render
  • Which property to sort the products by, and in which order - if publishing products using new indexing, these settings override the sorting created on the query and above.

If you want to make sure no products are listed twice check the remove duplicate products checkbox – this is normally a good idea, but if you have a lot of legacy code on your solution, you may be removing them in other ways.

Image patterns are a way to avoid having to manually configure product media for each products. Instead, you specify an image folder and a pattern by which the product catalog should assign pictures to products.

To use image patterns enable use alt. images and configure the alt. images settings (Figure 8.1). You can add alternative patterns by clicking "Add pattern".

Figure 8.1 The 'Use alt. images' settings allow you to set an image pattern for loading product pictures

You can specify a pattern based on the following product fields:

Field

Example

Comment

ProductID

{ProductID}.jpg

 

ProductNumber

{ProductNumber}.jpg

 

ProductName

{ProductName}.jpg

 

ProductManufacturer

{ProductManufacturer}.jpg

 

VariantID

{VariantID}.jpg

 

VariantComboName

{VariantComboName}.jpg

 
VariantOptionLevel {VariantOptionLevel1}.jpg

Retrieves the name of the variant option added to the product.

If you e.g have colors as 1. level variants (Orange, Green, Blue) they are OptionLevel1.

If you also have sizes as variants (Large, Medium, Small, they are OptionLevel2.

You can combine these fields in any way you’d like, e.g. {ProductNumber}_{ProductManufacturer}.jpg{ProductNumber}_{VariantComboName}.jpg or {ProductID}_{ProductName}.jpg, and image patterns support using the wildcard characters ‘?’ and ‘*’.

If more than one image matches the pattern, the first one in alphabetical order will be used.

You can read about the image pattern hierarchy in this article.

The templates section (Figure 9.1) is where you control how your products are presented in frontend.

Figure 9.1 The templates section lets you specify and modify templates for various purposes

The templates you can modify or access here are:

Template

What it controls

Location

List

How the product list is displayed

/Templates/eCom/ProductList

Groups

Showing a list of product groups

/Templates/eCom/GroupList

Product

How a single product is displayed (when clicked on)

/Templates/eCom/Product

Search

The search function

/Templates/eCom/Search

Compare

How to render product comparison

/Templates/eCom/Productlist.

No products found

What to display, when no products are found by a search

/Templates/eCom/Productlist

 

You can read more about working with templates in the template tag manual.

The additional settings area (Figure 10.1) is a hotpot of various settings, primarily for those using multiple product catalogs on the same page, for display caching, and for SEO purposes. 

Figure 10.1 Additional settings

From the additional settings area, you can:

  • Check Ignore URL parameters box to have the app ignore any parameters, e.g. GROUPID in the query string
    • This is primarily used when using multiple product catalogs on the same page (where you want only one of them to react to query string parameters=)
  • Enable using the first page as a canonical URL
    • Online shops can often have identical or similar content that is accessible through multiple parameter variations of the same URL. Most search engines will try to cluster such duplicate content into one search result and then try to guess which version of the URL is the best to represent the entire cluster of results. By enabling Use first page in list as canonical URL, you basically tell search engines that the first page in a list is the URL that you prefer to be returned by search engines. This is useful for search engine optimization purposes
  • Specify a different paragraph to display the product catalog on than the one you are editing. The other paragraph also needs to have a product catalog app attached. If you use this feature, you may want to disallow product details on this instance of the app by checking the Do not allow product details (404) checkbox. The details will, of course, be shown by the other instance of the product catalog app, and by disallowing product details for this one, you can prevent Google from indexing duplicate content
  • Choose if you want to retrieve your My Lists based on User ID or costumer number

From the advanced settings in Settings, you can control how products are displayed across all your product catalog apps.

Read more about the advanced settings in this article.

Catalog publishing is a feature, which allows users to add products to a catalog, which can then be generated as a pdf. This can be useful if you want to create and print/email customer-specific offers – or allow your customers to do the same thing.

To use catalog publishing check the catalog publishing checkbox to access the templates (Figure 2.1).

Figure 2.1 The catalog publishing templates

In this section, you can select (and modify) the templates used to generate your catalog pdf.

You have separate templates for:

  • The first and last page of the pdf
  • Regular (content) pages
  • The header and footer used on content pages
  • Email and email form templates

The Catalog Publishing templates are located in the Templates\eCom\CatalogPublishing folder in your File Archive.

In order to use catalog publishing, you must modify your templates (e.g. your product list & product templates) to render an Add to catalog and Catalog Publishing button inside the product loop.

An Add to catalog example:

if (!string.IsNullOrWhiteSpace(GetString("Ecom:CatalogPublishing.UseCatalogPublishing"))) { <a href='/default.aspx?id=@product.GetValue("Ecom:Product:Page.ID")&productID=@product.GetValue("Ecom:Product.ID")&CatalogPublishingcmd=addtocatalog' >Add to catalog</a> }

A Catalog Publishing example:

if (!string.IsNullOrWhiteSpace(GetString("Ecom:CatalogPublishing.UseCatalogPublishing"))) { <div style="clear: both; width: 100%;padding-bottom:5px; text-align: right;"> <a href='/default.aspx?CatalogPublishingcmd=preview' >Catalog Publishing</a> </div> }

Following the Catalog Publishing link will take you to a list view (Figure 3.3).

Figure 3.3 The catalog publishing list

From the catalog publishing list, you can:

  • Remove one or more products
  • Change the price and number of each product
  • Click the Create Catalog button to create the pdf-catalog – you will be presented with two new links: a download link and an email link.

Limitations

The following limitations and quirks exist for Catalog Publishing:

  • Headers and footers cannot be resized
  • You cannot control the number of pages in the PrintPublishingRegularPage template
  • You cannot put more than one page before the content pages with selected products. Insert blank pages after first page, or before last.
  • First and last pages cannot have numbers.

Dynamicweb natively supports a number of querystring operations for manipulating the product catalog.

You can:

  • Change between different product list templates
  • Sort products in a product list by various values

To change between product list templates, you can use the View parameter in your query string, provided that your templates names are suffixed correctly, for instance:

  • MyTemplate.cshtml
  • MyTemplate_tiles.cshtml
  • MyTemplate_list.cshtml
  • MyTemplate_whateveryoulike.cshtml

If you select the MyTemplate.cshtml template as your product list template, you can then change between that and your suffixed templates by specifying View=suffix in the query string:

mypage.com/Store.aspx?View=tiles mypage.com/Store.aspx?View=whateveryoulike

Changing between two product list templates through the query string is intended to support changing between e.g. a list view and a tiles view when viewing a product catalog, but you can of course use it any way you want.

You can also reference the full template name, e.g. mypage.com/Store.aspx?View=MyAlternativeTemplate.cshtml – in that way, you are not limited by the default template chosen in the Product Catalog app, but can select any template in your /Templates/eCom/ProductList folder.

Per default, products published are sorted by the sort order and field you select under the product catalog display settings, but you can add sorting criteria to the query string to sort your products further.

To do so, simply use the SortBy parameter with one of the following values:

  • Name
  • Number
  • Price
  • Created
  • Updated
  • ShortDescription
  • LongDescription
  • ImageSmall
  • ImageMedium
  • ImageLarge
  • Link1
  • Link2
  • UnitStock
  • Weight
  • Volume
  • Active

You can specify a sort order by using the SortOrder parameter, with the values ASC (for ascending) or DESC (for descending), for instance:

  • yourpage.com/Store.aspx?Sortby=Number&SortOrder=ASC

We also support sorting on multiple parameters in query string - eg. SortBy=Name,Price&SortOrder=asc,desc or using simplified syntax: SortBy=Name,-Price with the '-' before Price denoting desc

You can filter products in a product list by adding the parameter eComSearch to your query string, followed by one or more filtering parameters.

The following query finds all products manufactured by a company called ‘Dimmers Inc’:

Default.aspx?ID=YOUR_ID&eComSearch=1&Manufacturer="Dimmers%20Inc"YOUR_ID&eComSearch=1&Manufacturer="Dimmers%20Inc"

The following parameters are available to you and can be used to filter your product catalog:

  • LanguageID
  • ProductPrice
  • ProductName
  • ProductNumber
  • ProductWeight
  • ProductVolume
  • ProductStock
  • ProductType
  • Manufacturer
  • GroupID

You can combine a parameter with a matching operator statement to further control your filter result. To do so, simply match the parameter with a corresponding parameter with a _type suffix and an operator value matching your needs:

Operator

Function

0

LIKE

1

NOT LIKE

2

<> (not)

3

= (exact match)

4

< (less than)

5

> (greater than)

 

For instance, the following query string will find all products with a price less than 500:

Default.aspx?ID=YOUR_ID&eComSearch=1&ProductPrice=500&ProductPrice_Type=4YOUR_ID&eComSearch=1&ProductPrice=500&ProductPrice_Type=4

Filtering a product list using the eComSearch parameter is outdated and supported for legacy reasons – and we strongly recommend that you use the indexing engine to index your products and create the parameters you need to do the same thing – but quicker, easier and with more flexibility.

Product images are normally managed either by attaching the images in the different sizes to the product or by using the image patterns functionality, which allows you to use a special image pattern to display product images.

In both scenarios, you need to attach or load differently sized images if you want to work with them, unless you use autoscaling.

Autoscaling ensures that product images are always displayed in sizes you can configure, preventing your design from breaking due to different image sizes.

You can read more on how to configure product image autoscaling in this article.

Autoscaling images in this way is a slightly outdated method supported primarily for legacy reasons. We recommend that you use the more modern Image Handler tool to work with dynamically resized images in Dynamicweb templates.

Database

There is no database specific information for this subject.