WooCommerce單品頁面上的產品銷售結束倒計時

Question

據我所知，我的目標是在產品頁面上的“添加到購物車”表單之后添加一個倒計時計時器，該計時器倒計時直到銷售結束。

我正在使用 w3schools 網站上的“ How TO - JavaScript 倒數計時器”，我編寫了使用 $ _sale_price_dates_to $sale_date = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );

我的問題是：產品頁面上沒有顯示任何內容。 沒有通知，沒有錯誤，錯誤日志中沒有任何內容。 我相信這是問題所在，但我不確定： var countDownDate = <?php $sale_date; ?> 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
    }
}

Answer 1

乘以 1000，因為Date()需要毫秒

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 echo $sale_date; ?> * 1000;

            // 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
    }
}
add_action( 'woocommerce_after_add_to_cart_form', 'sales_timer_countdown_product', 20 );