[FIXED] What is the difference between Shopify checkout liquid template page:load event and DOMContentLoaded?

Issue

Shopify checkout liquid offers an event called:

page:load

Documentation: page-load

Unfortunately, the documentation is sparse. What is the difference between page:load and regular JavaScript DOMContentLoaded event?

Solution

From MDN webdocs

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

While from Shopify Docs

All of the checkout steps are hosted at a single URL path, where the content is loaded dynamically depending on the current step.

Shopify is most probably loading some stuff on their end on DOMContentLoaded and fires page:load event when everything is ready and you can make your DOM customizations. Moreover, DOMContentLoaded will only be fired once for whole checkout, but page:load would be fired once for each Checkout step.

Same thing has been described in the docs for page:load.

The page:load event is triggered when the content of each step is loaded. This is the default event that you should use when adding content into the page on load.

Answered By - Bilal Akbar

Answer Checked By - Senaida (PHPFixing Volunteer)