Ad

Installing JS Code On Shopify Or Website

- 1 answer

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>

Ad

Answer

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>
Ad
source: stackoverflow.com
Ad