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

Question

正如我所学习的那样，我的目标是在产品页面上的添加到购物车表单之后添加一个倒数计时器，该计时器倒计时销售结束之前的剩余时间。

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

我的问题是：产品页面上没有显示任何内容。没有通知，没有错误，错误日志中没有任何内容。我相信这就是问题所在，但我不确定：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 );