Shopify Question posted in
The Shopify help center can be found here.

Installing JS code on Shopify or Website

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search