WooCommerce 产品倒计时

Question

我创建函数来获取日期并将其转为倒计时。 这是我的功能代码：

function countdown() {
    global $product;

    $start = get_post_meta( get_the_ID() , 'yung_product_date_start', true );
    $end = get_post_meta( get_the_ID() , 'yung_product_date_end', true );
    if ( $start && $end ) {
        $current = strtotime(date("Y/m/d"));
        $date = strtotime($start);
        $end_date = strtotime($end);
        if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
            wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0", true );
        
            wp_localize_script(
                "countdown",
                'countdown_js',
                array(
                    'to' => $end,
                    'from' => $start
                )
            );
            echo '<div id="product-countdown">
                <span id="countdown-counter"></span>
            </div>';
        } 
    }
}
add_action( 'woocommerce_before_add_to_cart_form', 'countdown' );

这是我在“countdown.js”文件中的javascript代码：

    jQuery(function($){
    "use strict";

    var from = countdown_js.from;
    var to = countdown_js.to;

    // Update the count down every 1 second
    var countDownDate = new Date(to).getTime();

    var x = setInterval(function() {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        if ( days<10 ) {
            var days = '0' + days;
        }
        if ( hours<10 ) {
            var hours = '0' + hours;
        }
        if ( minutes<10 ) {
            var minutes = '0' + minutes;
        }
        if ( seconds<10 ) {
            var seconds = '0' + seconds;
        }

        if ( days == 0 ) {
            var days = '';
        } else {
            days += ' : '
        }

        $('#countdown-counter').each( function() {
            var html = days + hours + " : " + minutes + " : " + seconds;
            $(this).html(html);
        });

        if (distance < 0) {
            clearInterval(x);
            $('#product-countdown').css("display", "none");
        }
    }, 1000);
});

此代码适用于单个产品页面，但是当我在产品存档中尝试此代码时，它仅适用于第一个产品，不适用于其余产品。我希望每个产品都有自己的倒计时。我该怎么办，请帮帮我！

Answer 1

在 HTML 中，id 应该是唯一标识符，因此当您执行 $("#countdown-counter") 时，jQuery 不会选择所有这些标识符。从技术上讲，有一些方法可以在 vanilla JS 中选择具有相同 id 的多个元素，但我不建议这样做。你想要做的是使用类。

所以：

     echo '<div class="product-countdown">
           <span class="countdown-counter"></span>
        </div>';

和

        $('.countdown-counter').each( function() {
            var html = days + hours + " : " + minutes + " : " + seconds;
            $(this).html(html);
        });

编辑：

我现在意识到您的源代码是如何使用的，以及您在同一页面上多次添加 countdown.js 脚本的事实*（不是真的，请参阅下面的注释），并且您正在传递 from 和 to通过countdown_js 对象的变量。第二个问题是关键问题：您不断地用另一个产品的数据覆盖countdown_js。此对象在产品中并未“受限”，而是在页面级别。

假设您有产品 A 和产品 B。您为产品 A 添加倒计时，这将设置为 coundown_js.from = x、countdown_js.to = y。然后为产品 B 添加倒计时，这将设置为 coundown_js.from = z、countdown_js.to = w。这将覆盖x 和y，当页面到达浏览器时，两个倒计时都使用from 和to 属性初始化，等于z 和w。

这就是为什么“所有产品都具有相同的价值！”。

我解决这个问题的方法是删除countdown_js 并使用数据属性。结果是：

        if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
            wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0$i", true );

            echo '<div class="product-countdown" data-to="'.$end.'" data-from="'.$start.'">
                <span class="countdown-counter"></span>
            </div>';
        } 

这些属性现在特定于特定的倒计时“实例”，并且可以使用 javascript 轻松访问：

$('.product-countdown').dataset.from;
$('.product-countdown').dataset.to;

您肯定需要调整您的 js 代码以使其工作，还因为 $('#product-countdown').css("display", "none"); 行不再适用于类。我的方法是遍历.product-countdown 并从父级访问.countdown-counter。

---

*以下注意事项：使用 Wordpress，如果您多次将同一个脚本排入队列，这不是问题，请参阅 https://wordpress.stackexchange.com/a/123549

Answer 2

感谢 pianka 帮助我解决了这个问题。我终于编辑了这些代码，终于成功了。

function countdown() {
    global $product;

    $start = get_post_meta( get_the_ID() , 'yung_product_date_start', true );
    $end = get_post_meta( get_the_ID() , 'yung_product_date_end', true );

    if ( $start && $end ) {
        $current = strtotime(date("Y/m/d"));
        $date = strtotime($start);
        $end_date = strtotime($end);
        if (( $date == $current || $current > $date ) && $current != $end_date && $end_date > $current) {
            wp_enqueue_script( "countdown", get_template_directory_uri() . '/assets/js/countdown.js', "1.0", true );
            
            echo '<div class="product-countdown">
                <span class="countdown-counter" countdown="'. $end .'"></span>
            </div>';
        } ?>
        <?php 
    }
}
add_action( 'woocommerce_before_add_to_cart_form', 'countdown' );

和javascript代码：

jQuery(function($){
"use strict";

    $('.countdown-counter').each( function() {
        var to = $(this).attr("countdown");
        var thisis = $(this);
        var parent = $(this).parent();
        var countDownDate = new Date(to).getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            if ( days<10 ) {
                var days = '0' + days;
            }
            if ( hours<10 ) {
                var hours = '0' + hours;
            }
            if ( minutes<10 ) {
                var minutes = '0' + minutes;
            }
            if ( seconds<10 ) {
                var seconds = '0' + seconds;
            }

            if ( days == 0 ) {
                var days = '';
            } else {
                days += ' : '
            }

            var html = days + hours + " : " + minutes + " : " + seconds;
            thisis.html(html);

            if (distance < 0) {
                clearInterval(x);
                parent.css("display", "none");
            }
        }, 1000);
        thisis.removeAttr("countdown");
    });
});