This article explains how the two "Catalog" examples were built and how you can reuse them for your own needs. One is a retail example illustrating a Print business called Catalog - Retail Example and the other is an exhibit example about Shakespeare plays called the Catalog - Exhibit Example.
Both examples are based on the Catalog Reference Design, a template for creating experiences in which a catalog of items, organized by category and subcategory, can be browsed. Searches are also possible, and individual items can be selected to display additional details. Two language options are available.
Neither of these examples includes any notion of shopping list, cart, or basket; both are intended for browsing only. Check out the "Browse and Select" reference design if you need a shopping cart-like feature.
To access these samples, download them using the Marketplace tab of the Experiences panel in Composer, or download them via our online Marketplace.
How it works
The diagram below displays an implementation-independent view of the reference design. It applies to retail, museums, corporate presentations, and any other catalog browsing scenario.
The ultimate goal of any catalog browser experience is to enable users to navigate through several items, whether products, historical facts, services, or other items that can be grouped into categories. This navigation can be made by selecting categories/sub-categories or using a built-in search engine, taking advantage of the filtering mechanism of the data source used: the Intuiface Headless CMS.
As you can see below, the differences between the retail and exhibit sample experiences are only about content and aesthetics. The guts are identical, both based on the "Catalog" reference design.
Headless CMS Base - Data structure and content
Both examples use the same Headless CMS base structure, divided into four main collections, plus an additional "Text Settings" component to help manage the multi-language UI elements.
- Product Media Files
Product Media Files
Both "Catalog" samples use the Data Tracking Interface Asset to log user actions for Analytics. With that data, you answer questions such as: