WooCommerce归档页实现拍卖实时倒计时功能技术求助

问题背景 #

需要在WooCommerce商品归档页/商品滑块上为拍卖商品添加实时更新的倒计时器。原PHP实现仅能在页面刷新时计算剩余时间，无法实时更新；且原代码的秒数计算存在问题，现需结合PHP传递数据、JavaScript实现前端实时更新的方案。

解决方案 #

1. 修改PHP短码代码（functions.php） #

原代码直接输出静态计算结果，我们修改为输出包含拍卖结束时间戳的HTML容器，让JavaScript可以读取目标时间并进行实时计算：

function auction_end_date_countdown() {
    global $product;
    $product = apply_filters( 'yith_wcact_get_auction_product', $product );

    ob_start();

    if ( 'auction' === $product->get_type() ) { 
        $dateclose = $product->get_end_date();
        
        if ( $dateclose ) {
            // 获取UTC时间戳，避免时区偏差
            $end_timestamp = strtotime(date('Y-m-d H:i:s', $dateclose));
            $current_timestamp = current_time('timestamp');
            ?>
            <div class="auction-countdown" data-end-timestamp="<?php echo esc_attr($end_timestamp); ?>">
                <?php
                // 初始加载先显示静态内容，避免JS加载延迟
                if ($current_timestamp < $end_timestamp) {
                    $diff = $end_timestamp - $current_timestamp;
                    $days = floor($diff / (60*60*24));
                    $hours = floor(($diff % (60*60*24)) / (60*60));
                    printf("%d dagen, %d uren", $days, $hours);
                } else {
                    echo 'Afgelopen';
                }
                ?>
            </div>
            <?php
        }
    }

    $html = ob_get_clean();
    return $html;
}
add_shortcode( 'veiling_eind_datum_aftellen', 'auction_end_date_countdown' );

2. 添加JavaScript实时更新逻辑 #

将以下代码添加到主题的footer.php（或通过自定义JS插件/主题自定义面板添加）：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有倒计时容器
    const countdownElements = document.querySelectorAll('.auction-countdown');

    function updateCountdown(element) {
        const endTimestamp = parseInt(element.dataset.endTimestamp);
        const now = Math.floor(Date.now() / 1000); // 转换为秒级时间戳
        const diff = endTimestamp - now;

        if (diff <= 0) {
            element.textContent = 'Afgelopen';
            return;
        }

        // 计算剩余时间
        const days = Math.floor(diff / (60 * 60 * 24));
        const hours = Math.floor((diff % (60 * 60 * 24)) / (60 * 60));
        const minutes = Math.floor((diff % (60 * 60)) / 60);
        const seconds = diff % 60;

        // 格式化显示（可按需调整格式）
        element.textContent = `${days} dagen, ${hours} uren, ${minutes} minuten, ${seconds} seconden`;
    }

    // 初始化所有倒计时，每秒更新一次
    countdownElements.forEach(element => {
        updateCountdown(element);
        setInterval(() => updateCountdown(element), 1000);
    });
});

3. 关键说明 #

• 时区处理：使用UTC时间戳传递数据，避免服务器与客户端时区不一致导致的时间偏差
• 初始加载优化：PHP先渲染静态倒计时内容，避免JS未加载时页面空白
• 实时更新：通过setInterval每秒执行一次倒计时计算，实现无刷新实时更新
• 结束状态处理：当剩余时间为0时，自动切换显示“Afgelopen”

内容的提问来源于stack exchange，提问作者Bent