Application du minuteur de produits d'enchères dans la page d'archives

Question

Le minuteur des produits d'enchères fonctionne correctement sur une seule page du magasin, je souhaite l'ajouter à la page des archives du magasin, mais il n'apparaît que sur le premier produit des archives du magasin et pas sur le reste.

Basé sur le compte à rebours de fin de vente de produits sur le code de réponse de la page produit unique de WooCommerce, voici ma tentative de code :

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

Quel est le problème ?

Answer 1

Pour afficher un compte à rebours pour chaque produit dans la page d'archives du magasin, vous devez modifier le fichier modèle responsable du rendu de la page d'archives du magasin. Voici des exemples de la façon dont vous pouvez y parvenir :

• Ouvrez le fichier modèle de la page d'archives de la boutique de votre thème (généralement nommé archive-product.php ou taxonomy-product_cat.php).

• Trouvez la pièce qui exécute le cycle du produit. C'est ici que les éléments individuels du produit sont affichés.

• Dans la boucle, recherchez la section dans laquelle vous souhaitez afficher le compte à rebours pour chaque produit (comme le titre du produit, le prix ou la position personnalisée). Ajoutez l'extrait de code suivant :

  <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>

Ce code génère un compte à rebours unique pour chaque produit en utilisant l'ID du produit (get_the_ID()) comme suffixe à la variable et à l'ID de l'élément.

Enregistrez les modifications apportées au fichier modèle et un compte à rebours devrait apparaître sur la page d'archives du magasin.