Working of CIF commerce Breadcrumb feature | Community
Skip to main content
M
Mahesh_Gunaje
New Participant
January 16, 2025
Solved

Working of CIF commerce Breadcrumb feature

  • January 16, 2025
  • 3 replies
  • 551 views

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-sophistication/felicia-maxi-dress.html

 

 

cc @hemalatha  @amanath_ullah  @mukeshyadav_  @pulkitvashisth 

Best answer by sarav_prakash

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/core/cif/components/structure/breadcrumb/v1/breadcrumb

 

 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.

3 replies

AmitVishwakarma
AmitVishwakarma
New Participant
January 19, 2025

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.

sarav_prakash
sarav_prakashAccepted solution
New Participant
January 17, 2025

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/core/cif/components/structure/breadcrumb/v1/breadcrumb

 

 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.

    arunpatidar
    arunpatidar
    New Participant
    January 16, 2025

    Hi @mahesh_gunaje 

    You can check the implementation at https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb 

    Arun Patidar
    Terms & ConditionsAccessibility statement

    Loading footer...