拍卖产品计时器在档案页面中的应用

Question

拍卖产品计时器在单个商店页面上正常工作，我想将其添加到商店存档页面，但它只显示在商店存档的第一个产品上，而不显示其余的产品。

根据WooCommerce单个产品页面上的产品销售结束倒计时器答案代码，这是我的代码尝试：

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' );

问题是什么？

Answer 1

要在商店存档页面中显示每个产品的倒计时器，您需要修改负责渲染商店存档页面的模板文件。以下是您可以实现此目标的示例：

• 打开您的主题的商店存档页面的模板文件（通常命名为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的后缀，为每个产品生成一个唯一的倒计时器。

保存对模板文件的更改，然后商店存档页面上应该显示倒计时器。