Woocommerce auction live countdown archive

Issue

I want to have a live countdown timer on my archive page/sliders where I count down the auction.

Currently using only PHP but this is not live ofcourse because I need to refresh the page. So I guess the best way would be javascript.

I currently have this code in my functions.php the years/months/days/ours work fine but seconds don't

`

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 ) {
                                    
                                        $today = date("Y-m-d H:i:s");
                                        
                                        $format_date = get_option( 'yith_wcact_general_date_format', 'Y-m-d H:i:s' );
                                        
                                        $format = $format_date . ' ' . $format_time;
                                        
                                        $date = ( date( 'Y-m-d H:i:s', $dateclose ) );                      
                                        
                                        $diff = abs(strtotime($today) - strtotime($date));

                                        $years   = floor($diff / (365*60*60*24)); 
                                        $months  = floor(($diff - $years * 365*60*60*24) / (30*60*60*24)); 
                                        $days    = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
                                        $hours   = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24)/ (60*60)); 
                                        $minuts  = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24 - $hours*60*60)/ 60); 
                                        $seconds = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24 - $hours*60*60 - $minuts*60)); 


                                        if ($today < $date) {
                                            printf("%d dagen, %d uren", $days, $hours);
                                            echo $date;
//                                          printf("%d maanden, %d dagen, %d uren", $months, $days, $hours);
                                        }else{
                                                echo 'Afgelopen';
                                            }                               
                                        
                                    }                    

        }

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

`

I added the shortcode to my grid so each auction gets the ending time.

But now I am struggeling to implement a live times in to this.

Solution

Solution:

Sp the solution I found that I am not very proud of was by calculation the date of the action to the current date with javascript inside the grid where the time should be displayed.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>
  <div class="expiry">[veiling_eind_datum_aftellen]</div>
  <div class="countdown"></div>
</div>

<script>
    
    
    
$(".expiry").each(function() {
  var expiry = new Date($(this).text());
    var options = { month: 'short', day: 'numeric', min: 'numeric' };
    var timeoptions = { timeZone: "UTC", timeZoneName: "short" }
    var veilingdatum = expiry.toLocaleDateString("nl-NL", options);
    var veilingtijd = expiry.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  var selector = $(this)
  var x = setInterval(function() {
var currentDateObj = new Date();
var numberOfMlSeconds = currentDateObj.getTime();
var addMlSeconds = 60 * 60 * 1000;
var now = new Date(numberOfMlSeconds - addMlSeconds);
      var today = new Date();
      var vandaagdatum = today.toLocaleDateString("nl-NL", options);
      
    var distance = expiry - 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);
      
      const collection = document.getElementsByClassName(".expiry");

      if( distance <= 8640000000000  && distance > 86400001  ){
          selector.next(".countdown").html( 'Veiling sluit op ' + veilingdatum + ' om ' + veilingtijd);
      }
//    else if ( distance <= 86400000   && distance > 21600000 ){
      else if ( veilingdatum === vandaagdatum && distance > 18000000 ){
          selector.next(".countdown").html( 'Veiling sluit vandaag om ' + veilingtijd);
      }
//    else if ( distance <= 21600000  && distance > 1 ){
      else if (  distance <= 86400000 && distance > 1 ){
          selector.next(".countdown").html("Veiling sluit over " + hours + ":" + minutes + ":" + seconds ); 
      }
      else if ( distance < 1 ) {
          selector.next(".countdown").html('<p>Veiling gesloten</p>');
      }else{
          selector.next(".countdown").html(distance)
      }
      

  }, 1000);

});

</script>

Answered By - Bent