Product list widget

PREREQUISITES: You have created at least one product. For more information, see Products.

After you have dragged the Product list widget on your page, the widget automatically displays all created products.
To configure the display of the products, perform the following:

Click Edit button in the upper-right corner of the widget.
The Edit Product List appears where you can configure the following:

1. In content, you can choose which products of all the created products you want to display.
   In Which products to display? radio button select one of the following:
   • All published products
     All created products are displayed.
   • One particular product only…
     The system displays one product item.
     1. To select the product you want to display, click Select product button.
        A list of all products appears.
     2. Select the product and click Done selecting.
   • Selection of products:
     To narrow the list of products displayed, select one or both of the following:
     • You can narrow the displayed products by departments.
       1. Select by Departments
       2. Click Select button.
       3. Select only the departments from which you want to display products.
       4. When finished click Done.
     • You can narrow the displayed products by dates.
       1. Select by Dates…
       2. Click Select button.
       3. Select one of the predefined time intervals, so that products created during that interval will be displayed or choose Custom range… and use the From and To input fields to select a time interval.
       4. When finished click Done.
     • You can narrow the displayed products by tags.
       1. Select by Tags…
       2. Click Select button to select the tags, so that products tagged with those particular tags will be displayed.
       3. Click Done.
2. If you are using multilingual mode, choose what to do with products that are not translated by selecting one of the following:
   
   • Don’t display products which are not translated to the current language. 
   • Display products in their default language if they are not translated to the current language.

• If you select Use paging radio button, the system divides the products into pages.
  In the input field you specify how many pages per page you want to display.
• If you want the users to be able to select how many items to be displayed in a page, select Allow users to set number of items per page checkbox.
• If you select Use limit radio button, the system displays only a limited number of the products you have chosen to display.
  In the input field, you specify how many products you want to display.
• If you select No limit and paging radio button, the system displays all the products that you have selected in Content tab.
• In Default Sorting dropdown box, select a sorting criterion for the products.
  You can sort by creation date, name, price, or rating.
• In Size of thumbnails dropdown box, select the size of the product images that will be displayed in list mode.
  You use thumbnails instead of actual image sizes in order to speed up the loading of the page with the Products list widget. 
  Choose between one of the predefined thumbnail sizes. For more information about defining new sizes, see Thumbnails.

  PREREQUISITES: The library that contains the product images must have generated thumbnails for the size that you have selected. For example, if in the Products list widget you have selected size of thumbnails 80x80 px, the library that contains the product images must also have generated 80x80 px thumbnails. For more information, see Image libraries » Step 6. If the library does not have the selected size of thumbnails, the system automatically generates 160x160 px image thumbnails for the products.

• In List template, select the template, which is used to display the products on the webpage.
You can create a custom template by clicking Create New Template. You can edit existing templates by selecting them and clicking Edit.
For more information, see Create and edit widget templates.

1. In Open Single item in… radio button, select one of the following:
   
   • Auto-generated page
     When a product is clicked, it is displayed in a page which is automatically generated and has the same layout as the current page.
   • Select existing page…
     You select a page from the existing pages with certain layout where a product will be displayed when clicked.
     

     NOTE: In order to display the product, the page you have selected must have the Product list widget added.

     1. Click Select Page.
        From the treeview, select the page where you want to display the product.
     2. Click Done selecting.
2. Under Redirect to Shopping cart, select whether you want the user to be redirected to the shopping card when a product is added to the cart.
3. If for each product, you want the system to display a link to a wish list, select Allow user to add products to wish list checkbox. 
   You must configure the Wish list widget widget.
4. Select the thumbnails for product images displayed in details mode.
   • In Size of image preview dropdown box, select the size of the primary product image that will be displayed in details mode.
   • In Size of thumbnails select the size of the secondary product images, if any, that will be displayed in details mode.
   • You use thumbnails instead of actual image sizes in order to speed up the loading of the page with the Products list widget. 
     Choose between one of the predefined thumbnail sizes. For more information about defining new sizes, see Thumbnails.

     PREREQUISITES: The library that contains the product images must have generated thumbnails for the size that you have selected. For example, if in the Products lists widget you have selected size of thumbnails 80x80 px, the library that contains the product images must also have generated 80x80 px thumbnails. For more information, see Image libraries » Step 6. If the library does not have the selected size of thumbnails, the system automatically generates 160x160 px image thumbnails for the products.

5. In Detail templates, select the template, which is used to display the products on the webpage.
   You can choose the same widget template for all product types or you can choose different templates for different product types.
   Select one of the following:
   • Same template for all product types...
     Select the template from the list.
     

     You can create a custom template by clicking Create new template. You can edit existing templates by selecting them and clicking Edit.

   • Different template for each product type...
     For each of the created product types select the widget template that you want to use.
     For more information, see Product types.
     

     You can create a custom template by clicking Create New Template. You can edit existing templates by selecting them and clicking Edit.

     For more information, see Create and edit widget templates.

• In field AllowUsersToSortItems, enter true or false respectively.
• In field SortingOptions field, enter the sorting options that will be available to the users.
  You can enter one or more of the following options, separated by commas:
  • PriceAsc:PriceAscendingOptionText
  • PriceDesc:PriceDescendingOptionText
  • NameAsc:NameAscendingOptionText
  • NameDesc:NameDescendingOptionText
  • CreatedDate:CreatedDateOptionText
  • RatingDesc:Rating

In addition to Departments, you can use custom classification to filter the products. To do this click Advanced button and in filed AllowCustomClassificationFiltering, enter true. For more information, see Create custom classifications.

When you are finished with all the settings, click Save.
The Edit Product List window closes and the Product list widget is configured to display the products you have selected.

For more information about advanced configuration options, see Advanced configuration of widgets.