WooCommerce 的动态交付时间计数器作为短代码

Question

我使用 JavaScript 计数器为 Wordpress 创建了一个简码。

后端- 计数器工作正常：

前端- 计数器不起作用（没有控制台错误...）：

我的简码代码：

// Delivery Counter Time

 function bb__delivery_counter_function() {

    ?>

 <script type='text/javascript'>

        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 = 12; // 12: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

                    

                    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

                            target += 24;

                        }                

                    }

当我在 Elementor 主题中添加短代码时，“后端”中的一切都工作正常，因此计数器在 Elementor 管理视图中计数。

但如果我尝试通过前端访问该页面，Javascript 将无法工作。有什么想法为什么会发生这种情况吗？

Answer 1

您的代码中有一些错误。您需要缓冲 Javascript 才能返回它，因为它应该是短代码，现在 JS 等待使用 jQuery 加载 DOM（因为 jQuery 库已加载到 WordPress/WooCommerce 中）。我还简化了你的代码：// Delivery Counter Timeadd_shortcode('bb__delivery_counter', 'shortcode_delivery_counter_func');function shortcode_delivery_counter_func() {&nbsp; &nbsp; ob_start(); // Start buffering&nbsp; &nbsp; ?>&nbsp; &nbsp; <script type='text/javascript'>&nbsp; &nbsp; jQuery(function($) {&nbsp; &nbsp; &nbsp; &nbsp; function pad(n, len) { // leading 0's&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var s = n.toString();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (new Array( (len - s.length + 1) ).join('0')) + s;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; setInterval( function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var target = 12, // 12:00hrs is the cut-off point&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; now = new Date(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; weekday = now.getDay();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (weekday == 6) { // On Saturday: Adds 48hrs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target += 48;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // On sundays | And from monday to Friday after the cut-off : Adds 24hrs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if ( weekday == 0 || now.getHours() > target ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target += 24;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var hrs&nbsp; = (target - 1) - now.getHours(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mins = 59 - now.getMinutes(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; secs = 59 - now.getSeconds();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hrs < 0) hrs = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (mins < 0) mins = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (secs < 0) secs = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#countdownTimer').html( pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>' );&nbsp; &nbsp; &nbsp; &nbsp; }, 1000 );&nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php&nbsp; &nbsp; return '<div id="countdownTimer"></div>' . ob_get_clean(); // return buffered JS with html}代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。