1

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.

7

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 | |
  • Thank you, will try this out later! Is it possible to do it through a module or is it recommended to use a theme? – Jurģis Toms Liepiņš Mar 4 '18 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 '18 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? – Jurģis Toms Liepiņš Mar 5 '18 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 '18 at 21:37
  • Oh, I had to copy the original onepage.phtml to my theme right? – Jurģis Toms Liepiņš Mar 6 '18 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 | |
  • 1
    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 '18 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;) – Jurģis Toms Liepiņš Mar 4 '18 at 11:03

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.