Experience fragment template and component

Use case

Use OOTB experience fragment component in aem sites pages.

Approach

Overlay experience fragment component from cq/experience-fragments/components/xfpage to /apps/test-project/components/structure/xfpage.

Create a web variation Template for experience fragment for the project.

The xf template needs to include the clientlibs for the project else UI for components will be broken.

Implementation

<project>. = test-project

Creating Experience fragment Page component

Create empty page component /apps/<project>/components/structure/xfpage, with superresourcetype = cq/experience-fragments/components/xfpage

Creating Experience fragment Template

On AEM start screen, http://localhost:4504/aem/start.html, click experience fragment and then click create, Following templates are available ootb

We need to implement a template similar to we retial web variation.

Create template-type which is used for creating the dynamic template

1.  Copy /conf/we-retail/settings/wcm/template-types/empty-experience-fragment inside your project template-types.

2.  Update /conf/test-project/settings/wcm/template-types/empty-experience-fragment/initial/jcr:content.

Change the
sling:resourceType = test-project/components/structure/xfpage

3.  Update resourcetype of /conf/test-project/settings/wcm/template-types/empty-experience-fragment/structure/jcr:content to master page component(test-project/components/structure/master-page)

4.  Replace breakpoints of experience template with those of master template. /conf/test-project/settings/wcm/template-types/empty-experience-fragment/structure/jcr:content/cq:responsive/breakpoints

Create touch ui XF dynamic template

Repeat the same steps by copying /conf/we-retail/settings/wcm/templates/experience-fragment-web-variation  to /conf/test-project/settings/wcm/templates/experience-fragment-web-variation

Allow components in the XF template responsive grid

Allow all or specific components created in the project in the template, to be available for selection in the experience fragment page responsive grid.

Update /conf/test-project/settings/wcm/template-types/empty-experience-fragment/policies/jcr:content/root to add policy of what component will be allowed in the responsive grid of the experience fragement.

Add Component Clientlibs to the XF template

Components clientlibs need to be added in page policy.

Update /conf/test-project/settings/wcm/template-types/empty-experience-fragment/policies/jcr:content to add page policy of master template = test-project/components/structure/master-page/base-policy

Allow the experience fragment template in /content

To make xf template available in the touch ui for creating experience fragments.

Add experience fragment template in the allowed templates(cq:allowedTemplates = /conf/test-project/settings/wcm/templates/experience-fragment-web-variation) on the /content/experience-fragments/<project>.

Now goto AEM start screen, http://localhost:4504/aem/start.html, click experience fragment then select the test-project folder and click create, XF template is now available for selection

Creating the experience fragment

1.  Goto http://localhost:4502/aem/experience-fragments.html/content/experience-fragments

Create a sling:OrderedFolder below it by the name of the project(/content/experience-fragments/<project>).

2.  Goto (/content/experience-fragments/<project> and click create select the XF template to create the XF.

3.  Drag and drop components on the XF page.

Allow experience fragment component to be used in project templates

Once the experience fragment is created you can use it in a page.
But first you need to allow the experience fragment component the master template responsive grid policy.

Using XF on the page

Now goto a page created from master template and drop the experience frg component onto it and configure the path of the xperience frg.

Continue Reading: Localised Experience Fragments AEM