在Shopify的产品模板中写入jQuery

问题描述：

我试图在Shopify中获取产品的变体ID并将其传递给jQuery。但我无法在（Sections/product-template.liquid）中编写脚本。浏览器提供的错误“未捕获的ReferenceError：jQuery是没有定义”在Shopify的产品模板中写入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>

我在做什么错在这里？任何指导将不胜感激。谢谢！

什么样的顺序，你加载你的脚本？ – kemotoe

我在.liquid文件中写这个脚本。订单在这里很重要吗？因为它可以在Wordpress中完美运行！ –

检查jQuery是否在您的脚本之前加载或添加在它之前... –

答

这个简单的答案是让你确保你的Javascript库加载到theme.liquid头元素中。这可以确保您可以使用该库中的$变量。

答

这可能是你没有在你的商店网站上使用jQuery。最简单的方法是编辑您的theme.liquid以在每个页面中包含jQuery。只要把下面的权利之前</head>标签是ok了script标签：

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

在Shopify的产品模板中写入jQuery

相关推荐