Compteur multiples dans boucle foreach

Eléphanteau du PHP | 11 Messages

12 juin 2023, 11:53

Bonjour à tous,

Je vais essayé d'être clair...

Je souhaite insérer un compte à rebours indépendant pour chaque annonce dans une boucle.

Actuellement, le compteur s'affiche avec le même temps pour toutes les annonces.

Je suppose qu'il faut que j'incrémente l'id d'une div afin qu'elles soient indépendantes les unes des autres.

Merci d'avance à vous

Le site: https://encheres24.ch

function in_progress_auction_card_func() {

    /* Récupération des annonces demarrées*/
    $args = array
    (
        'post_type'        => 'vehica_car',
        'posts_per_page'   => -1,
        'cache_results'  => false,
        'update_post_meta_cache' => false, 
        'update_post_term_cache' => false,
        'tax_query' => array(
            array (
                'taxonomy' => 'vehica_19636',
                'field' => 'slug',
                'terms' => array( 'voitures', 'motocycles', 'vehicules-utilitaires', 'autres-annonces'),
            )
        ), 
        'meta_query' => array( 
            array(
                'key' => 'auction_status',
                'value' => 'demarrer', 
                'compare' => 'IN', 
            ),           
        ),
       
    );

    $in_progress_query = new WP_Query( $args );
    $annonces_en_cours = $in_progress_query->posts;    
    
    ob_start(); 
       

        foreach($annonces_en_cours as $annonce)
        {
            // Info date
            date_default_timezone_set('Europe/Paris');
            $start_date_auction = get_post_meta($annonce->ID, 'vehica_20836', true);
            $start_hour_auction = get_post_meta($annonce->ID, 'vehica_20856', true);
            $start_date_hour_auction = $start_date_auction . ' ' . $start_hour_auction;

            $end_date_auction_str = strtotime($start_date_hour_auction . '+ 1 days');
            $end_date_auction = date('d.m.Y H:i:s', $end_date_auction_str);

            $now = date('j.m.Y H:i:s');        
            
        } ?>

        <script>
            <?php 
            $dateTime = strtotime($end_date_auction);
            $getDateTime = date("F d, Y H:i:s", $dateTime);
            ?>
            var countDownDate = new Date("<?php echo "$getDateTime"; ?>").getTime();
            // Update the count down every 1 second
            var x = setInterval(function() {
                var now = new Date().getTime();
                // Find the distance between now an the count down date
                var distance = countDownDate - now;                
                // Time calculations for days, hours, minutes and seconds
                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);
                // Output the result in an element with id="counter"11
                if(distance > 0)
                {
                    $('.afs_card_cardcounter').html(
                    "<div class='afs_counter_card_number'>" +
                        "<li>" + "<i class='fas fa-clock'></i> " + "</li>" +
                        "<li>" + hours + "<span>" + " H" + "</span>" + "</li>" +
                        "<li>" + minutes + "<span>" + " Min " + "</span>" + "</li>" +
                        "<li>" + seconds + "<span>" + " Sec " + "</span>" + "</li>" +
                    "</div>");     
                }
                else
                {
                    $('.afs_card_cardcounter').html(
                    "<div class='afs_counter_card_number'>" +
                        "<li class='afs_counter_ended'>" + "<i class='fas fa-clock'></i> " + "Enchère terminée" + "</li>" +
                    "</div>"
                    );
                }                   
            }, 1000);
        </script>
                    
        <?php

        echo '<div class="afs_card_cardcounter afs_card_cardcounter_in_progress_counter_background"></div>';        

    return ob_get_clean();    
    
}

Avatar du membre
Mammouth du PHP | 1564 Messages

12 juin 2023, 23:19

Oui, il te faut attribuer un unique ID à chaque div avec la classe afs_counter_card_number, celle où tu as des <li> à l'intérieur, d'ailleur sà ce sujet, remplace <div class="afs_counter_card_number" par <ul class="afs_counter_card_number, ce sera correct niveau HTML.

Ensuite pour identifier chaque function JavaScript dynamique, il te faut déclarer un tableau. AU lieu de faire :

Code : Tout sélectionner

var x = setInterval(function() {
Déclare en amont x comme tableau :

Code : Tout sélectionner

x = [];
et ensuite, non pas var x = setInterv... mais x[<?= $id_annonce ?>] = setInterv...

tu pourra de ce fait "clear" l'interval pour arrêter le compteur et éviter qu'il aille à l'inverse.

Eléphanteau du PHP | 11 Messages

14 juin 2023, 07:39

Hello,

Je te remercie pour ta réponse, j'ai effectué les changements.

Encore un petite question sur l'incrémentation: Comme tu peux le voir, je pense différencier mes div avec un no.

Cependant, même ainsi les id de div ont le même no...

Je pense que je ne dois pas mettre la variable d'incréments au bon endroit.

Je te remets le code avec l'incrémentation.

Merci encore

Code : Tout sélectionner

function in_progress_auction_card_func() { /* Récupération des annonces demarrées*/ $args = array ( 'post_type' => 'vehica_car', 'posts_per_page' => -1, 'cache_results' => false, 'update_post_meta_cache' => false, 'update_post_term_cache' => false, 'tax_query' => array( array ( 'taxonomy' => 'vehica_19636', 'field' => 'slug', 'terms' => array( 'voitures', 'motocycles', 'vehicules-utilitaires', 'autres-annonces'), ) ), 'meta_query' => array( array( 'key' => 'auction_status', 'value' => 'demarrer', 'compare' => 'IN', ), ), ); $in_progress_query = new WP_Query( $args ); $annonces_en_cours = $in_progress_query->posts; ob_start(); $id_annonce = 1; foreach($annonces_en_cours as $annonce) { // Info date date_default_timezone_set('Europe/Paris'); $start_date_auction = get_post_meta($annonce->ID, 'vehica_20836', true); $start_hour_auction = get_post_meta($annonce->ID, 'vehica_20856', true); $start_date_hour_auction = $start_date_auction . ' ' . $start_hour_auction; $end_date_auction_str = strtotime($start_date_hour_auction . '+ 1 days'); $end_date_auction = date('d.m.Y H:i:s', $end_date_auction_str); $now = date('j.m.Y H:i:s'); $id_annonce++; } ?> <script> <?php $dateTime = strtotime($end_date_auction); $getDateTime = date("F d, Y H:i:s", $dateTime); ?> var countDownDate = new Date("<?php echo "$getDateTime"; ?>").getTime(); // Update the count down every 1 second x = []; x[<?= $id_annonce ?>] = setInterval(function() { var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds 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); // Output the result in an element with id="counter"11 if(distance > 0) { $('.afs_card_cardcounter').html( "<ul class='afs_counter_card_number'>" + "<li>" + "<i class='fas fa-clock'></i> " + "</li>" + "<li>" + hours + "<span>" + " H" + "</span>" + "</li>" + "<li>" + minutes + "<span>" + " Min " + "</span>" + "</li>" + "<li>" + seconds + "<span>" + " Sec " + "</span>" + "</li>" + "</ul>"); } else { $('.afs_card_cardcounter').html( "<ul class='afs_counter_card_number'>" + "<li class='afs_counter_ended'>" + "<i class='fas fa-clock'></i> " + "Enchère terminée" + "</li>" + "</ul>" ); } }, 1000); </script> <?php echo '<div id="afs_counter_' . $id_annonce . '" class="afs_card_cardcounter afs_card_cardcounter_in_progress_counter_background"></div>'; return ob_get_clean(); }

Avatar du membre
Mammouth du PHP | 1564 Messages

14 juin 2023, 08:51

C'est normal, tu n'a rien fait à ce niveau là :

Code : Tout sélectionner

"<ul class='afs_counter_card_number'>" +
Je t'ai indiqué la marche à suivre (de div à ul : OK mais tu na pas mis un ID unique ici pour les différencier) :
Oui, il te faut attribuer un unique ID à chaque div avec la classe afs_counter_card_number
Par contre, c'est incorrect de redéclarer x dans ton foreach !!!

Il te faut le déclarer avant ta boucle ! sinon = il se remet à zéro car tu le vide en faisant x = [];

Il te faut déclarer correctement ta variable, soit avec let, soit avec var, pas seulement "x =" mais "var x = "

Tu devrais y arriver avec toutes ces indications :wink:

Eléphanteau du PHP | 11 Messages

14 juin 2023, 20:37

Hello,

Merci pour ta patience, effectivement j'avais mal lu ta réponse.

J'ai effectuer le changement.

Par contre, si je sors $id_annonce++ de la boucle en faisant :
$id = 1;
$id_annonce = $id++;

j'ai un no de div identique quand même partout (le numéro 2)...

Je sais que je ne suis pas loin.... 😅

Mais là je bloque..... 🙏

Avatar du membre
Mammouth du PHP | 1564 Messages

14 juin 2023, 22:35

J'ai pas dit de modifier ton $id_annonce, rien à voir, je te dis simplement de déclarer ta variable JS "x" en dehors de ta boucle, sinon tu la redéclare à chaque itération.

En dehors de ta boucle PHP, tu te débouille pour mettre en mémoire tampon (donc juste après ob_start()) une balise <script> avec la déclaration de x ;)