Experience Fragment HTML structure | Community
Skip to main content
B
brijesht7477132
Level 2
January 6, 2019

Experience Fragment HTML structure

  • January 6, 2019
  • 3 replies
  • 8923 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
January 6, 2019

you can go for Sling Output Rewriting Pipelines

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

Arun Patidar
edubey
edubey
Level 10
January 6, 2019

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.

B
brijesht7477132Author
Level 2
January 8, 2019

Hi,

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

Gaurav-Behl
Gaurav-Behl
Level 10
January 6, 2019

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.

B
brijesht7477132Author
Level 2
January 8, 2019

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
Gaurav-Behl
Level 10
January 8, 2019

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.

Terms & ConditionsAccessibility statement

Loading footer...