We've a base page from where header/footer components are inherited. We have a requirement where we need to render the page content based on selectors in the page url.
Eg: If the url is localhost:4502/content/poc/product.html, it loads entire content.
If url is localhost:4502/content/poc/product.headless.html --> then it should not load header/footer components.What is the best approach to get header/footer less page content? Do we have any OOTB feature in AEM 6.4?
As mentioned by Arun Patidar above, you can add additional scripts in your basepage component or the one that inherits it and handle the includes in those files. e.g. you can have headless.html for omitting header/footer, nostyles.html for omitting css/js and basepage.html for a generic one.
So when content/somepage.headless.html is called the script headless.html under basepage takes priority and anything written under it will override the generic basepage.html
Instead of naming the file product.headless.html inside the components just create a file headless.html in the basepage component and sling will handle the output accordingly.
Instead of writing sling models I'm trying to create component sightly htmls like products.html , products.headless.html, trying to see if that works but unfortunately It didn't work.
The reason why i'm checking without slingmodel is , removing header/footer is one use case. we have multiple use cases where we need to render page output based on selectors like no styles, mobilecontent, desktopcontent etc...
Eg: to remove script/css and just display content we use selector .nostyles.html