4

i created the custom js for backend extension module like this:

custom.js:

define([
    'jquery',
    'underscore',
    'mage/url',
    'jquery/ui'
    ], function ($, _,urlBuilder) {
    'use strict';
    $(function() { 
       console.log('test'); 
    });
});

default.xml :

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Namespace_Module::custom.js"/>
    </head>
    <body/>
</page>

but i got the following error like this :

Uncaught ReferenceError: define is not defined
    at custom.js:1

the problem might caused by require.js is loaded just before my custom.js

1

As your script requires other scripts, yours should not be loaded with a layout update. It has to be loaded through requirejs to resolve dependencies:

file: app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
   map: {
       "*": {
           "myAwesomeCustomScript" : "Vendor_Module/js/custom"
       }
   }
};

Your custom.js file should be located at app/code/Vendor/Module/view/frontend/web/js/custom.js

You will need to clear pub/static/_requirejs for your configuration to take effect.

The above tells Magento how your script file can be loaded. Now you need something else to require your script.

If your script is a controller script for an HTML element, you can use the following example in a phtml file:

<div data-mage-init='{"myAwesomeCustomScript":{}}'>
</div>

If your script is not bound to an HTML element, use the following example to load your script from a phtml file:

<script type="text/x-magento-init">
    {
        "*": {
            "myAwesomeCustomScript": {
                "<option_key>": "<option_value>"
            }
        }
    }
</script>

Create a layout update file: app/code/Vendor/Module/view/frontend/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <block class="Magento\Framework\View\Element\Template" name="my.awesome.script" template="Vendor_Module::script.phtml" />
    </body>
</page>

Create the phtml file: app/code/Vendor/Module/view/frontend/templates/script.phtml and paste the script tag in it.

| improve this answer | |
  • i want to use the js globally, and i'm not using any controller for this case – simple guy Feb 17 '17 at 9:23
  • The second example could also be added to the head scripts section of your theme configuration, which removes the need to use a phtml file. You will have to use requirejs configuration if you need access to jquery, jquery-ui, etc – Vincent Hornikx Feb 17 '17 at 9:25
  • how to add it from extension? – simple guy Feb 17 '17 at 9:26
  • I updated my answer with instructions on how to render the script tag from the extension. – Vincent Hornikx Feb 17 '17 at 9:33
  • can it work in adminhtml, because i use it this js in backend section, what is "<option_key>": "<option_value>" ? – simple guy Feb 17 '17 at 9:35
0

Try to change define to require like this

require([
    'jquery',
    'underscore',
    'mage/url',
    'jquery/ui'
    ], function ($, _,urlBuilder) {
    'use strict';
    $(function() { 
       console.log('test'); 
    });
});
| improve this answer | |

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.