ShopifyでjQueryを製品テンプレートに書き込む

Question

Shopifyで製品のバリアントIDを取得してjQueryに渡そうとしています。しかし、（Sections/product-template.liquid）にスクリプトを書くことができません。 ブラウザはの誤差与え「捕捉されないにReferenceErrorを：jQueryのが定義されていない」私は製品template.liquidの終わりにこのコードを書いた

。

<script> 
jQuery(function($) 
{ 
    $current_variant_id = {{ product.selected_variant.id }}; 
    $interval = setInterval(function() 
    { 
     if($('.product-single__thumbnail-item.slick-slide.slick-active.is-active').length > 0) 
     { 
      if(!($('.product-single__thumbnail-item[data-variant="'+$current_variant_id+'"]').hasClass('is-active'))) 
      { 
       $('.product-single__thumbnail-item.slick-slide.slick-active.is-active').removeClass('is-active'); 
       $('.product-single__thumbnail-item[data-variant="'+$current_variant_id+'"]').addClass('is-active'); 
      } 
      clearInterval($interval); 
     } 
    },1); 
}); 
</script> 

私はここで間違っていますか？どんな指導も高く評価されます。ありがとう！

Answer 1

この簡単な答えは、Javascriptライブラリがtheme.liquidのhead要素に読み込まれていることを確認することです。これにより、そのライブラリの$変数を使用できるようになります。

Answer 2

店舗のウェブサイトでjQueryを使用していない可能性があります。最も簡単な方法は、各ページのjQueryを含めるようにtheme.liquidを編集することです。 </head>タグがOKである前に、ちょうど右下のscriptタグを置く：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>