Load site specific client libs using editable template. | Community
Skip to main content
Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
July 2, 2020
Solved

Load site specific client libs using editable template.

  • July 2, 2020
  • 4 replies
  • 4351 views

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.

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 BrianKasingli

@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:
  4. Next, add your client library category directly into the client-side libraries multi-field, and save.
    screenshot illustrated below:
  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-feature-video-use.html#:~:text=Editable%20templates%20allow%20specialized%20authors,Experience%20Manager%20(AEM)%20Sites.&text=Editable%20Templates%20are%20the%20recommendation%20for%20building%20new%20AEM%20Sites.  

4 replies

raj_mandalapu
raj_mandalapu
Level 7
July 2, 2020

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.

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-develop/client-side-libraries.html

 

 

    Vaibhavi_J
    Vaibhavi_J
    Level 7
    July 2, 2020

    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

      BrianKasingli
      Community Advisor and Adobe Champion
      BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      July 2, 2020

      @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:
      4. Next, add your client library category directly into the client-side libraries multi-field, and save.
        screenshot illustrated below:
      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-feature-video-use.html#:~:text=Editable%20templates%20allow%20specialized%20authors,Experience%20Manager%20(AEM)%20Sites.&text=Editable%20Templates%20are%20the%20recommendation%20for%20building%20new%20AEM%20Sites.  

        Terms & ConditionsAccessibility statement

        Loading footer...