Overview

The "Item Catalog" scene uses an Asset Flow collection to display a set of items in a store catalog. All information about these items - name, price, image, description - is not stored in this experience. Instead, they are stored in a Headless CMS base, which lives in the cloud. To add or change items in the catalog, you need to open and edit the base.

Why use Headless CMS? This way, item updates can be made without ever touching the experience in Composer. In fact, the people responsible for adding/removing/changing items in the catalog don't need to know you used Intuiface!

Add a new item to the catalog

Open the Headless CMS base used by your copy of "My First Project"

1. To the left of Composer, in the "Interface Assets" panel, right-click the entry "My First Project_duplicate" and select "Open base in H-CMS editor" in the pop-up menu.
   
   
   
2. The Headless CMS dashboard will open in your PC's default web browser. You will have to log into your Intuiface account if you haven't logged in already.

Add a new item into the catalog

1. Select the "Content" tab at the top of the base editor.
   
   
   
2. Select the "Items" collection on the left side of the editor.
   
   
   
3. On the right side of the editor, you will now see a list of all existing items in the catalog. Note how each item is comprised of five editable fields:
   Category | Title | Description | Price | Image
   (The "Item ID" field is automatically created by Headless CMS.)
   Depending on your preference, click the "Switch Orientation" button to turn the horizontal list of items into a vertical list.
   
   
   
4. In the upper right, click the "Add new item" button.
   
   
   
5. Fill out the form. Hovering your mouse over the info symbol () for each field will display advice and constraints about what can be entered. For example, the image can't be more than 5MB in size. (These constraints were set by the base creator. They can be changed.)
   For the "Category" field, enter one of the four categories already used in this base: Decor / Lighting / Sofas / Tables.
   For the other fields, you don't need to worry about matching the category. Just have fun. (If possible, choose a transparent image since it will look nicer in the experience.)
   
   
   
6. New items always default to Draft status, meaning they won't be visible to the experience but will be editable in the base. However, let's not wait to make it visible to the experience.
   Click the "Draft" field and select the "Publish now" option.
   
   You're published! Click anywhere on the screen to close the New Item editor.
   
   
7. Back in the Items table, you should see your new item at the end of the list.
   

View our new item in the running experience

1. Back in Composer, start Play Mode.
   
   
   
2. Select the "Item Catalog" scene, and choose the Category you used for the new item. Do you see your new item at the end of the collection? Click the "View Details" button for your item. See your description? Nice job!
   

Whenever you run an experience using one or more Headless CMS bases, local copies of those bases will ask the cloud-hosted master version of each base if there are changes. These changes are downloaded, which is why you saw your addition right away. You can also set your local base copy to check for updates at specified intervals.