Shopify How to Call javascript after Content Loaded

when we try to customize a Shopify product, collection, or check-out page, in most cases we need to implement special features with JavaScript. For example, show the most favorite products on the product page or on the check-out page, we need to write some JavaScript function to do some changes in your DOM object after all the pages content loaded. then we need to know how we can call JavaScipt after content loaded.

From frontend point of view, JavaScript has an event listener called “DOMContentLoaded” which we can use to call our JavaScript function codes.

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.

So codes like this:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
},false);

The above implementation method is based on raw JavaScript. But if a JQuery JavaScript library already included in your theme, you can put your logic code in the JQuery wrapped function as below:

$( document ).ready(function() {
    // put your logic code here
});

Please follow and like us: