Catalogs in AEM

I am working on a project where I have to implement e-commerce using native e-commerce API provided by AEM. Here I got a chance to work with a very interesting OOTB functionality of AEM i.e. Catalogs. In this post, I will share my experience with Catalogs in AEM & how to use them. First I will share the use-case for that I used Catalogs.

Use-case
There was ten thousand product records in AEM & for all of these product records, I have to create product pages. The common thing is that most of them are sharing same design or in terms of AEM, sharing the same template. So it’s not right to create ten thousand pages manually from siteadmin & for the same, I was looking for an OOTB functionality that can create these pages automatically. Then I come to know the concept of Catalogs in AEM.

Key points about Catalogs
1). Catalogs are used to automate the web pages creation process.
2). Catalogs are generally a hierarchy of pages created using catalog Blueprint Template.
3). Catalogs are completely tag driven i.e. you must have to specify a tag for each product so that catalog hierarchy can identify product node.
4). All pages created using catalogs are live copy of your catalog page hierarchy.

How to work with AEM Catalogs?
FIRST REQUIREMENT – (Tag Hierarchy)
For this POC first, create appropriate tags defining the category of each product. In my case, I have created a tag hierarchy under /etc/tags as shown below –

SECOND REQUIREMENT – (Product Data or Records)
For this catalog POC, you must have product data, & I am using geometrixx-outdoors product data as dummy data for my POC for doing this copy & paste the geometrixx-outdoors data under /etc/commerce/products folder

Rename this product data as a blog as shown in fig. –
Now update your dummy product data tags using crxde. For doing this –

Go to->CRXDE ->etc/commerce/products/blog/eq/eqsm/*

Now Update cq:Tags property with blog:product/shirt & remove all other tags from each product node.

as shown in fig. –

Your dummy product data is ready for this POC.

THIRD REQUIREMENT (Create Page Hierarchy that works as a template page for catalog pages.)
Now decide what kind of structure you want that will be auto-generated by catalog. In my case, I want to auto-generate a given structure using catalogs.

FOURTH REQUIREMENT (Create Page Hierarchy that works as template page for catalog)
For the same, I have created pages using different templates for each level under /content/catalogs/blog/template Pages folder. Here you generate pages using your own templates & these pages will work as template pages for catalog hierarchy.

Now we have created all gradients for creating this catalog hierarchy & From this point catalog creation will take place.

FIFTH REQUIREMENT (Create Catalog Hierarchy)
First create a “blog” page under a folder named “blogCatalog” using the “Section Blueprint” template. Now open this newly created page. you will see a screen –

Open this page in classic UI.

Here you will three buttons on the edit-config bar.
Edit Blueprint
this tab has a main configuration part, I will discuss it in detail later.
Rollout Changes
It is used to initiate this catalog for the dynamic page creation process.
Create Catalog
is used to assign the path under which AEM will create pages for you.

Now click on the Edit Blueprint button you will a dialog as displayed in the image.

Here are three main templates paths.
Catalog Master page
It is the page path for the master page i.e. top page of your automatically created page hierarchy will be created using this page template. Here you add the “home Page Template” page path that we create in the last step.

Section master page
This the path for the page, this page is used to create all of its sub-pages till you got the product page. Here you add the “Range Page Template” page path it is also created in the last step.
Product master page
This is the path of the page, by using this page path AEM creates all the product pages. Here you add the “Product page template” page path it is also created in the last step.

Note –
All the properties set here are inherited in all of its catalog sub-pages till the time you don’t override these settings.

Now click on Create Catalog… the button you will see a screen as shown in fig –
Here you select the path where you want to create these dynamic pages. In my case values are –

Create Catalog below is /content/havells
Title in English
Name is en

Note: AT your siteadmin you must have /content/havells structure if it is not present then first create this hierarchy.

Most of the properties are well described by there name. So I will not discuss all of them. there is another tab called Product.

Base Path
Here you have to set the path of the product data location i.e. /etc/commerce/products/blog

Note –
you can set this property here or later in the hierarchy of these catalog pages.
Now create another page under this catalog page named as Range & open that page dialog –

Here you will see two template path options –
If you set the value in these page path then it will override the parent page configuration. i.e.

Section Master Page
This page path is used to create the current page & it overrides the value of parent “Section master page” template property value & if you left it blank then this property value will be parent page “Section master page” value.
Now in sub-pages of this page, this value will be available as Section master page property value.

Just change this property if you want to override the parent page “Section Master Page” property. Now create the hierarchy whatever you want & when you reach the page under which you want to auto-generate product pages, in my case it is product listing page under which I want to create product detail pages, open the dialog & fill the properties “Section master page” of this page and also fill the “product master page” property with the product page template page path, your screen will look like this –


Now when you click the OK button you will see all the product images will be displayed on your catalog page listing page. Till now everything is good, Now open Rollout Changes…

Just click on another checkbox i.e. “Remove local edits during rollout.” & click on the Rollout button. Go to your siteadmin and refresh it, you will see all the pages has been generated as you want to do.

“Remove local edits during rollout.” This checkbox provides the facility that if you make some changes on this dynamically generated page & if you don’t want to remove those changes then just leave it unchecked so that your changes will not be removed & new pages will be created dynamically.

If you have any kind of query related to the catalog you can ask me. Hope this post is helpful to you.