I could add the library in the theme's script/ folder, but when SXA minifies and uploads the files, it loads my other scripts before it loads the jQuery library (thus breaking the site since it doesn't recognize $).

How do I correctly load jQuery?


With SXA jQuery is already part of the core theme. Its included in the /sitecore/media library/Base Themes/XA API base theme.

You are most likely not using the XA framework to inject dependencies in your custom JavaScript files. You need to make sure that you follow the SXA pattern for creating JS scripts like this:

XA.component.myComponent= (function ($) {

    var api = {};

    api.init = function() {
        // TODO: Add your initialization code here

XA.register("myComponent", XA.component.myComponent);

Doing this uses the XA framework to "inject" jQuery as a dependency of your component and also makes sure you don't run into any conflicts with the $ symbol.

  • This seems to be scoped for individual components(?), but what if I want to use jQuery on page-level? – imleaving Feb 2 at 17:36
  • Also, can you point me to the SXA documentation that mentions your SXA/JS pattern? – imleaving Feb 2 at 17:38
  • SXA is component-based, all JS scripts should be targeted at components, what would you need to do beyond that? I'm not sure that pattern is fully documented, but it is the pattern used in all the OOTB scripts for a theme. Based on a lot of experience with SXA, this is the right pattern to follow for your scripts to ensure compatibility with the OOTB scripts. – Richard Seal Feb 2 at 18:49
  • Here are the jsdocs for the boilerplate SXA CLI theme doc.sitecore.com/developers/sxa/components-theme-jsdoc/en/… – Richard Seal Feb 2 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.