Experience Fragment HTML structure

[brijesht7477132]

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

[arunpatidar]

you can go for Sling Output Rewriting Pipelines

Apache Sling :: Output Rewriting Pipelines (org.apache.sling.rewriter)

[edubey]

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]

Hi,

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

[Gaurav-Behl]

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]

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]

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.