javascript - 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);
});

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

标签： javascriptphpjquerywordpresswoocommerce

Answer 1

感谢 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");
    });
});