Multiple site with different styles on same codebase

[abdul_munim]

Hi,

We're running our instance in AEM 6.3 and we have a site (Site-A) already running on production. We are going to release another site (Site-B) which has similar functionalities as Site-A with different styling and some minor changes here and there.

The problem we are facing that how we can use a different set of /etc/designs/ for the new site without making much changes to the existing site or templates.

We didn't use editable templates in Site-A and hence static page components in /apps/a/components/structure are used. The page components are inherted from /libs/wcm/foundation/components/page and hence we're using the clientlib with categories parameter using data-sly-call="$P{clientlib.css ...}" to add concatinated css and javascript to the pages.

Since all the designs are in /etc/designs/site-a, we'd eventually need to copy /etc/designs/site-a to /etc/designs/site-b.

My question is, how we can use the same templates from the ui.apps to use site-a on site-a.com and site-b on site-b.com?

Possible solutions:

• Make another set of the templates for Site-B and use data-sly-call="${clientlib.css @ categories='site-b.all-css'}" where the Site-A will have data-sly-call="${clientlib.css @ categories='site-a.all-css'}"
• Override HtmlLibraryManager and based on content path /content/site-a/ or /content/site-b/ the related categories are to be used. BUT THIS REQUIRES TO OVERRIDE THE DEFAULT BEHAVIOUR OF AEM AND HENCE MAY BREAK IN FUTURE AEM RELEASES.
• Use the /conf configuration and Models to read configurations defined for Site-A to use site-a.all-css category and Site-B to use site-b.all-css category. BUT THIS WILL REQUIRE TO SET cq:conf to all existing pages in the existing site.

Any suggestion is highly appreciated of what'd be the best way to go forward.

Regards,

Munim

[arunpatidar · Accepted solution]

For third option

Use the /conf configuration and Models to read configurations defined for Site-A to use site-a.all-css category and Site-Bto use site-b.all-css category. BUT THIS WILL REQUIRE TO SET cq:conf to all existing pages in the existing site.

you can try to achieve this by using sling:configRef instead of cq:conf at the root level of site.

set below property in your site root page only e.g. /content/myapp/site-A or /content/myapp/site-A respective to site

e.g. sling:configRef = /conf/MyApp/site-A

e.g. sling:configRef = /conf/MyApp/site-B

create css-settings(cq:Page) node at below

/conf/MyApp/site-A/settings/css-settings/jcr:content

/conf/MyApp/site-B/settings/css-settings/jcr:content

set property e.g. css-category = site-a.all.css or site-b.all.css in respective nodes

Read this property using java in template page component

Conf conf = getCurrentPage().adaptTo(Conf.class);

if (conf != null) {

  ValueMap cssSettings = conf.getItem("css-settings");

  String cssCategoryName = dbSettings.get("css-category", "default-css-category");

}

Thanks

Arun

[smacdonald2008]

Just a note here - "We didn't use editable templates"

Use of Static Templates in the latest version of AEM is no longer considered best practice. Use of Editable Templates is now considered best practice.

[smacdonald2008]

Also as this deals with Muli sites - see this webinar on this subject -- AEM Component Development Strategies

[abdul_munim]

Thank you Arun for your response. I discovered sling:configRef can be used in the root node and child nodes get the settings. Your code works very well. Thank you again.

BUT

Conf class is depricated in AEM 6.3 and it is said to use caconfig. In fact it's very easy and looks more solid. Thank you again.