Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Experience Fragment HTML structure

brijesht7477132
Level 2
Level 2

Hi All,

Our application is SPA. We are sharing content from AEM to Angular to display it in front end. We author our content using the Experience Fragment and when we are sharing our experience fragment HTML structural is added with additional div and classes. Attaching the HTML structure below. The first two div are the additional div. These additional div breaking the HTML structure in Angular end as the CSS and JS are written depending on the actual HTML structure which is not including these additional div. So is there a way to hide these additional div of Experience Fragment in Publish environment.

<div class="root responsivegrid">

   <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">

      <div class="richtext aem-GridColumn aem-GridColumn--default--12">

         <h3 class="detail-title">Shipping Info</h3>

         <p>Shipping Policies - PLEASE NOTE: For International Orders, all applicable customs clearance fees, duties, and taxes are the responsibility of the consignee. Please allow 3 to 5 business days to process your order. International shipping rates will be applied to overnight and 2nd day deliveries.</p>

         <p><a href="#" class="theme-dark  bold no-faux hover-underline"><span class="link-text">More Detailed Return Information</span> </a></p>

      </div>

   </div>

</div>

If any further information is needed, Please revert.

Thanks in Advance

6 Replies
edubey
Level 10
Level 10

Experience fragment carries its own style (element, css, js) as they are channel agnostic and use their own structure.

I am wondering, you may want to use content fragment instead.

brijesht7477132
Level 2
Level 2

Hi,

We need experience fragment only as we need to maintain structure which we cannot achieve using content fragment.

Gaurav-Behl
Community Advisor
Community Advisor

I'm not sure but it might be feasible because XFs are created as a cq:PageContent but you may want to understand the cost, effort & best practices around it.

Check Decoration Tag

You may also extend/include XF to your own custom component where you strip irrelevant DOM within your custom component code before including your custom component on the content page. This way author wouldn't use OOB XF but your custom component.

brijesht7477132
Level 2
Level 2

Hi Gaurav,

Thanks for the reply. We did try Decoration properties but that makes component non editable in author mode. So not usefully for us.

Gaurav-Behl
Community Advisor
Community Advisor

That's the reason I mentioned to introduce another proxy component on top of XF's output where you would strip the tags and tweak things around to get the work done. The XF would still be editable but not the proxy component or its output. You could write custom code to strip tags or even use sightly to get the required resource in no-decorated mode or some other workaround.

Obviously, this is not a clean solution, but the feature you require is not available OOB.