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

Working of CIF commerce Breadcrumb feature

  • January 16, 2025
  • 3 replies
  • 554 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 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
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

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
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
sarav_prakash
Community Advisor
sarav_prakashCommunity AdvisorAccepted solution
Community Advisor
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.

    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    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.

    Terms & ConditionsAccessibility statement

    Loading footer...