Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Experience Fragment as HTML by stripping off tags

Avatar

Level 2

Thanks in Advance.  Now I've a problem to solve. 

 

We have to export the Experience Fragment as HTML. I know the the OOB functionality is there, using .plain selector. I need to satisfy certain conditions here. 

 

1. I don't want the enter xf page need to export(exclude <html>,<head> etc). Only the div. I know we can use either bdoy.html for that purpose. But body.html is not giving externalized path, means the css and js are calling via relative path, Not full path.

2. I need to have the fullpath for all resources like css,js,image etc.

 

Do we have any solution to achieve this?

 
 
 
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You can try this to import experience fragment without the <body> and HTML tags, 
<sly data-sly-resource="${@path='/content/experience-fragments/my-site/fragment-a/master, selectors='content'}"></sly>

 

For the CSS and JavaScript, in the XF editable template, page policies where you have configured the client libraries to be used, you should take those and again, refer them in the editable template page where your XF is being served. 

View solution in original post

3 Replies

Avatar

Community Advisor

you can use content selector

example
xfpath.content.html

Css and JS you have to create and expose as clientlibs. make sure you set CORS so that thirst party can use it.



Arun Patidar

Avatar

Level 2

I tried .content as well. But see adding the portion of source code below.

 

  <link rel="stylesheet" href="/libs/cq/experience-fragments/components/xfpage/content.min.css" type="text/css">    

 

It is not fully qualified path. In the consumer-side if this code include, may be virtually it won't load the page properly. 

 

I need path like "https:localhost:4502/content/----/---/footer.js

Avatar

Correct answer by
Community Advisor

You can try this to import experience fragment without the <body> and HTML tags, 
<sly data-sly-resource="${@path='/content/experience-fragments/my-site/fragment-a/master, selectors='content'}"></sly>

 

For the CSS and JavaScript, in the XF editable template, page policies where you have configured the client libraries to be used, you should take those and again, refer them in the editable template page where your XF is being served.