d
Topic
Posts:
23
5 months ago

Call a JS Function on Shopify This post is outdated

#output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 80px;
    color: white;
}
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);
<div id="output"></div>

Hello,

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?

Thank you

 

i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
9142
Last edited 5 months ago

A few questions to start with:

  1. Do you have a link to the product page you have this code running on?
  2. How have you added the script into the theme?
  3. Have you looked at the browsers debug console for clues into the problem?

It is hard to offer much insight without seeing this running within the Shopify environment.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
23
5 months ago

Hello Jason,

Thank you so much for you reply.

I am new in JS script so I am start to learn this.

1)i wish to install it in any page, product-template.liquid

2) I tried many times to add a script or create a Js file in the asset, I am suspecting there is something does not work in the code

3) probably i miss the function name in JS file? 

Thank you

Posts:
23
Last edited 5 months ago

Any help?

it should show something like that

 

Posts:
23
5 months ago

Does Venture theme has Jquery?

Posts:
23
5 months ago

Thank you so much for the help!

At the end the code was in JQuery so I had to install the JQuery code in the head of the template, but after that the countdown was working but not the display image in the product page.

Infact I cannot change the picture now, how is it possible that in Venture theme you cannot use JQuery?

How can i fix this? 

Thank you

Posts:
23
5 months ago

Any idea?

Jason Shopify Expert freakdesign.com.au
Posts:
9142
5 months ago

There's nothing stopping you from using jQuery, or any other JavaScript library, or plain JS for that matter. I can't offer much help since those questions I asked remain unanswered.

Question 3 - being able looking in the browsers debug console - will be a good place to look for clues into what has gone wrong. It's very likely an with your code or how you've implemented it.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au