Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!
SOLVED

Working of CIF commerce Breadcrumb feature

Avatar

Level 9

Can Someone tell me, how CIF commerce breadcrumb feature works?

Location: /apps/core/cif/components/structure/breadcrumb/v1/breadcrumb

But, this refers to: core/wcm/components/breadcrumb/v2/breadcrumb

Sample Venia application path: http://localhost:4502/content/venia/us/en/products/product-page.html/shop-the-look/timeless-sophisti...

 

Mahesh_Gunaje_0-1737020706084.png

 

cc @Hemalatha  @AMANATH_ULLAH  @MukeshYadav_  @pulkitvashisth 

1 Accepted Solution

Avatar

Correct answer by
Level 7

The CIF breadcrumb component is built on top of venia components and storefront peregrine talons and extends core breadcrumb component. Its documentation is here

https://github.com/adobe/aem-core-cif-components/tree/master/ui.apps/src/main/content/jcr_root/apps/...

 

 On load of PDP or PLP, the CIF Core Compnents caches the graphql response and builds breadcrumb. Its implementation is found in BreadcrumbImpl. It calls BreadcrumbRetriever, runs graphql query, and overrides getItems(). When wcm core breadcrumb component is rendered and getItems() invoked, the result of graphql is rendered on PDP or PLP.

View solution in original post

3 Replies

Avatar

Community Advisor

Avatar

Correct answer by
Level 7

The CIF breadcrumb component is built on top of venia components and storefront peregrine talons and extends core breadcrumb component. Its documentation is here

https://github.com/adobe/aem-core-cif-components/tree/master/ui.apps/src/main/content/jcr_root/apps/...

 

 On load of PDP or PLP, the CIF Core Compnents caches the graphql response and builds breadcrumb. Its implementation is found in BreadcrumbImpl. It calls BreadcrumbRetriever, runs graphql query, and overrides getItems(). When wcm core breadcrumb component is rendered and getItems() invoked, the result of graphql is rendered on PDP or PLP.

Avatar

Level 6

The CIF Commerce breadcrumb in AEM dynamically generates breadcrumb navigation for eCommerce sites, using the breadcrumb component (/apps/core/cif/components/structure/breadcrumb/v1/breadcrumb). It pulls data from the page hierarchy and product structure, such as categories and products, to create a trail like Home > Products > Product Page > Category. In the Venia example, it builds breadcrumbs based on the URL structure.