Product Catalog module

The Product Catalog module 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. Read more below.

In this section, you will learn about:

  • Adding the module to a paragraph – and the module settings available to you when you do

To get started with the Product Catalog module, you must add it to a paragraph on a page.

From the paragraph, you then have access to the module settings window (Figure 3.1).

Figure 3.1 DOn't use this to do anything except see the module name and remove it, please :)

From here, you can control the behavior of the module – or remove it altogether.

We strongly discourage you from creating new sites using stylesheets, Javascript, or the theme-functionality. This is old technology, and is supported for legacy reasons.

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

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

The Product Catalog show settings (Figure 5.1) are used to control what to publish with the module.

Figure 5.1 Publishing a single product

If you select Product, you must select a product from your backend Product Catalog to publish – you do so with the Display > Product setting.

The Product Catalog show settings (Figure 6.1) are used to control what to publish with the module – in this case product groups.

Figure 6.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
  • Specify, if you want to publish products in subgroups as well.

With the Index option (Figure 7.1), you can publish the result of a query.

Figure 7.1 Publishing the result of a query

To do so, you must:

  • Select a query from the dropdown
  • Optionally, select one or more facet groups you want to use with the query, to help customers refine their searches.
  • Decide if you want to show empty facet options or not

Read more about indexing here.

If you choose to publish more than one product, you will see the extended display settings, and the alt. images settings (Figure 8.1).

Figure 8.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 product using new indexing, the sorting here will be used if no sorting has been set on the query

You can also check the remove duplicate products checkbox, if you want to make sure no products are listed twice – 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.

Using image patterns does not conflict with images

If you want to use image patterns, check the use alt. images checkbox to bring up the alt. images settings (Figure 9.1).

Figure 9.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

ProductID

{ProductID}.jpg

ProductNumber

{ProductNumber}.jpg

ProductName

{ProductName}.jpg

ProductManufacturer

{ProductManufacturer}.jpg

VariantID

{VariantID}.jpg

VariantComboName

{VariantComboName}.jpg

 

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.

Creating an image pattern for default images

Under Management Center > Ecommerce > Advanced configuration > Images, where you can set default images for your products and product groups, you can also create an image pattern for your default images. This can be useful if you want to render default images based on e.g. ProductID or VariantComboName.

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

Figure 10.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 11.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. 

From the additional settings area, you can:

  • Check Ignore URL parameters box to have the module 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=).
  • Check the enable optimized product retrieval to use a more efficient method of retrieving products from the database. Enabled by default since 8.8.0.2. Exists primarily for legacy reasons.
  • Enable (or disable) display caching which caches product group displays in server memory.
    • This will result in faster browsing of products for your customers. If this is enabled, you can set the display caching expiration in minutes. (If not set on the paragraph, the solution-wide caching settings are used. They are defined in Management Center > Ecommerce > Advanced > General).
  • 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 module attached. If you use this feature, you may want to disallow product details on this instance of the module 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 module, and by disallowing product details for this one, you can prevent Google from indexing duplicate content.
implementing

In this section you will learn about:

  • Catalog publishing and how to set it up
  • Switching product list templates with querystring parameters
  • Sorting a product list with querystring parameters
  • How to set up autoscaling of product images

From the management center, you can control how products are displayed across all your product catalog modules.

To access the advanced settings:

  • Go to Management Center > Ecommerce > Advanced configuration > General
  • Locate the Only show product settings (Figure 13.1)
Figure 13.1 Controlling how products are shown across product catalogs

From here, you can choose to:

  • Only show variants which are in stock, have a price, and are active
  • Specify a custom page to show if people try follow a direct link to a hidden, inactive product

From the templates-section of the advanced configuration settings ({figurerref}), you can also choose to use the product description text if the teaser text on the products is empty

Figure 13.2 Using the the product description text if the teaser text is empty

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 catalog publishing templates (Figure 14.1).

Figure 14.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.

An Add to catalog example:

<!--@If Defined(Ecom:CatalogPublishing.UseCatalogPublishing)--> <a href="/default.aspx?id=<!--@Ecom:Product:Page.ID-->&amp;productid=<!--@Ecom:Product.ID--> &amp;CatalogPublishingcmd=addtocatalog" >Add to catalog</a> <!--@EndIf(Ecom:CatalogPublishing.UseCatalogPublishing)-->

A Catalog Publishing example:

<!--@If Defined(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> <!--@EndIf(Ecom:CatalogPublishing.UseCatalogPublishing)-->

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

Figure 15.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 module, 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

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"

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=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.

To configure product image autoscaling:

  • Go to Management center > Ecommerce > Advanced configuration > Images
  • Locate the Autoscale area (Figure 21.1)
  • Specify a width and height for your small, medium and large image sizes – and activate the sizes you want to work with on your solution
Figure 21.1 The autoscale settings

Your images, whether attached manually or loaded through an image pattern, will then be automatically resized in the frontend

On upscaling pictures

If the scaling parameters are larger than the original picture size, then the image will not be resized. An image placeholder will still be rendered displaying the excess pixels, but Dynamicweb will not upscale images, since that looks just awful.

development

There is no developing specific information for this subject.

database

There is no database specific information for this subject.

integration

There is no integration specific information for this subject.