在 Shopify 或网站上安装 JS 代码

Question

提前致谢。

我创建了这个 JS 函数，它可以在测试网站上运行，但不能在 shopify 上运行。

如何将其调用到产品页面中？可能那里有一些错误

谢谢

var output, started, duration, desired;

// Constants
duration = 5000;
desired = '50';

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() *(50 - 25) + 25) 

        );

    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * (50 - 25) + 25)

        );
    }
}, 4000);

#output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 80px;
    color: white;
}

<div id="output"></div>

Answer 1

因为我运行在评论中没有空间，如果您单击产品页面右上角的箭头并复制并粘贴此代码，它就会正常工作。

如果它仍然无法正常工作，我唯一能想到的另一件事可能是您的主题中没有包含 jquery，因为您的代码使用了 jquery。要验证您的主题已经 jquery 转到 theme.liquid ctrl + f 'jquery'

如果你找到了，我不确定你遇到了什么问题；如果没有将它添加到您的主题中，您再次测试它。

<div id="output"></div>
<script>// <![CDATA[
var output, started, duration, desired;

// Constants
duration = 5000;
desired = '50';

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() *(50 - 25) + 25) 

        );

    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * (50 - 25) + 25)

        );
    }
}, 4000);
// ]]></script>

Answer 2

好的解决了

我应该像这样安装 Jquery

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag}}

而不是这样

etc.etc.

在 Shopify 或网站上安装 JS 代码

Installing JS code on Shopify or Website

javascript

shopify