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.

PЯINCƎ ♦
11.8k3 gold badges27 silver badges85 bronze badges
asked Mar 2, 2018 at 10:35

2 Answers 2

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
answered Mar 4, 2018 at 12:36
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? Commented 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 ! Commented 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? Commented 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 Commented Mar 5, 2018 at 21:37
  • 1
    Oh, I had to copy the original onepage.phtml to my theme right? Commented 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

answered Mar 4, 2018 at 10:21
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 Commented 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;) Commented Mar 4, 2018 at 11:03

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.