Overwrite Plugin Javascript by using the checkExists SetInterval function

The Problem

When using shopify apps, the app's code gets loaded after the theme code. As a result overwritting the .js will not work.

The Solution

Wrap your code in the let checkExists = setInterval(() function. Which checks repeatedly if an element exists and runs until the emement does exist. This allows for the custom .js code to load after the plugin.

The Code

Add the following code. Make sure you add the clearInterval afterwords or will show an infinate loop.

let checkExists = setInterval(() => {
    // add script here
    clearInterval(checkExists);    
});

How the code works:

Explination by Ross Libby.

That is a deferral function. It checks repeatedly to see if an element exists and continues running until the element does exist. Then it permits code affecting that element to run

let

is ES6 syntax, similar to

var

but with a different (more restricted) scope

() => {}

is ES6 shorthand for

function () {}

ES6 introduced

let

and

const

into the language so we no longer have to universally grant huge scope and inifinite modification to every variable

a

setInterval

function runs every time a certain interval of time passes, as set near the end of that function. So setInterval(() => { /* some code */ }, 10)

would mean it runs every 10 milliseconds