Why does nanogallery2 return 'not a function' error with debut theme?

[SHPMP]

I’ve been struggling to identify why I’m having issue executing scripts with shopify / debut theme. Other devs did work on this site before me so their maybe something custom they did.

Trying to load nanogallery2 gallery page using the javascript sample code provided here. https://nanogallery2.nanostudio.org/

I’m consistently getting error - “nanogallery2 not a function” ?

Here are the additions / modifications to debut theme that I’ve done to theme.liquid file in past.

(Other devs may have modified elsewhere)

Appreciate any suggestions as to what maybe cause this error

Show More

Show More

Show More

Show More

[diego_ezfy]

@SHPMP

You’re trying to load a library that is dependent on jQuery before jQuery itself loads. You need to:

1. Import your library after importing jQuery;
2. Wait for jQuery to load before using your library.

Something like this would work:

async function loadSomething(){
while(!window.hasOwnProperty("jQuery")){
await new Promise(resolve => setTimeout(resolve, 100));
}

jQuery(function() {
jQuery('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
var formIsValid = true;
var message = "Please inform us ........";
jQuery('[name^="attributes"], [name="note"]').filter('.required, [required="required"]').each(function() {
jQuery(this).removeClass('error');
if (formIsValid && jQuery(this).val() == '') {
formIsValid = false;
message = jQuery(this).attr('data-error') || message;
jQuery(this).addClass('error');
}
});
if (formIsValid){
jQuery(this).submit();
}
else {
alert(message);
return false;
}
});
});

You may need to adjust the code to better suit your needs.

Kind regards,
Diego

[SHPMP]

Thank you. I felt it was an order of execution. Though I still don’t understand. Jquery is referenced above the header on theme.liquid - Why isn’t jquery ready (loaded) for every page on site in which I would call a library?

Reviewing the code you shared. I don’t understand how to use it. Where the scripts begin and end? Is it that it shouldn’t close after loadSomething(); to then run scripts on my other pages.

Clearly I’m outta my element here with JS. The other scripts I sourced from https://github.com/carolineschnapp to meet our needs for order info attributes + mandatory field select.

[SHPMP]

Got it to execute.

With your guidance on #1,2 - searching around landed me here - https://stackoverflow.com/questions/7486309/how-to-make-script-execution-wait-until-jquery-is-loaded

Leaving scripts alone in theme.liquid

I modified the sample code of nanogallery2 page code. ((The defer tag being required in source script)

So many ways to do a task in JS - I’m open for suggestions if I should be taking another approach.

But for now its working so I’m going to attempt duplicate our old jquery gallery from our old website using this defer method.

Thanks for help.

[diego_ezfy]

@SHPMP

Very likely because it’s being loaded twice, though I’d need to debug it to be sure. Usually jQuery is imported in a vendors.js file on Shopify free themes (which I assume is what you’re using), so importing it again will make it be ignored or cause conflict.

Replace the code you shared:

With the code I gave you:

[SHPMP]

I believe you are right that jquery might being loaded twice. Yes using the free Debut theme. I did review vendor.js - but not sure what I’m looking for specifically.

I don’t see any code referencing -

When I originally setup cart scripts I read to add the jquery source in theme.liquid - above the header. And neither of scripts functioned until added.

I tried the code you shared. Has same syntax errors that I encountered earlier when I guessed implied start / close tags. See screenshots. (Cart scripts also non functional)

If I have theme.liquid loading jquery above header the sample nanogallery2:

Then trying without jquery load above theme.liquid header

I was able to clone our old gallery and develop on it today using the other method. So I should be able to easily modify my gallery page to load using this method.

Thanks for help.

[diego_ezfy]

@SHPMP

The standard Shopify theme structure is often times different than a default HTML website: whilst you may import external libraries using a script tag in your website, Shopify themes tend to load it all together within one single file, typically named vendors.js.

Therefore it makes sense that you wouldn’t find any in your theme.

You can use this Google Chrome extension to search the files in your theme and see where jQuery shows up.

https://chrome.google.com/webstore/detail/shopify-theme-file-search/mhchmhfecfdpaifljcfebnlaiaphfkmb

Kind regards,
Diego

[SHPMP]

Thanks Diego for your help on our site.

For any onlookers.

A viable solution for my “not a function” error in which thread started was

var waitForJQuery = setInterval(function () {
    if (typeof $ != 'undefined') {

        // place your code here.

        clearInterval(waitForJQuery);
    }
}, 10);

As mentioned here. https://stackoverflow.com/questions/7486309/how-to-make-script-execution-wait-until-jquery-is-loaded

Also - For any in need of assistance with their site. I’d recommend Diego_ezfy - Good support. Affordable rate.

[monomyth_io]

Just to follow up here, I was able to resolve this issue by moving my custom js to the bottom of the .