Thursday, May 30, 2019

Experience Fragments in AEM 6.4

** Still in Progress as package and videos are not attached but publishing it if just write up can help"

Hello Everyone,

A lot of people asked me to write upon experience fragments since so long but I couldn’t
write over it because before this I have not worked on it.
By writing something after reading from google doesn’t experience you the real time problems
you may face.So finally as I am using this feature in my projects and understand the
technical challenge also, So for your reference I am writing down this article on experience
fragments.

What are Experience Fragments?
An Experience Fragment is a set of content that grouped forms an experience that should
make sense on its own.
We will not do our hands on we-retail because that won’t really help you to create your
XF so let’s see how you can do initial set up for XF in your own projects.

Prerequisites:
  1. Page Component of Experience fragments
  2. Creating Dynamic Template for Experience fragments
How to create a Page Component for XF: Copy the we-retail page Component “weretail/components/structure/xfpage” in your own project  and change the clientlibs in “customfooterlibs.html” and “customheaderlibs.html”,and include your own clientlibs.It is important because if you create an XF for your project and use the components you want to see  the same look and feel of the actual website in XF pages also.

Dynamic Templates for Experience Fragments:

If you are already using dynamic templates,  you must be aware about it so create a new template-types with your xf resourcetype.

If in your project you are using static templates, still you need to create a dynamic template for XF. To check the  steps of creating a dynamic template you can check this link out from here or no need to understand the dynamic templates in so deep just take the package from here and update the name and path as per your needs.

Note: One important thing to highlight here is you need to add one more property in the “jcr:content” of “initial” node of your template-type manually which is

cq:xfVarientTypes
String
web

If you don’t add this property you won’t able to see your XF Variant in the
experience fragment component to select it over a page.


So my assumption till here is that you have created a template-types and page component.
It's time to create a template from template-types and allow the components in parsys by
adding policy and unlock the parsys.

If you are completely unaware of dynamic templates you can follow the video for more
clarity if the terminologies (policy, template-types) are not clear to you.

Allow the template for Experience Fragment: You need to add your template
manually in XF path(“/content/experience-fragments”) property allowedTemplates,
so that template can be visible to create XF.

Now it’s time to create Experience Fragments:
1. Go to AEM Start Console and go to “Experience Fragments”.
2. Create a folder for your project.
3. Under that click on Create-> Experience Fragment and choose the template for your project.
4. When you open the template you will be able to see a parsys in which you can drag and drop the components.Only those components can be dropped here which you configured in the policy of parsys at the time of template creation.
5.You can create different variation of the XF also.

Now your Experience Fragment is ready, you can use it in your page.Drag and drop the Component named “experience Fragment” from "General" group on a page and choose the variation which you want to use on a page.



If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

3 comments:

  1. We know experience fragments can be exported to a 3rd party app or web in HTML format by default. Is there a way we can export the experience content data in JSON format in 6.3 or 6.4?

    ReplyDelete
  2. can you add the video for this article

    ReplyDelete
  3. Hi, can you please do a video on ecommerce. Creating a product, adding it to a page, adding it to the cart and then the checkout. These would be really helpful as there are a lot of commerce integration projects that are being carried out.

    Thanks

    ReplyDelete