![](/img/trans.png)
[英]product page shows no products in woocommerce single product page
[英]Countdown timer until product sale ends on WooCommerce single product page
据我所知,我的目标是在产品页面上的“添加到购物车”表单之后添加一个倒计时计时器,该计时器倒计时直到销售结束。
我正在使用 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
}
}
乘以 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 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.