CODEWITHSUNDEEP
javascriptjqueryshopifyliquid
Matteo Boscolo
Matteo Boscolo

Reputation: 708

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

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)
    });

Upvotes: 2

Views: 10043

Answers (2)

Matteo Boscolo
Matteo Boscolo

Reputation: 708

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>

Upvotes: 2

Avishai
Avishai

Reputation: 4732

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

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

Upvotes: 1

Related Questions