0

I created a custom module to show suggested addresses when customer type in the address fill. However, the requirejs load before the content of checkout page load, even though I have put "domReady!".

How can I make the script to load after everything is loaded.

checkout.phtml

<?php
$client_id = $block->getClientID();
$client_secret = $block->getClientSecret();
?>
<?php if ($block->isEnabled()): ?>
<script type="text/x-magento-init" order="100">
{
    "*": {
        "addressfinder": {
            "client_id": "<?php echo $client_id; ?>"
        }
    }
}
</script>
<?php endif ?>

addressfinder.js

define([
'jquery',
'domReady!',
'./checkout_mapping'], function($, domReady, data) {
"use strict";
return function(config) {
//my code
}
});
  • Don't use phtml for that, use knockoutjs style. – Sohel Rana May 3 at 7:47
0

That is because domReady! is complete when the DOM is ready where as it sounds like you want to target when all the pages assets have loaded.

A quick and dirty way would be to use an event listener for when the window has loaded:

$(window).load(function(){
  ...
});

But because Magento 2 is terribly slow and downloads hundreds of JS files that will take a while and may result in a slow experience for the users.

A better solution would be to use the same technologies the checkout is built with which means using UI Components then you can be sure your components load in the correct order.

| improve this answer | |
  • Do you mean by define UI Components in the js file? – Tony Le May 5 at 2:13
  • I mean modify the checkout using the same tools it's built with which is UI components consistent of layout XML <item>s and Knockout inside HTML templates and Javascript. It's unnecessarily complex but it's usually the cleanest and most performant way to modify the checkout. – Ben Crook May 5 at 8:19

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.