Pemasa produk lelongan berfungsi dengan baik pada satu halaman kedai, saya ingin menambahkannya pada halaman arkib kedai, tetapi ia hanya muncul pada produk pertama dalam arkib kedai dan bukan yang lain.
Berdasarkan Pemasa Pengiraan Akhir Jualan Produk pada kod jawapan Halaman Produk Tunggal WooCommerce, berikut ialah percubaan kod saya:
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>
// 设置倒计时的日期
var countDownDate = <?php echo $sale_date; ?> * 1000;
// 每1秒更新倒计时
var x = setInterval(function() {
// 获取今天的日期和时间
var now = new Date().getTime();
// 计算现在和倒计时日期之间的距离
var distance = countDownDate - now;
// 计算天、小时、分钟和秒
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);
// 在id为“saleend”的元素中输出结果
document.getElementById("saleend").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// 如果倒计时结束，显示一些文本
if (distance < 0) {
clearInterval(x);
document.getElementById("saleend").innerHTML = "此产品的销售已过期";
}
}, 1000);
</script>
<!-- 这是倒计时显示的位置 -->
<p id="saleend" style="color:red"></p>
<?php
}
} add_shortcode( 'sales_timer_countdown_product', 'sales_timer_countdown_product' );
Apa masalahnya?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk memaparkan pemasa kira detik bagi setiap produk dalam halaman arkib kedai, anda perlu mengubah suai fail templat yang bertanggungjawab untuk memaparkan halaman arkib kedai. Berikut adalah contoh bagaimana anda boleh mencapai ini:
Buka fail templat untuk halaman arkib kedai tema anda (biasanya dinamakan archive-product.php atau taxonomy-product_cat.php).
Cari bahagian yang melaksanakan kitaran produk. Di sinilah item produk individu dipaparkan.
Di dalam gelung, cari bahagian yang anda mahu paparkan pemasa kira detik untuk setiap produk (seperti tajuk produk, harga atau kedudukan tersuai). Tambahkan coretan kod berikut:
<script> // 设置我们要倒计时的日期 var countDownDate<?php echo get_the_ID(); ?> = <?php echo $sale_date; ?> * 1000; // 每1秒更新倒计时 var x<?php echo get_the_ID(); ?> = setInterval(function() { // 获取今天的日期和时间 var now = new Date().getTime(); // 计算现在和倒计时日期之间的距离 var distance = countDownDate<?php echo get_the_ID(); ?> - now; // 计算天、小时、分钟和秒的时间 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); // 在id为“saleend”的元素中输出结果 document.getElementById("saleend-<?php echo get_the_ID(); ?>").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // 如果倒计时结束，写入一些文本 if (distance < 0) { clearInterval(x<?php echo get_the_ID(); ?>); document.getElementById("saleend-<?php echo get_the_ID(); ?>").innerHTML = "该产品的销售已过期"; } }, 1000); </script> <!-- 这是倒计时显示的位置 --> <p id="saleend-<?php echo get_the_ID(); ?>" style="color:red"></p>Kod ini menjana pemasa kira detik yang unik untuk setiap produk dengan menggunakan ID produk (get_the_ID()) sebagai akhiran kepada pembolehubah dan ID elemen.
Simpan perubahan pada fail templat dan pemasa kira detik akan muncul pada halaman arkib kedai.