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 Time

add_shortcode('bb__delivery_counter', 'shortcode_delivery_counter_func');

function shortcode_delivery_counter_func() {

    ob_start(); // Start buffering

    ?>

    <script type='text/javascript'>

    jQuery(function($) {

        function pad(n, len) { // leading 0's

            var s = n.toString();

            return (new Array( (len - s.length + 1) ).join('0')) + s;

        };

        setInterval( function() {

            var target = 12, // 12:00hrs is the cut-off point

                now = new Date(),

                weekday = now.getDay();

            if (weekday == 6) { // On Saturday: Adds 48hrs

                target += 48;

            } 

            // On sundays | And from monday to Friday after the cut-off : Adds 24hrs

            else if ( weekday == 0 || now.getHours() > target ) {

                target += 24;

            }

            var hrs  = (target - 1) - now.getHours(),

                mins = 59 - now.getMinutes(),

                secs = 59 - now.getSeconds();

            if (hrs < 0) hrs = 0;

            if (mins < 0) mins = 0;

            if (secs < 0) secs = 0;

            $('#countdownTimer').html( pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>' );

        }, 1000 );

    });

    </script>

    <?php

    return '<div id="countdownTimer"></div>' . ob_get_clean(); // return buffered JS with html

}

代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。