Using jQuery in custom theme

[markosci]

Hi everybody

 

I'm trying to use jQuery in my custom theme but when I use the code

$(document).ready(function(){
//there my code...
});

My console return me a error, saying the '$' is not defined. If I include the lastest version of jQuery, the console return more error.

 

What is the correct way to use jQuery in a theme?

[Xpert-Idea]

Your custom JQuery code loaded before JQuery load that why you fetch this issue on console. Please load your custom code after JQuery. 

 

You can load your JQuery code using on this hook : "displayBeforeBodyClosingTag". This hook loaded after JQuery so your problem will be solved. 

[markosci]

I'm writting that in my javascript.tpl for my custom theme.

 

With this code (in javascript.tpl):

<script type="text/javascript" src="{$urls.js_url}jquery-3.1.1.js"></script>
<script type="text/javascript">
  var jQuery311 = $.noConflict();
  jQuery311(document).ready(function(){
    var container = jQuery311(".products");
    container.isotope({
      layoutmode:'masonry'
    });
  });
</script>

works fine.

 

The problem is using a isotope.js...With this code the console show me the error 'isotope() is not a function'. What can be the problem? The library isotope.js is loaded too