3

How to add custom JS to just the checkout page?

I found this tutorial, but as far as I can tell it will add JS to the entire site.

Improve this question

2 Answers 2

Reset to default
9

The recommended way to add js is with requireJS ! as it is explained in Magento DevDocs

  1. app/design/frontend/Vendor/theme-name/Magento_Checkout/web/js/myfile.js

    your js functions goes here exemple : 

    define(['jquery'], function($){
    "use strict";
    return function hello()
    {
        alert('Bonjour Amir');
    }
});

  2. app/design/frontend/Vendor/theme-name/requirejs-config.js

    var config = {
    map: {
        '*': {
            checkoutjs: 'Magento_Checkout/js/myfile'
        }
    }

};

  3. app/design/frontend/Vendor/theme-name/Magento_Checkout/templates/onepage.phtml

    Here we call our js function otherwise, the js will not be loaded !

    <script type="text/javascript">
    require(['jquery', 'checkoutjs'], function($, hello) {
        hello();
    });
</script>
    • Clean all this folder contents pub/static except .htaccess
    • Clean all this folder contents var/view_preprocessed
    • Clean all this folder contents var/cache
    • Deploy the static-content: php bin/magento setup:static-content:deploy -f
Improve this answer
10
  • Thank you, will try this out later! Is it possible to do it through a module or is it recommended to use a theme?
    – Metal Mathematician
    Mar 4, 2018 at 12:46
  • 1
    it is possible for the both, in your case you just want to call a js in your template, so I think it's not worth it to rewrite the module for that !
    – PЯINCƎ
    Mar 4, 2018 at 12:49
  • Hmm, the JS deploys, but no HTML elements load at all (i.e the checkout is blank). Am I doing something wrong?
    – Metal Mathematician
    Mar 5, 2018 at 21:35
  • I don't know what exactly you did but i tested it and it works, recheck you code step by step
    – PЯINCƎ
    Mar 5, 2018 at 21:37
  • 1
    Oh, I had to copy the original onepage.phtml to my theme right?
    – Metal Mathematician
    Mar 6, 2018 at 14:30
2

I don't know if this is the best way, but this is how I did it:

Create a checkout_index_index.xml in app\code\vendor\module\view\frontend\layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <script src="vendor_module::js/checkout.js"/>
    </head>
</page>

Then you can put your JS checkout.js in: app\code\vendor\module\view\frontend\web\js

Improve this answer
2
  • 2
    This is not the recommended way to add a js file in Magento 2, look at the console of your browser, you will definitely have errors or breaks some functions, you should use requireJS
    – PЯINCƎ
    Mar 4, 2018 at 10:26
  • @Prince Yeah, I read it's not recommended, but it seems so straightforward. I don't get any errors. I am aware of data-mage-init and x-magento-init but I haven't been able to implement it successfully for the checkout. I would appreciate you help;)
    – Metal Mathematician
    Mar 4, 2018 at 11:03

Your Answer

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

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