在 Shopify 中的产品模板中编写 jQuery答案

【问题标题】：Write jQuery inside product template in Shopify在 Shopify 中的产品模板中编写 jQuery
【发布时间】：2017-10-20 20:27:08
【问题描述】：

我正在尝试在 Shopify 中获取产品的变体 ID 并将其传递给 jQuery。但我无法在（Sections/product-template.liquid）中编写脚本。浏览器报错'Uncaught ReferenceError: jQuery is not defined'

我在 product-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>

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

【问题讨论】：

你加载脚本的顺序是什么？
我在 .liquid 文件中编写这个脚本。顺序在这里重要吗？因为它可以在 Wordpress 中完美运行！
检查 jQuery 是在你的脚本之前加载还是在它之前添加...

标签： javascript jquery shopify liquid

【解决方案1】：

您可能没有在您的商店网站上使用 jQuery。最简单的方法是编辑您的 theme.liquid 以在每个页面中包含 jQuery。只需在</head> 标记之前的下方添加一个script 标记即可：

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

【讨论】：

【解决方案2】：

对此的简单回答是确保您的 Javascript 库已加载到 head 元素中的 theme.liquid 中。这样可以确保您可以使用该库中的 $ 变量。

【讨论】：