0

I've been trying a few suggested way to load my own js into a custom Magento theme and have not been successful.

In requirejs-config.js in root of my custom theme directory, I have this:

  var config = {
    map: {
        "*": {
          "customBootstrap": "js/bootstrap.min",
          "customLocal":     "js/local"
        }
    },
  shim: {
      "customLocal": {
          deps: [
              "customBootstrap"
          ]
      },
      "customBootstrap": {
          deps: [
              "jquery"
          ]
      }
  },
};

The js files are in [theme]/web/js/bootstrap.min.js and [theme]/web/js/local.js

What needs to change so it loads correctly in the order of: jquery -> customBootstrap -> custom Local

The local.js seems to be loading, but bootstrap.min.js is not.

1

You have to keep below format in requirejs-config.js file,

var config = {
    paths: {            
            "customBootstrap": "js/bootstrap.min",
            "customLocal":     "js/local"
        },   
    shim: {
        'customBootstrap': {
            deps: ['jquery']
        },
        "customLocal": {
          deps: ['customBootstrap']
       },
    }
};

Remove var folder from root. Remove pub/static folder content and run command

php bin/magento setup:static-content:deploy

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.