Load custom clientlibrary on top of the page which should be configurable

[AbhishekDa1]

We have few custom clientlibraries which are being loaded at page level through page component. For eg. 

<sly data-sly-call="${customClientlib.css @ categories='initial.chunk-category', mode='css', loading ='preload'}"/> 

<sly data-sly-call="${clientlib.css @ categories='initial.chunk-category'}"/>

Apart from these, there are other clientlibraries which are added at template level through page policy. These are loaded after "initial.chunk-category" gets loaded on the page.

We have a requirement, where a category can be loaded before "initial.chunk-category" if needed, and that should configurable, either through page policy, page properties or any other way?

Is there a way through which this can be achieved?

[konstantyn_diachenko]

Hi @AbhishekDa1 ,

If your page component inherits Core Page V3, then clientlibs inclusion will be happened in /libs/core/wcm/components/page/v3/page/head.html. 

There are 2 ways:

1) You can override head.html in your page component by copying the content of the head.html from page v3 and adding clientlibs custom clientlibs inclusion there. At the end of template you can include your custom file: <sly data-sly-include="customheaderlibs-after-default.html"></sly> 

2) You can override headlibs.html and add inclusion of your custom clientlibs at the end of the template. This file is responsible for adding clientlis configured in the policies.

Best regards,

Kostiantyn Diachenko. 

[SantoshSai · Accepted solution]

Hi @AbhishekDa1,

In my opinion, if the requirement is to conditionally load a clientlib before initial.chunk-category, and you want that to be configurable, we might want to look at a slightly more flexible solution than just overriding head.html.

I believe the approach of overriding /head.html (from Core Page v3) definitely works and gives full control - especially if we use something like a custom include (as you suggested) toward the end. But if we want to make it configurable, maybe via page properties or policies, here's what I would suggest exploring:

1. Use a custom page property (e.g., customHeaderClientlib) to specify any high-priority clientlib categories.

Then in your overridden head.html (or a new include like custom-headerlibs.html), you could do something like:

This would allow authors to define which category should load before initial.chunk-category - giving the needed flexibility without hardcoding anything.

<sly data-sly-test.customClientlib="${currentPage.properties.customHeaderClientlib}">
    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
    <sly data-sly-call="${clientlib.css @ categories=customClientlib}"/>
</sly>

2. Alternatively, if you prefer policy-based config, you could expose a field in the template policy and fetch that via the currentStyle object.

<sly data-sly-test.customClientlib="${currentStyle.customHeaderClientlib}">
    <sly data-sly-call="${clientlib.css @ categories=customClientlib}"/>
</sly>

Hope that helps!

Regards,
Santosh

[AbhishekDa1]

Thanks for the solution, this is exactly what I wanted.