0

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?

1 Answer 1

3

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.

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.