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

[vijayt86226372]

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 . 

[Himanshu_Singhal]

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. 

[vijayt86226372]

Thanks Himanshu..!

[vijayt86226372]

The requirement is business will decide to drag and drop any component based on the content not the component . If they feel content is good and needs to be in another site as well then they will be reusing it. So we are not sure how the decision will be made by business on the fly

[tatvam]

Only caveat I would add is that

[tatvam]

Only caveat I would add is that - you

[ArpitVarshney]

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

[vijayt86226372]

yes ...my initial solution provided was the same. Business rejected it saying they will make decisions dynamically. All they would check is the content . If they feel content is something needs to be in another site so they will share the associated component

[Albin_Issac]

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

[vijayt86226372]

Thanks for the response..! We do not want any thing on the site level. requirement is for re usability of the components with similar content and also check on page performance

[tatvam]

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

[kautuk_sahni]

@tatvam nice response.

[arunpatidar · Accepted solution]

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

[khamat_bn]

@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

[vijayt86226372]

Thank U so much for your response . Even if we go with the context-aware approach we will have to pre-define the clientlibs associated with the components which will be shared across dynamically. Business is not sure which components they would be sharing as decision would be based on the content associated with that component of a particular site.