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:
- Go to your Dashboard and navigate to Data and then Catalogs
- Click Add catalog
- Select the catalog type you have decided to use
- 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:
- Click Add data
- Choose the column delimiter that your .csv file is using, which can be either commas or semicolons
- Click Select and upload CSV
- 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. - 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:
- Click Change Enrichment Data
- Choose the column delimiter that your .csv file is using, which can be either commas or semicolons
- Click Select and upload CSV
- Paste the resource URL on the Product Feed XML file location field
- 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)
- If you chose HTTPS, simply paste in the public url of the feed in the Product Feed XML file location input.
- If you chose SFTP, you need to fill in the required fields: Domain, Username, Password and File location.
- 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. - Once you have verified the types of the columns, if any changes were made, then click Save for those changes to take effect
- 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:
- 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.
- Right-click the Catalog Presenter component on your page to access its context menu and select Change Catalog
- 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:
- Open the Item Templates menu on the left sidebar
- Add as many item templates as you need
- 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.