Highlighted

Experience Fragment HTML structure

Avatar

Avatar

brijesht7477132

Avatar

brijesht7477132

brijesht7477132

06-01-2019

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

Replies

Highlighted

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

06-01-2019

you can go for Sling Output Rewriting Pipelines

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

Highlighted

Avatar

Avatar

edubey

Total Posts

1.5K

Likes

264

Correct Answer

392

Avatar

edubey

Total Posts

1.5K

Likes

264

Correct Answer

392
edubey

06-01-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.

Highlighted

Avatar

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281
Gaurav-Behl
MVP

06-01-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.

Highlighted

Avatar

Avatar

brijesht7477132

Avatar

brijesht7477132

brijesht7477132

08-01-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.

Highlighted

Avatar

Avatar

brijesht7477132

Avatar

brijesht7477132

brijesht7477132

08-01-2019

Hi,

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

Highlighted

Avatar

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281
Gaurav-Behl
MVP

08-01-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.