Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Apply CSS and JS for whole site using content fragments

Avatar

Level 5

I have created a site in AEM as a Cloud Service and want to implement CSS and JS at global level. Means, we can change values in content fragment and then it will change for the whole site. Is there a way to do this?

And if not this then is there a way that we can handle global js and css from author's end?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

This sound very much like the theme capability. 

If you try page properties of a wknd root website, you can see a Theme subsection as below

Screenshot 2023-02-11 at 15.49.36.png

As the info icon says, you can choose a content fragment based Page theme. 

As you are on CS, please use Wknd Commerce >0.0.8 Reference demo to build a website ( Follow [1] for detailed steps ) and it already has an implementation as exactly you mentioned. 

Screenshot 2023-02-11 at 15.55.51.pngScreenshot 2023-02-11 at 15.56.05.png

[1] - https://docs.mktossl.com/docs/experience-manager-cloud-service/content/onboarding/demo-add-on/create...

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @nikita24tailor ,

 

Ideally business author should not change the script so there is no point to have this feature available to them.

 

For CSS, I am assuming the requirement is to have different styles for same component. We have OOTB feature called style system for that.

 

Style System allows a template author to define style classes so that a content author is able to select them when editing the component on a page. These styles can be alternative visual variations of a component, making the component more flexible.

 

We also have embed component to add inline css, js, html to the page that can be considered for small use cases.

 

Please refer below links-

 

Embed component-

 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/v1-c...

 

Style system-

 

https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/style-system.htm...

 

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

 

Hope it helps!

 

Thanks,

Ritesh Mittal

Avatar

Correct answer by
Employee Advisor

This sound very much like the theme capability. 

If you try page properties of a wknd root website, you can see a Theme subsection as below

Screenshot 2023-02-11 at 15.49.36.png

As the info icon says, you can choose a content fragment based Page theme. 

As you are on CS, please use Wknd Commerce >0.0.8 Reference demo to build a website ( Follow [1] for detailed steps ) and it already has an implementation as exactly you mentioned. 

Screenshot 2023-02-11 at 15.55.51.pngScreenshot 2023-02-11 at 15.56.05.png

[1] - https://docs.mktossl.com/docs/experience-manager-cloud-service/content/onboarding/demo-add-on/create...