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功能是workig。然後我有以下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 }}