Experience Fragment as HTML by stripping off tags | Community
Skip to main content
L
LinuJo
Level 2
February 7, 2023
Solved

Experience Fragment as HTML by stripping off tags

  • February 7, 2023
  • 2 replies
  • 1232 views

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?

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

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. 

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
February 7, 2023

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
    L
    LinuJoAuthor
    Level 2
    February 7, 2023

    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

      BrianKasingli
      Community Advisor and Adobe Champion
      BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      February 8, 2023

      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. 

        Terms & ConditionsAccessibility statement

        Loading footer...