Load site specific client libs using editable template.

Avatar

Avatar
Validate 1
Level 1
Kamal_Kishor
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Give Back
Applaud 5
View profile

Avatar
Validate 1
Level 1
Kamal_Kishor
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Give Back
Applaud 5
View profile
Kamal_Kishor
Level 1

02-07-2020

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

02-07-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:
    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...  

Answers (3)

Answers (3)

Avatar

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
Vaibhavi
MVP

02-07-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

Avatar

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

125 likes

Total Posts

203 posts

Correct reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

125 likes

Total Posts

203 posts

Correct reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
raj_mandalapu
MVP

02-07-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.

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

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

106 likes

Total Posts

164 posts

Correct reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile

Avatar
Give Back 5
Employee
sunjot16
Employee

Likes

106 likes

Total Posts

164 posts

Correct reply

50 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 25
Give Back 10
Give Back
View profile
sunjot16
Employee

02-07-2020