JavaScript fails to execute in Prestashop

Can anyone help me troubleshoot my countdown shipping time code? Here is the script I am using: http://jsfiddle.net/37ox54bk/7/

I am utilizing the HTML box module found here:

This is how the code looks:

    <div id="countdownTimer">0</div>
    <script type="text/javascript">// <![CDATA[
     if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
    var s = n.toString();
    return (new Array( (len - s.length + 1) ).join('0')) + s;
};

var timerRunning = setInterval(

    function countDown() {
        var target = 15; // 15:00hrs is the cut-off point
        var now = new Date();

        //Put this in a variable for convenience
        var weekday = now.getDay();

        if(weekday == 0){//Sunday? Add 24hrs
            target += 24;
        }//keep this before the sunday, trust me :>

        if(weekday == 6){//It's Saturday? Add 48hrs
            target += 48;
        }

        //If between Monday and Friday, 
        //check if we're past the target hours, 
        //and if we are, abort.
        if((weekday>=1) && (weekday<=5)){
            if (now.getHours() > target) { //stop the clock
                return 0;
            }                
        }

        var hrs = (target - 1) - now.getHours();
        if (hrs < 0) hrs = 0;
        var mins = 59 - now.getMinutes();
        if (mins < 0) mins = 0;
        var secs = 59 - now.getSeconds();
        if (secs < 0) secs = 0;

        var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
        document.getElementById('countdownTimer').innerHTML = str;

    }, 1000
);
    }// ]]></script>

Unfortunately, when I implement the code, nothing happens. The countdown just shows 0 as if the JavaScript is not running. Any suggestions?

Answer №1

Upon closer inspection, it appears that the module encases everything within <script> tags like this:

// <![CDATA[
//--><![CDATA[//><!-- //
[your code] 
//-->&!
// ]]>

It seems that this method may not be the correct way to utilize CDATA. In fact, it looks like it simply comments out the entire block of code.

If you are unable to access your theme files directly, you could consider inserting

<div id="countdownTimer">0</div>
using the module and then pasting your code into the document.ready(); function located in globals.js file.

Answer №2

To incorporate JavaScript into your website, create a separate js file and link it like this:

<script src="http://yoursite.com/folder/file.js"></script>
<div id="countdownTimer">0</div>

If you also need to include some CSS code, make sure to add it to your existing Prestashop css file (for instance, if you want to style your homepage, edit the global.css file).

I hope this guidance helps you out!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Redirecting to a new page in JavaScript as the clock nears the top of the hour after 5 minutes

I am looking to automatically redirect a user to another page when it is 5 minutes until the start of the next hour. In military time (24-hour clock), this means I want the redirect to occur at times like... 11:55 12:55 13:55 14:55 15:55 etc So far, I ...

Object3D.frustumCulled property in ThreeJS helps determine if an object

In ThreeJS, Object3D objects have a built-in function to determine if they are within the camera's view - Object3D.frustumCulled. Is there a way to access and retrieve the result of the "Object3D.frustumCulled" check? ...

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

Guide to updating user input on the screen when a click event occurs using Javascript and HTML

I've been working on writing HTML and JavaScript code that enables user input to change based on which button the user clicks. The idea is that the user enters find/replace values, and when they hit the replace button, the text they initially entered ...

Using Flask and AngularJS: Managing Scope in a Controller with Flask Templating

Currently, my primary objective is to create a table with sortable columns. While following a tutorial and attempting to implement it into my project, I have encountered an issue. It seems that the structure of my code will not allow this functionality to ...

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...

Is your toggle() function failing to work on dynamically loaded ajax content?

$('.slideArrow').toggle(function (event) { //some code }, function (event) { //some code }); This code functions correctly for content loaded during the page load process. However, it fails to work for content loaded via ajax requests. The ...

Generate PDF Files Using Ajax

Currently, I am utilizing FPDF to generate my report. $pdf = new Report('P','mm','A4', $_POST); $pdf->AddPage(); $pdf->Output('file.pdf','I'); Furthermore, I am employing ajax to send a request to t ...

Error: The last line is missing a trailing comma

I'm struggling to understand why my tslint insists on having a trailing comma at the end of the last line in the objects. Is there a way to configure the ignore rule for the last line of objects? Appreciate any help! For example: settings = { ...

Creating a React.js component and setting an initial value within it

Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...

Ways to access the entire parent element, rather than just the individual child element, following the use of e.target

Looking to target the li element itself when clicked, rather than its child elements. The goal is to determine which specific option the user selects from a dropdown menu using event.target in jQuery. If the user chooses an li with a class of 1, set one gl ...

Set up ExpressJS to utilize port 3000 for the server

I am working on an app where the backend is currently running on localhost:8000, but I need it to run on port 3000. Specifically, I am using an express server for this example. How can I configure it to run on the desired port? Below is my current server. ...

Provide two values and complete the third one

I have a form with three input fields. I want to fill out two of the fields and have the third field automatically filled in. Here is how it should work: - I fill out the first and second fields, and the third field calculates itself - I fill out ...

The Veux Store is throwing an error message that says "Array is

When retrieving data from the Vuex Store, I start by checking if the array is present. Following that, my next step is to verify whether the noProducts object at index 0 exists. This validation process is important because the tweakwiseSortedProducts vari ...

Can the AngularJS icon adapt to different lists?

I'm currently developing in AngularJS / Jade and I need to implement functionality where an icon changes when a user clicks on something. The code I have right now looks like this: a(onclick='return false', href='#general', data-t ...

Breaking down an Express app into modules: incorporating a function, a class, and req.pipe

Below are two servers and two gqlServers, each with different functionalities. All combinations of them work. The task at hand is to enhance express with predefined code patterns that can be shared across various apps through additional methods. What com ...

Providing optimal image dimensions based on the size of the viewing window

In the process of creating an image hosting website, I have taken on the challenge to familiarize myself with different programming languages such as PHP, MySQL, HTML, CSS, and JavaScript. Currently, the website loads full-size images and resizes them to ...

Selenium webdriver cannot find the element within the JavaScript code

await driver.findElement(By.id('closeBtn')).click(); or await driver.findElement(By.xpath('//*[@id="closeBtn"]')).click(); When attempting to use the above conditions for a pop-up, it does not work as expected. An error is ...

How to loop through object properties in AngularJS using ng-repeat

I am working with an object structured like this: Obj = { "elements":[ {"name":"something","id":"v1-234"}, {"name":"somethingElse","id":"v1-239"} ], "paging":{ "next" : "100", "total": "2000" }, ...

Tips on how to properly format a DateTime String

I need help with formatting a DateTime string retrieved from an API where it is in the format of YYYY-MM-DDTHH:MM:SS +08:00 and I want to change it to DD-MM-YY HH:MM getDataFromApi(res) { this.timestamp = this.timestamp.items[0].timestamp; console ...