Multiple site with different styles on same codebase | Community
Skip to main content
abdul_munim
abdul_munim
New Participant
May 10, 2018
Solved

Multiple site with different styles on same codebase

  • May 10, 2018
  • 4 replies
  • 1892 views

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

    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 arunpatidar

    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

    4 replies

    abdul_munim
    abdul_munimAuthor
    New Participant
    June 20, 2018

    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.

    smacdonald2008
    smacdonald2008
    New Participant
    May 10, 2018

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

    smacdonald2008
    smacdonald2008
    New Participant
    May 10, 2018

    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.

    arunpatidar
    arunpatidarAccepted solution
    New Participant
    May 10, 2018

    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

    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...