d
Topic
Posts:
21
10 days ago

Call a JS Function on Shopify

#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:
8695
Last edited 10 days 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:
21
10 days 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:
21
Last edited 9 days ago

Any help?

it should show something like that

 

Posts:
21
8 days ago

Does Venture theme has Jquery?

Posts:
21
7 days 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:
21
4 days ago

Any idea?

Jason Shopify Expert freakdesign.com.au
Posts:
8695
3 days 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