BigCommerce: Adding countdown timer to specific product detail pages

Question

I'm interested in adding a countdown timer in javascript to specific product detail pages. However, when I try to add my custom JS to the product description html source editor it doesn't seem to accept it. Could anyone advise me where or what is the best way of implementing a feature like this?

Answer 1

I was able to get it working by using BigCommerce's new Script Manager. Created a new script and added the following code:

<script>
var deadline = new Date("Jan 5, 2019 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
if (document.getElementById("countdown")){
    document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    if (t < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}
}, 1000);
</script>

After saving the script, you are able to edit the html for whatever product you would like and add a new div with the countdown id.

<div id="countdown"></div>