Getting Started with AEM CIF Authoring getting-started
Get to know about Adobe Experience Manager (AEM) CIF Authoring.
The Story So Far story-so-far
In the previous document of this AEM Content and Commerce journey, Learn about AEM Content and Commerce, you learned the basic theory and concepts of headless CMS and AEM Content and Commerce.
This article builds on those fundamentals.
Objective objective
This document helps you understand how to use CIF for Content and Commerce specific authoring. After reading, you should:
- Understand the concepts of CIF authoring using Page Editor in AEM
- How to access product catalog data in AEM using product and category pickers
- How to access content and commerce data using the product cockpit and AEM Omnisearch
CIF Authoring in AEM Page Editor cif-authoring
CIF extends the Page Editor in AEM with capabilities to access the real-time product data without leaving the context:
Open the side panel and select ‘Products’ from the drop-down list.
You can browse the product catalog or use the full-text search field to find products.
Products can be dropped on components that support product drops (example product teaser, product carousel) on directly on the page which automatically creates a product teaser component.
Product and Category Pickers pickers
If product and category data is required in commerce components or AEM back-office dialogs, AEM authors can use pickers which are UI elements to comfortably search and select product catalog data.
Product Picker
Clicking the folder icon opens the picker modal UI (for example, product teaser)
Products can be found either by browsing through the catalog structure on the left or search. Full-text search respects the selected category and limits the search results to this category.
Products with variations are marked with a folder icon that can be clicked to show all variations.
Category Picker
Works like a product picker. Clicking the folder icon opens the picker modal UI (for example, category carousel)
Browse the catalog structure on the left and select the category.
Product Cockpit cockpit
The product cockpit is a central place to quickly access the product catalog with all its enriched content. You learn in one of the next modules how to enrich product data with content. For now, let’s focus on accessing product data.
From the main menu, click commerce to see a list of all attached product catalogs.
This shows a list of all connected product catalogs.
The product catalog shows per default all first-level categories with all products. Clicking a category opens that category with all related products and subcategories, including their products.
You can open the product properties by clicking the property icon. The icon appears by hovering over a product tile.
All the product properties are read-only because the data gets loaded in real time from the connected backend. Changing product properties must be done in the backend system which is the system of record. The tab Variants only appear if the product has variations. Clicking the tab displays all variations with its attributes.
The remaining tabs show all AEM content that is associated with the product. These tabs are discussed in one of the next modules.
AEM Omnisearch omnisearch
Using Omnisearch is an easy way to find AEM content using full-text search. CIF extends Omnisearch with full-text search of product catalogs with its associated AEM content.
Omnisearch runs a full-text search in the commerce backend to find all related products. The result is listed under View All Products. Omnisearch also searches AEM for content that is associated to the searched product. The results are listed under the respective AEM categories. In this example, one Content Fragment is related to the product.
What’s Next what-is-next
Now that you have completed this part of the journey you should:
- Understand the concepts of CIF authoring using the Page Editor
- How to access product catalog in AEM using product & category pickers
- How to access content and commerce data using the product cockpit and AEM Omnisearch
Build on this knowledge and continue your journey by next reviewing the document Manage Product Catalog Pages and Templates, where you learn how to build and customize your first product catalog experience.
Additional Resources additional-resources
While it is recommended that you move on to the next part of the journey–Manage Product Catalog Pages and Templates–the following are some optional resources that do a deeper dive on some concepts mentioned here. However, these optional resources are not required to continue on the journey.