Introduction

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 Examples tab of the Experiences panel in Composer or download them via our online Intuiface Examples catalog.

Video

How it works

Experience Structure

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. 

• Categories
• Sub-Categories
• Products
• Product Media Files

Categories

Sub-Categories

Products

Product Media Files

Text Settings

Analytics

Both "Catalog" samples use the Data Tracking Interface Asset to log user actions for Analytics. With that data, you answer questions such as: