Catalogs, Product Feeds And Enrichment

You can use the Catalogs feature to present lists of items, such as products or services, simply by uploading their data or loading it directly from a feed, making it faster to create content, while being easier to manage. This is a great tool to present for example a Product Catalog or a Product Finder, immersed in interactivity.

What’s a Catalog

A Catalog is a list of items with properties.

For example: a list of products where each product has an ID, a title, a description, a link, an image, and a price, can be a Catalog.

Decide What Type of Catalog You Need

Before you create a Catalog you need to decide how you would like to add data to that catalog. Here are your options:

• Standard – you upload the data in a comma separated file (.csv). This is useful for when you want to simply present a small catalog of items, possibly with filtering options, search function and navigating result pages.
• Product Feed with Enrichment – same as Product Feed, but here you also upload a comma separate file (.csv) with data that will filter the products from the Product Feed by ID, and then enrich the results of that filter with the uploaded data. This is useful when creating for example product finders that narrow product listings based on collected data, where that data requires extra enrichment on top of a basic product feed to also have the up to date properties advantage.

How to Create a Catalog

Once you know which type of Catalog you need, you can create a new catalog:

1. Go to your Dashboard and navigate to Data and then Catalogs
2. Click Add catalog
3. Select the catalog type you have decided to use
4. Give the catalog a name and then click Confirm

Adding Data To Your Catalog

Depending on which type of Catalog you chose, the way you add data to it will vary. See below how to setup the different types of Catalogs.

Standard Catalog

To add data to an empty Standard Catalog, you provide a comma separated file (.csv) which must include column names on the first line. Those names should be unique and will be used to identify its properties when editing your page.

Once you have a comma separate file with item data, then click on the Catalog to open its settings, and:

1. Click Add data
2. Choose the column delimiter that your .csv file is using, which can be either commas or semicolons
3. Click Select and upload CSV
4. After the data has been uploaded and processed, you will see a sample of data. At this point you should review the column types.
   For example: if a column named “colors” has values such as “red,blue” then you might want to click the dropdown below the column name to change the type from text to list. Different data types will allow you to work with them differently.
   
5. Once you have verified the types of the columns, if any changes were made, then click Save for those changes to take effect

If later you wish to change the data, simply click Change Data and reupload a new .csv file. Columns with the exact same name will be updated so that their types will remain as before, missing columns will be deleted, and new columns will be added, so make sure to review column types again if you add new columns.

And that’s it! Your Standard Catalog is ready to be used on any number of your projects!

Product Feed With Enrichment

To setup a product feed, you must first have a product feed resource that can be accessed publicly via a URL or privately via an SFTP. The only currently supported format is the Google Product Data specification, so the feed resource you provide must follow that format.

You also must have a comma separated file .csv that will filter and enrich a Product Feed, which:

• must include column names on the first line. Those names should be unique and will be used to identify its properties when editing your page.
• must include a column with the name “id”. The value in this column will be used to filter the Product Feed, as well as associate the data from the .csv file to the filtered results.

Once you have that .csv enrichment file, then click on the Catalog to open its settings, and:

1. Click Change Enrichment Data
2. Choose the column delimiter that your .csv file is using, which can be either commas or semicolons
3. Click Select and upload CSV
4. Paste the resource URL on the Product Feed XML file location field
5. Choose the location for your Product Feed, either HTTP (in case you have a public URL) or SFTP (in case you have the product feed stored privately in an SFTP server)
   1. If you chose HTTPS, simply paste in the public url of the feed in the Product Feed XML file location input.
   2. If you chose SFTP, you need to fill in the required fields: Domain, Username, Password and File location.
6. After the data has been processed, you will see a sample of data. At this point you should review the column types.
   For example: if a column named “colors” has values such as “red,blue” then you might want to click the dropdown below the column name to change the type from text to list. Different data types will allow you do work with them differently.
   
7. Once you have verified the types of the columns, if any changes were made, then click Save for those changes to take effect
8. You may choose to change the update frequency, depending on how often your Product Feed gets updated.

And that’s it! Your Product Feed Catalog with Enrichment is ready to be used on any number of your projects!

How To Use A Catalog

In the Dot.vu Editor:

1. Start by dragging and dropping a Catalog Presenter component from the Tools menu onto anywhere on your page. Skip this step if you are using a template that already has a Catalog Presenter.
2. Right-click the Catalog Presenter component on your page to access its context menu and select Change Catalog
3. Select the Catalog you wish to use from the Select Catalog dropdown

The next step is to enter the Catalog, and then create and edit one or more item templates. A Catalog Presenter already comes with one Item Template by default.

Item Templates For Catalog Items

To manage the Item Templates of a Catalog Presenter, you must navigate to that Catalog Presenter. Once inside the Catalog Presenter, decide if you want to use one or more templates for your products.

If you choose to use a single template, all products will be presented equally in terms of design. This is good for a clean grid of product that is easy on the eye and faster to setup.

If you wish for products to be displayed in different ways, based on criteria, then you must define multiple templates:

1. Open the Item Templates menu on the left sidebar
2. Add as many item templates as you need
3. Then add and define conditions for each template so that when the products are to be shown, the right template is used for it. In order from top to bottom, the first template where the condition will be true will be the chosen template. If no templates match, the last template in the list is used. It is recommended that you have the conditions cover all your products, or if not possible then make sure the last item template on the list is a general one as fall back.

And that’s it! Now you can edit the Item Templates as any layout, you can  navigate between them, and very importantly you can use the Catalog Data as you would any other data available on the page while editing any item template.

Filter Catalog

This is the core action used to dynamically narrow down catalog results based on user selections or predefined rules.

This action applies one or more filters to the catalog and limits the displayed items to those that match the defined criteria.

• Filters are based on catalog fields (such as text, number, boolean, or list fields)
• Only items matching all active filter conditions are shown
• Available filter operations depend on the selected field type.

Filters are combined so that items must match all field filters, while multiple conditions on the same field are treated as alternatives. See below.

Reset filters option: the Filter catalog action includes a Reset filters checkbox. When enabled, any filters already applied to the catalog are cleared before applying the new filter. When disabled, the new filter is added on top of the existing filters.

Action: Sort catalog results

This action sorts the catalog items based on one or more fields.

• Sorting can be applied in ascending or descending order
• Multiple sort rules can be combined
• Sorting affects the order of the results but does not change which items are included

Use this to control how results are presented, such as sorting by price, name, date, or priority.

Action: Reset filters

This action clears all currently applied filters on the Catalog Presenter.

• Any active filtering conditions are removed
• The catalog returns to its unfiltered state

Use this when you want to give users a quick way to start over with a clean view of the catalog.

Action: Load remainder values

This action loads the remaining available field values that can be used for filtering the catalog.

• Ensures filter options reflect only values that still exist in the current catalog state
• Commonly used after filters are applied, to prevent showing filter values that would lead to empty results
• Helps keep filtering options relevant and accurate

This is especially useful for dynamic or cascading filters, where available options should update based on previous selections.

Action: Clear

Clears the catalog content and stops any active filtering operation.