Liquid/Shopify: как добавить jQuery на страницу?

Question

Мне трудно интегрировать внешнюю библиотеку jQuery в мою собственную страницу с жидкостью. Я хотел бы загрузить его с CDN.

На theme.liquid страница, которую я загружаю Javascript следующим образом:

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

Внутри spot-the-ball.js У меня чистый Javascript .onload функция, которая работает. Тогда у меня есть следующий jQuery, который не работает:

$( '.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

У меня был другой файл js в проекте, который работал со старой версией jQuery. Консоль показала ошибки. Я загрузил старый CDN, и теперь все работает.

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