Introduction

This article explains how the four "Catalog" examples were built and how you can reuse them for your own needs. Two are retail examples for a Printing business called Catalog - Retail Example, and the other two are museum examples for a Shakespeare exhibit called 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.

None of these examples includes any notion of a shopping list, cart, or basket; all 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 the Intuiface Examples catalog on our website.

Video

How it works

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 we used, Intuiface Headless CMS.

The diagrams below display an implementation-independent view of the reference design. It applies to retail, museums, corporate presentations, and any other catalog browsing scenario.

Experience Structure - Example #1

This experience structure has been split across three scenes.

• The Attract scene grabs the attention of passers-by.
• The Home scene enables users to select a category to filter the list of items.
• The Main scene enables users to browse items and select each item to view details. This scene also includes the ability to filter items by sub-category and to search using various search criteria. This scene has two layers: one for item listings and the other for item details.

Experience Structure - Example #2

This experience structure has been split across two scenes; the difference here is in how the structure has been organised within the experience.

• The Attract scene grabs the attention of passers-by.
• The Home scene enables users to select and search for items. Different layers display the categories, item listings, and item details.

The advantage of the version is that we have a dedicated Group collection that is displayed on the Home scene, enabling users to filter the items based on various search criteria.

As you can see below, the differences between the retail and exhibit sample experiences are about the content and aesthetics. The guts are identical, all based on the "Catalog" reference design.

Headless CMS - Base data structure and content

All examples use the same Headless CMS base structure, divided into four collections, plus an additional "Text Settings" component to help manage the multi-language UI elements. Here are the four collections:

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

The following screenshots are from the base for the retail example. 

Categories

Sub-Categories

Products

Product Media Files

Text Settings

Analytics

All "Catalog" examples use the Data Tracking Interface Asset to log user actions for Analytics. In the screenshot below, you can see some of the questions that can be answered with this data.