Selector based request is not working for the XF included in template structure

[Abhilashreddy]

I've a base page from where header/footer sections are created as experience fragments and embedded in the structure of the template.

Working on a new requirement where I need to render the page content based on selectors in the page url.

Eg: If the url is http://localhost:4502/content/lnccab/us/en/home.html, it loads entire content.

If url is http://localhost:4502/content/lnccab/us/en/home.headless --> then it should not load header/footer components.

I have tried create selector based scripts for header/footer components (Part of Experience fragments) with empty content to deliver this requirement, However these scripts are not being picked up while requesting the page with selector and page is rendering with the default content.

Also noticed that selector is being considered while rendering the XF from the experience fragment console. Fragment is rendering with no content when calling the URL with headless selector.

E.g. : http://localhost:4502/content/experience-fragments/lnccab/us/en/header/master.headless.html?wcmmode=...

[Anish-Sinha]

Hi @Abhilashreddy ,

You can write a script to read the selector from the URL, there are multiple ways to do it. For ex - 

var selector = window.location.pathname.split('.')[1];

There are two ways to implement this. If you are statically including the header and footer in the base page html, you can put a data-sly-test condition stating render the header and footer component only if selector is present. in this case you can return the value from a sling model.

2nd if you have dragged and dropped the header and footer component in the template, you can use the above script to check the condition and if appropriate selector is present, you can hide the complete html snippet that renders the header and footer.

[Abhilashreddy]

@Anish-Sinha  Thanks for the response. I would consider 2nd option since our header footer are XFs and they are part of template structure.  I was able to render empty content for the banner component  after inclusion of empty headless.html under banner component folder. I am trying to achieve the same by including empty scripts for header and footer components since those two are the components used in header and footer XFs. For some reason this approach is not working when I called page with headless selector  XFs are rendering with default script eve. I would like to understand if we need to call selectors differently since the XF is part of template structure.

As mentioned in the topic this is working when I try to render XF from Fragments console.

E.g. : http://localhost:4502/content/experience-fragments/lnccab/us/en/header/master.headless.html?wcmmode=...

We are still trying to achieve this without scripting by including selector based scripts for all the components being used in header&footer XF's . 

[arunpatidar]

Hi,

Can you check the resource type of xf page type.

Does that included selector script?

[Abhilashreddy]

@arunpatidar  Resource type of XF page is "core/wcm/components/experiencefragment/v1/experiencefragment" and we have added our header and footer components in respective XF. Can you please elaborate on your statement about inclusion of resource type in selector script ?

[arunpatidar]

Hi,

I wanted to know that how do you use the headless selector?

do you have a script headless.html at xf proxy component or a default servlet which as triggered when you use selector.