2

I'm using Magento 2 and I have a js file that was called like this:

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceContainer name="after.body.start">
          <block class="Vendor\Module\Block\Ajax\Login\Js" template="Vendor_Module::login-ajax.phtml" name="login.ajax" as="login.ajax" before="head.components" ifconfig="loginpopup/general/enabled" />
      </referenceContainer>
    </body>
</page>

login-ajax.phtml

<script type="text/x-magento-init">
{
    "*": {
        "vm/loginajax"    : <?php echo $block->getJsOptions(); ?>
    }
}

requirejs-config.js

var config = {
    map: {
        '*': {
            'vm/loginajax': 'Vendor_Module/js/login-ajax'
        }
    }
};

Vendor_Module/js/login-ajax

define([
    'jquery',
    'mage/translate',
    'jquery/ui',
    'mage/validation/validation',
    'vm/mycustom'
], function ($, $t)

the js file size is 3KB , i noticed the js file is rendered not at the very beginning, how can i set the priority so this js file will load first?

Improve this question
2

4 Answers 4

Reset to default
2
+50

You cannot manually manage the sort order of JS files within core Magento 2 to the level you are asking for, and even if you could you do not want your file to load first as you have dependencies:

'jquery',
'mage/translate',
'jquery/ui',
'mage/validation/validation',
'vm/mycustom'

You have to wait until your dependencies have loaded else you will just run into a lot of errors. If for some reason you really do want your file to load first then do not use Require JS at all.

Improve this answer
2
  • 1
    Totally right 👍🏼
    – Raul Sanchez
    Commented Aug 14, 2020 at 8:26
  • Ben is right here. Question is what do you want to achieve? I mean not what you want to do on code level but what you want to do in you store from user perspective? Perhaps there is some other way. However looking at the name of js script and the list of dependencies I guess it will be difficult to make it in different way.
    – JanuszJanczy
    Commented Aug 15, 2020 at 3:15
0

If your goal is to load this js file first then instead of added after body, you can added then into head section like this.

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <referenceBlock name="head.additional">
          <block class="Vendor\Module\Block\Ajax\Login\Js" template="Vendor_Module::login-ajax.phtml" name="login.ajax" as="login.ajax" before="-" ifconfig="loginpopup/general/enabled" />
      </referenceBlock>
    </body>
</page>
Improve this answer
4
  • is not this still inside the <body> tag?
    – jojo
    Commented Aug 14, 2020 at 6:15
  • Do you want this in body tag or head tag?
    – Dhiren Vasoya
    Commented Aug 14, 2020 at 6:18
  • i want this js file should be loaded up first, should not be matter in head or body
    – jojo
    Commented Aug 14, 2020 at 7:04
  • Then you can use above code.
    – Dhiren Vasoya
    Commented Aug 14, 2020 at 9:20
0

Add your login-ajax JS file in the default.xml file of your custom module Vendor\Module\view\frontend\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <link src="Vendor_Module::js/login-ajax.js"/>
    </head>
</page>

Keep the file login-ajax.js at Vendor\Module\view\frontend\web\js\login-ajax.js

And finally,

Run setup:upgrade and setup:static-content:deploy commands.

Hope this helps!

Improve this answer
0

Need to override root.phtml instead of using require.js.

Copy default root.phtml from vendor/magento/module-theme/view/base/templates/ to your theme location app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/templates/.

Edit the file to include your script right before or after where require.js is included.

<!doctype html>
<html <?= /* @noEscape */ $htmlAttributes ?>>
    <head <?= /* @noEscape */ $headAttributes ?>>
        <script type="text/javascript" src="path/to/your/custom.js"></script>
        <?= /* @noEscape */ $requireJs ?>
        <?= /* @noEscape */ $headContent ?>
        <?= /* @noEscape */ $headAdditional ?>
    </head>
    <body data-container="body"
          data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?= /* @noEscape */ $loaderIcon ?>"}}'
        <?= /* @noEscape */ $bodyAttributes ?>>
        <?= /* @noEscape */ $layoutContent ?>
    </body>
</html>
Improve this answer
3
  • Wouldn't this error as require is not yet defined?
    – Ben Crook
    Commented Aug 14, 2020 at 9:23
  • Above solution will load JS file at the top where code should be written without any dependency(core JS). Using RequireJS as you've mentioned we cannot manually manage the sort order of JS because RequireJS loads its module source files asynchronously, and doesn't promise anything about the order they're loaded in. Just we can manage "load order" dependencies using RequireJS shim configuration directive.
    – Pratik Oza
    Commented Aug 15, 2020 at 5:15
  • Ah I see, yeah that would work but not in this use case as there is a dependency on jQuery, jQuery UI, Magento's core validation, and translations :(
    – Ben Crook
    Commented Aug 17, 2020 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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