3

Since the DOM on the checkout page is loaded in an asynchronous way - I do not have access to some elements. Please suggest me how we can add a custom script to the checkout page after loading all the elements.

1
  • I suppose you have added through document ready and element is not accessible right? in that case, just for the workaround you can use the setTimeout and check for the ID of that element exist if found then add your code inside that if the condition. let me know if my assumption is wrong. Mar 29, 2018 at 10:04

2 Answers 2

17

To add javascript file in checkout page you should extend checkout_index_index.xml inside theme layout for magento checkout module or your custom module frontend layout folder, and add the following:

 <head>
   <link src="<url of your js file>"/>
 </head>

to wait until all the element loaded, you can check which element is the last one being rendered (example: .payment-method). Inside the javacript function you can make code to wait until this last element exists inside your js file:

require(['jquery', 'jquery/ui'], function($){ 
    $( document ).ready(function() {

      //wait until the last element (.payment-method) being rendered
      var existCondition = setInterval(function() {
       if ($('.payment-method').length) { 
        clearInterval(existCondition);
        runMyFunction();
       }
      }, 100);

      function runMyFunction(){
       console.log("Last");
      }

    }); 
 }); 
2
1

you can use hideLoader method in your js component

 hideLoader: function() {
          //your code here
            },

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.