When the connection to a commercetools system and a concrete shop for a content site are configured as described in Chapter 3, Connecting to a commercetools System the Studio Library shows the commerce catalog to browse product categories and products in the commerce catalog and to search for products and product variants. After the editor has selected a preferred site with a valid store configuration the catalog view will be enabled and the catalog will be shown in the Library:

Figure 4.1. Library with catalog in the tree view

In some catalogs it is possible to put a category on multiple places within the catalog tree. But the Commerce Hub ensures that a category can only have one home (a unique parent category). All additional occurrences of a category are shown as a link in the tree. If you click on such a link node you will automatically end up at the place in the tree where the category is actually at home.

Figure 4.2. Library tree with multiple occurrences of the same category

These catalog items can be accessed and assigned to various places within your content. For example, an eCommerce Product Teaser content item can link to a product or product variant from the catalog. The product link field (in eCommerce Product Teaser content item) can be filled by drag and drop from the library in catalog mode.

Linking a content (like the eCommerce Product Teaser) to a catalog item leads to a link that is stored in the CMS content item and references the external element. Apart from the external reference (in the case of the commerce system it is typically a persistent identifier like the product code for products) no further data will be imported (importless integration).

While browsing through the catalog tree you can also open a preview of a category or a product from the library. Simply double-click on a product in the product list or use the context menu on a product or a category and choose the entry Open in Tab from the context menu as shown in the pictures below.

Figure 4.3. Open Product in tab

Figure 4.4. Product in tab with JSON preview

Note

For Information on how to enable the JSON preview have a look at Section 9.32, “Multiple Previews Configuration” in Studio Developer Manual.

Figure 4.5. Open Category in tab

In addition to the ability to browse through the commerce catalog in an explorer-like view it is also possible to search for products and variants from catalog. As for the content search if you are in the catalog mode and you type a search keyword into the search field and press Enter, the search in the commerce system will be triggered and a search result displayed.