Custom Module load JS when all content is loaded in Checkout

Question

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
}
});

• Sohel Rana: Don't use phtml for that, use knockoutjs style.

Answer 1

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.

• Tony Le: Do you mean by define UI Components in the js file?
• Ben Crook: 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.