I'm having an hard time integrating external jQuery library into my own liquid page. I'd like to load it with the CDN.

On the theme.liquid page I load the Javascript this way:

<script src=".2.1/jquery.min.js"></script>
{{ 'spot-the-ball.js' | asset_url | script_tag }}

Inside the spot-the-ball.js I have a pure Javascript .onload function that is workig. Then I have the following jQuery that is not working:

$( '.coords' ).mousemove(function ( e ) {
                // console.log(e.clientX);
                // var x = ( ( e.clientX - left ) / width ).toFixed( 1 ),
                //     y = ( ( height - ( e.clientY - top ) ) / height ).toFixed( 1 );

                    x = e.clientX - 50;
                    y = e.clientY - 50;

                $( tooltip ).text( x + ', ' + y ).css({
                    left: e.clientX - 30,
                    top: e.clientY - 30
                }).show();
            });

$( '.coords' ).mouseleave(function () {
                $( tooltip ).hide();
            });

    $(".coords").mouseup(function(){
      $('.yourcoordinates').append("X:",x," Y:",y)
    });    $( '.coords' ).mousemove(function ( e ) {
                // console.log(e.clientX);
                // var x = ( ( e.clientX - left ) / width ).toFixed( 1 ),
                //     y = ( ( height - ( e.clientY - top ) ) / height ).toFixed( 1 );

                    x = e.clientX - 50;
                    y = e.clientY - 50;

                $( tooltip ).text( x + ', ' + y ).css({
                    left: e.clientX - 30,
                    top: e.clientY - 30
                }).show();
            });

$( '.coords' ).mouseleave(function () {
                $( tooltip ).hide();
            });

    $(".coords").mouseup(function(){
      $('.yourcoordinates').append("X:",x," Y:",y)
    });

I'm having an hard time integrating external jQuery library into my own liquid page. I'd like to load it with the CDN.

On the theme.liquid page I load the Javascript this way:

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{{ 'spot-the-ball.js' | asset_url | script_tag }}

Inside the spot-the-ball.js I have a pure Javascript .onload function that is workig. Then I have the following jQuery that is not working:

$( '.coords' ).mousemove(function ( e ) {
                // console.log(e.clientX);
                // var x = ( ( e.clientX - left ) / width ).toFixed( 1 ),
                //     y = ( ( height - ( e.clientY - top ) ) / height ).toFixed( 1 );

                    x = e.clientX - 50;
                    y = e.clientY - 50;

                $( tooltip ).text( x + ', ' + y ).css({
                    left: e.clientX - 30,
                    top: e.clientY - 30
                }).show();
            });

$( '.coords' ).mouseleave(function () {
                $( tooltip ).hide();
            });

    $(".coords").mouseup(function(){
      $('.yourcoordinates').append("X:",x," Y:",y)
    });    $( '.coords' ).mousemove(function ( e ) {
                // console.log(e.clientX);
                // var x = ( ( e.clientX - left ) / width ).toFixed( 1 ),
                //     y = ( ( height - ( e.clientY - top ) ) / height ).toFixed( 1 );

                    x = e.clientX - 50;
                    y = e.clientY - 50;

                $( tooltip ).text( x + ', ' + y ).css({
                    left: e.clientX - 30,
                    top: e.clientY - 30
                }).show();
            });

$( '.coords' ).mouseleave(function () {
                $( tooltip ).hide();
            });

    $(".coords").mouseup(function(){
      $('.yourcoordinates').append("X:",x," Y:",y)
    });

• javascript
• jquery
• shopify
• liquid

• 2 Check if there are any errors in the dev console, then write a simple console.log('test') and check if the JS is loaded, third check if the target elements are actually loaded before you target them console.log($( '.coords' ).length). 99% of the time you will find the problem this way. – drip Commented Oct 10, 2017 at 6:38
• Yep there were errors, I'm gonna answer my own question so everyone can see the solution. Thank you – Matteo Boscolo Commented Oct 11, 2017 at 0:32

2 Answers 2

I had another js file in the project that was working with an older version of jQuery. The console was showing errors. I loaded an older CDN and everything is working now.

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.3/jquery.js" type="text/javascript"></script>

You can just put this in your template, for example theme.liquid:

{{ '//ajax.googleapis./ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}