Selector based page content | Community
Skip to main content
Siva_Sogalapalli
Community Advisor
Siva_SogalapalliCommunity Advisor
Community Advisor
July 19, 2019
Solved

Selector based page content

  • July 19, 2019
  • 6 replies
  • 14853 views

Hi Team,

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?

Please provide your inputs on 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 rampai

Hi sivaprasadreddys​,

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.

6 replies

rampai
Community Advisor
rampaiCommunity Advisor
Community Advisor
July 19, 2019

You can probably write a sling model to check if 'headless' exists in selector.

And based on the boolean include header/footer in the basepage.

Model Class:

@Model(adaptables = SlingHttpServletRequest.class)

public class SelectorOperations {

@Inject

SlingHttpServletRequest request;

private boolean headless = false;

@PostConstruct

public void postConstruct() {

if (request != null) {

List<String> selectors = Arrays.asList(request.getRequestPathInfo().getSelectors());

headless = selectors.contains("headless");

}

}

public boolean isHeadless() {

return headless;

}

}

HTL:

<div data-sly-use.selectorOperations="com.aem.SelectorOperations"> <div data-sly-test="!selectorOperations.headless" >Include header and footer logic here </div> </div>

Code sample found from: Get selector value from sightly html page [Bit Urgent : Any thoughts on this will be helpful]

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
July 19, 2019

Hi,

In your page component create a file headless.html and don't include header and footer components in it

e.g. you can put whatever you want in selector  file

page.html

<!doctype html>

<html lang="en">

    <head>

        <sly data-sly-include="partials/head.html" data-sly-unwrap/>

        <sly data-sly-include="partials/headlibs.html" data-sly-unwrap/>

    </head>

    <body class="page ${currentPage.template.name}">

        <sly data-sly-include="partials/main.html" data-sly-unwrap/>

        <sly data-sly-include="partials/footlibs.html" data-sly-unwrap/>

    </body>

</html>

headless.html

<!doctype html>

<html lang="en">

    <head>

        <sly data-sly-include="partials/headlibs.html" data-sly-unwrap/>

    </head>

    <body class="page ${currentPage.template.name}">

        <sly data-sly-include="partials/main.html" data-sly-unwrap/>

    </body>

</html>

or

    <body class="page ${currentPage.template.name}">

        <sly data-sly-include="partials/main.html" data-sly-unwrap/>

    </body>

Arun Patidar
    Siva_Sogalapalli
    Community Advisor
    Siva_SogalapalliCommunity AdvisorAuthor
    Community Advisor
    July 19, 2019

    Thanks Ram for the quick reply.

    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

    A
    Anonymous
    July 19, 2019

    HTL is a front end (sure you hvae basic programming commands like looping, etc), BUT you would need to use Java as part of an HTL/Sling model to complete this.

    rampai
    Community Advisor
    rampaiCommunity AdvisorAccepted solution
    Community Advisor
    July 23, 2019

    Hi sivaprasadreddys​,

    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.

    Siva_Sogalapalli
    Community Advisor
    Siva_SogalapalliCommunity AdvisorAuthor
    Community Advisor
    July 23, 2019

    Thanks every for your inputs. I will try and keep you update on this.

    Terms & ConditionsAccessibility statement

    Loading footer...