Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Load site specific client libs using editable template.

Avatar

Level 8

I have set of common components and their clientlibs. They are to be re-used in multiple sub-sites which will have their own specific components and libraries.

How can I load site specific clientlibs using editable template?

Thank you.

Kamal.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Kamal_Kishor,

I also had a similar requirement like this where a specific editable template requires a specific set of JavaScript and CSS. For example, we had a client library that should only be enabled for our store location pages, and also another client library that should be enabled for our store book pages. You can visualise that all store location pages use a single editable template, while the store book pages use a separate single editable template.

If you utilise the WCM Core Components V2 Page, as your websites base page during the creation of the editable templates, you can utilise the editable template's Page Policies to set specific client libraries for different templates; it's that simple. You can define specific client libraries directly from the Touch UI editable template page editor.

Here are steps for how you can include a custom client library for your editable template (let's use we.retail example project):

From the AEM author environment.

  1. Navigate to editable templates console, we.retail project - http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/we-retail
  2. Choose a target editable template, and navigate to the Touch UI editor for that given editable template - http://localhost:4502/editor.html/conf/we-retail/settings/wcm/templates/content-page/structure.html
  3. From the Touch UI editor, click on the drop-down button from the left top main nav, and select on Page Policy; you are presented with the Page Policies configuration page.
    screenshot illustrated below:
    Screenshot 2020-07-02 at 23.36.59.png
  4. Next, add your client library category directly into the client-side libraries multi-field, and save.
    screenshot illustrated below:
    Screenshot 2020-07-02 at 23.33.39.png
  5. Done.
  6. Going live: Publish the editable template with your changes.
  7. Going live: Flush the cache, if your website is sitting behind a dispatcher.
  8. Going live: Flush the CDN cache, if your website is sitting behind a CDN.
  9. Going live: Done.

If you are a visual learner, check out Adobe's video documentation - https://docs.adobe.com/content/help/en/experience-manager-learn/sites/page-authoring/template-editor...  

View solution in original post

4 Replies

Avatar

Level 8

It is good to have separate client lib for all your common components and load those at editable templates page policy.

First load common client libs to support all common components, then call site-specific client libs. check the below screenshot. 

The <brand-name>.base is for all sites

The <site-name>.base is only for specific site.

rajas66269496_1-1593709901545.png

To get more information on this you can refer to Adobe best practices docs.

https://docs.adobe.com/content/help/en/experience-manager-learn/getting-started-wknd-tutorial-develo...

 

 

Avatar

Community Advisor

Hi @Kamal_Kishor , 

Like @raj_mandalapu suggested you can make commonly loaded component as single group and you can load it as a part of page rendering component itself if you need to avoid the config on template level. 

Each site specific clientlib you can add it in template config

Avatar

Correct answer by
Community Advisor

@Kamal_Kishor,

I also had a similar requirement like this where a specific editable template requires a specific set of JavaScript and CSS. For example, we had a client library that should only be enabled for our store location pages, and also another client library that should be enabled for our store book pages. You can visualise that all store location pages use a single editable template, while the store book pages use a separate single editable template.

If you utilise the WCM Core Components V2 Page, as your websites base page during the creation of the editable templates, you can utilise the editable template's Page Policies to set specific client libraries for different templates; it's that simple. You can define specific client libraries directly from the Touch UI editable template page editor.

Here are steps for how you can include a custom client library for your editable template (let's use we.retail example project):

From the AEM author environment.

  1. Navigate to editable templates console, we.retail project - http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/we-retail
  2. Choose a target editable template, and navigate to the Touch UI editor for that given editable template - http://localhost:4502/editor.html/conf/we-retail/settings/wcm/templates/content-page/structure.html
  3. From the Touch UI editor, click on the drop-down button from the left top main nav, and select on Page Policy; you are presented with the Page Policies configuration page.
    screenshot illustrated below:
    Screenshot 2020-07-02 at 23.36.59.png
  4. Next, add your client library category directly into the client-side libraries multi-field, and save.
    screenshot illustrated below:
    Screenshot 2020-07-02 at 23.33.39.png
  5. Done.
  6. Going live: Publish the editable template with your changes.
  7. Going live: Flush the cache, if your website is sitting behind a dispatcher.
  8. Going live: Flush the CDN cache, if your website is sitting behind a CDN.
  9. Going live: Done.

If you are a visual learner, check out Adobe's video documentation - https://docs.adobe.com/content/help/en/experience-manager-learn/sites/page-authoring/template-editor...