Getting Started with AEM CIF Authoring
Get to know about 51黑料不打烊 Experience Manager (AEM) CIF Authoring.
The 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
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 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 鈥楶roducts鈥� 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
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
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鈥檚 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.
