倒数计时器,直到产品销售在WooCommerce单个产品页面上结束

时间:2020-06-28 16:18:53

标签: javascript php wordpress woocommerce countdown

据我所知,我的目标是在产品页面上的“添加到购物车”表单后添加一个倒数计时器,以倒计时直到销售结束为止的时间。

我正在使用w3schools网站上的“ How TO - JavaScript Countdown Timer”,并且编写了使用_sale_price_dates_to获取$sale_date = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );的代码

我的问题是这个: 产品页面上没有任何显示。没有通知,没有错误,并且错误日志中也没有任何内容。我相信这是问题所在,但我不确定:var countDownDate = <?php $sale_date; ?>

到目前为止的代码:

add_action( 'woocommerce_after_add_to_cart_form', 'sales_timer_countdown_product', 20 );
function sales_timer_countdown_product() {  

    global $product;

    $sale_date = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );
        if (!empty( $sale_date ) ) { ?>

    <script>
        // Set the date we're counting down to
        var countDownDate = <?php $sale_date; ?>

        // 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);
            
        // Output the result in an element with id="saleend"
        document.getElementById("saleend").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";
            
        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("saleend").innerHTML = "The sale for this product has EXPIRED";
        }
        }, 1000);
    </script>

    <!-- this is where the countdown is displayed -->
    <p id="saleend" style="color:red"></p>
    <?php
    }
}

1 个答案:

答案 0 :(得分:0)

乘以1000,因为public static DateTime ToClientDateTime(this DateTime value, IHttpContextAccessor httpContextAccessor) { var offset = // use httpContextAccessor return value.AddHours(offset ?? 0); } 需要毫秒

Date()