AEM Experience Fragment

AEM Experience Fragment is a set or group of components which can be use on pages.

Components like header component can be used as reusable component on all the pages using experience fragment.

Features of experience fragment:

  1. We can re-use set or group of same components on other multiple pages using experience fragment. 
  2. Experience fragment can have multiple variations for different site and locale.
  3. Using live copy experience fragments can be sync

Below are the steps to create, author and consume experience fragment on other pages:

  1. Create an experience fragment page using experience fragment template.
  2. Author required components on created experience fragment page.
  3. Drag and drop created experience fragment page on other pages to consume the same.

Below are the steps to create experience fragment: 

1. Create experience fragment page component using below sling resourceType
cq/experience-fragments/components/xfpage

2. Use below template type create experience fragment template 
/conf/practice/settings/wcm/template-types/xf

3. Hit below URL, click on tools and than select Experience Fragments option.
http://localhost:4502/sites.html/content

4. Click on create button and select Experience Fragment option to create an experience fragment.

5. Provide Title and click on Create button to create an experience fragment.

6. Open created experience fragment. 

Drag and drop required component on created experience fragment page using Drags components here option.

7. Create Test content page. Drag and drop experience fragment component on page.

8. Author experience fragment variation created and authored at step number 6.

9. Below is the final output after authoring experience fragment on page.

Create Experience Fragment Variation

Select experience fragment created on above steps and chose variation option as shown below highlighted red in color.

Imran Khan

Specialist Master (Architect) with a passion for cutting-edge technologies like AEM (Adobe Experience Manager) and a proven track record of delivering high-quality software solutions.

  • Languages: Java, Python
  • Frameworks: J2EE, Spring, Struts 2.0, Hibernate
  • Web Technologies: React, HTML, CSS
  • Analytics: Adobe Analytics
  • Tools & Technologies: IntelliJ, JIRA

🌐 LinkedIn

📝 Blogs

📧 Imran Khan