在Shopify或网站上安装JS代码

Question

thanks in advance.

I've created this JS function which is working on test websites but it not working on shopify.

How can i call it into a product page? Probably there is some mistake in there

Thank you

 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

Since I ran out of room in the comments if you click the arrows in the top right of your product page and copy and paste this code in and it'll work just fine.

If it is still not working the only other thing I can think of is maybe you don't have jquery included in your theme since your code uses jquery. To validate that your theme already has jquery go to theme.liquid ctrl + f 'jquery'

If you find it, I am uncertain what problem you are having; if not add it to your theme and you test it again.

<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

Ok solved it

I should install Jquery like this

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

and not like this

etc.etc.