'What is the difference between Shopify checkout liquid template page:load event and DOMContentLoaded?
Shopify checkout liquid offers an event called:
page:load
Unfortunately, the documentation is sparse. What is the difference between page:load and regular JavaScript DOMContentLoaded event?
Solution 1:[1]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Bilal Akbar |