Heim > Fragen und Antworten > Hauptteil
Der Auktionsprodukt-Timer funktioniert auf einer einzelnen Store-Seite einwandfrei. Ich möchte ihn zur Store-Archivseite hinzufügen, aber er wird nur beim ersten Produkt im Store-Archiv angezeigt und nicht beim Rest.
Basierend auf dem Antwortcode für den Produktverkaufsende-Countdown-Timer auf der WooCommerce-Einzelproduktseite ist hier mein Codeversuch:
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' );
Was ist das Problem?
P粉4137042452023-09-09 09:00:02
要在商店存档页面中显示每个产品的倒计时器,您需要修改负责渲染商店存档页面的模板文件。以下是您可以实现此目标的示例:
打开您的主题的商店存档页面的模板文件(通常命名为archive-product.php或taxonomy-product_cat.php)。
找到执行产品循环的部分。这是显示单个产品项的地方。
在循环内部,找到要为每个产品显示倒计时器的部分(例如产品标题、价格或自定义位置)。添加以下代码片段:
<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>
此代码通过使用产品的ID(get_the_ID())作为变量和元素ID的后缀,为每个产品生成一个唯一的倒计时器。
保存对模板文件的更改,然后商店存档页面上应该显示倒计时器。