Javascript with Ready Themes (Levels)

[Unsu]

Hey - I am building a new development store on Levels, and can't for the life of me get a single custom javascript to execute within the levels framework.

I am wanting to add a simple Flexslider on the SFNT page, and want a simple script that is used for image maps on responsive designs on the Category pages - and no matter where I put the JS and call files within the pages (global head, page header, page footer, within the correct SFNT or CTGY part of the scripts.js file), I get two errors, specifically:

ReferenceError: $ is not defined
$(...).imageMap is not a function or $(...).flexslider is not a function

When I try these scripts on other sites, they work - what am I missing here? Is there a video or guide to adding your own Javacript in MIVA docs? I can't find anything!

I am not a pro when it comes to scripts, but these seem like really basic - is there a special process for MIVA frameworks to execute scripts?

Also - the .js/css files are being correctly uploaded and executed on my Firefox Console, I feel the issue is with the calling of them. I may need to write it a bit differently than what the developers give on their site?

For reference, the flexslider I am using this call on the SFNT page :

// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});



And for the image map script using on the CTGY pages:

https://www.npmjs.com/package/image-map


Thanks in advance - this is causing me a ton of headaches :)

[Matt Zimmermann]

The script tags you are using to call in these files to be placed below the global footer tag on their respective pages. Then, within the scripts.js file, you would put your initialization strings within the respective page functions. Most likely, the errors you are seeing are due to the fact that you are initializing the scripts before jQuery and/or the scripts are loaded.

[Unsu]

Hi Matt,

Thanks for the quick response. So all the calls need to be done in the scripts.js file? I tried putting the one script under the jsCTGY section and got the same result (in bold):

    jsCTGY: function () {
        // ---- Conform all subcategory and/or product DIVs to same height ---- //
        cornerstoneUX.sharedFunctions.conformDisplay();
        cornerstoneUX.sharedFunctions.conformDisplay('.sub-category');

        // ---- Open Quick View ---- //
        cornerstoneUX.sharedFunctions.openQuickView();

   $('img[usemap]').imageMap();

    },

I understand the call needs to be below the script itself, but thought it could be anywhere in the head or body/foot as long as it followed those rules.

[Unsu]

One more followup to what you told me - is it perhaps because I am putting the slider/imagemap js file and the call ABOVE the jquery file (which I think is vendor.min.js for MIVA) ?

[Unsu]

Problem solved - I didn't realize we had to put the JS files below 'vendor.min' in the global footer.

Thank you - it looks like 9.00007 is going to have a javascript upgrade that makes pinpointing and applying to single pages alot easier? Looks exciting.

[Matt Zimmermann]

The location of your imagemap call is correct for the jsCTGY function. As for the location, place them after the vendor call.

[ids]

Maybe try placing them in the Details tab section just before the closing body tag.

Personally, I try to avoid adding or modifying the Miva supplied scripts where ever possible. Updates could overwrite your changes.

Scott

[Unsu]

Maybe try placing them in the Details tab section just before the closing body tag.

Personally, I try to avoid adding or modifying the Miva supplied scripts where ever possible. Updates could overwrite your changes.

Scott

Agreed - I spend most of my time with Wordpress, and there is nothing more frustrating than modifying core files only to forget what you did when you apply a core update. Thanks for the heads up.

[AHerb]

Modern Miva themes are loading most Javascript including jQuery library in the footer.
If you need to run your jQuery code earlier (which is not recommended at all), you just need to load jQuery library before your code (alternatively in the header).

Something like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

in the header will do the job.

But better DON'T! :-)

[Bruce - PhosphorMedia]

Also, personally, i recommend ALWAYS using $(document).ready(function(){ // Your code here }); When adding any jQuery