how to achieve re usability of components within different sites having different designs . Currently we are are working on AEM 6.5 version?

vijayt86226372

23-06-2020

We want to resuse the components within multiple sites having different designs.

 

Here, We are having some contraints in using style system as UI team has their framework and are not compatible having style system implementation.

 

Please suggest a better approach . 

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar

MVP

23-06-2020

You can use CAC(Context-aware Configuration). Save the main clientlib category as CAC and based on site/path you can configure and set a different values. In headerlibs and footerlibs html file read clientlibs category from CAC.

 

https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configurati...

 

 

 

Answers (5)

Answers (5)

khamat_bn

23-06-2020

@vijayt86226372 

 

It's because of the different clientlibs for both of the sites. My suggestion is.. give a try for context aware configurations docs once.

See this video you will get some idea. https://www.youtube.com/watch?v=q6Bk8Fn1PA0 

Doc- https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configurati...

https://wcm.io/caconfig/deploy-configure-caconfig-in-aem.html

 

~BK

tatvam

23-06-2020

Only caveat I would add is that - you standardize on markup. Then apply styles as needed - either at site level or more granular. Site level is easier with but more custom code need to be written if you have to make this granular - to template/page specific.

In order to standardize on markup, I'd probably start from core components. Easier that way. If not, start from a base front-end framework and build on it. Relatively easier to maintain and upgrade.

 

Also might have to think about versioning components down the line when you make incremental changes

Albin_Issac

MVP

23-06-2020

Another option is, define a  site level property(SiteType) to identify the theme(clientlibrary) need to be applied for the website e.g test-site

Define theme specific css(clientlibrary) e.g test-site.main.css, test1-site.main.css

Load the css to the website based on the site type configured {SiteType}.main.css

 

 

ArpitVarshney

MVP

23-06-2020

Hi @vijayt86226372 

 

I'm assuming this is probably because of different client libraries for multiple websites. The best way I can think is that you can extract the generic components which need to be used across all the websites. Just create a base clientlib for those components and embed this base clientlib in all the other site client libraries and remove the duplicate code from site-specific clientlibs and then you can use style system to define the variation of your component and author in website accordingly.

 

Regards,

Arpit Varshney

Himanshu_Singhal

MVP

23-06-2020

Well, since you've already mentioned that you're having some constraints using Style system then only thing that make more sense is to having multiple views for the components. 
You can have multiple views for a single component that can be loaded based on domain or any other parameter. E.g. for component X, there's X.html & view1.html & view2.html. Load view1 & view2 based on condition. 
it's not my recommended choice but it's a work around for your situation.