Liquid/Shopify: how I add jQuery to the page?

Question

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.com/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)
    });

Answer 1

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.com/ajax/libs/jquery/2.2.3/jquery.js" type="text/javascript"></script>

Answer 2

您可以将其放在模板中，例如theme.liquid ：

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