Выводим таймер обратного отсчета для продукта в WooCommerce

Задача такая — выводить для различных товаров таймер обратного отсчета, когда заканчиваются скидки или акции на данный товар.

Поставленную задачу мы решим с помощью кастомного поля с датой, подробнее в этой статье, и с помощью простого таймера на JS, который мы уже стилизуем под свой дизайн, таймер возьмем из этой статьи.

Вот такой будет код таймера:

<?php
/*
Timer for Products For SALE
*/
?>

<?php if( get_field('end_time') ) : ?>

  <div class="hurry-up">
    <?php
    $product_id = get_the_ID();
    $product = wc_get_product($product_id);
    ?>
    Hurry! Only <?php echo $product->get_stock_quantity(); ?> left in stock.
  </div>

  <div id="clockdiv" class="clockdiv">
    <div>
      <span class="days"></span>
      <div class="smalltext">days</div>
    </div>
    <div>
      <span class="hours"></span>
      <div class="smalltext">hours</div>
    </div>
    <div>
      <span class="minutes"></span>
      <div class="smalltext">min</div>
    </div>
    <div>
      <span class="seconds"></span>
      <div class="smalltext">sec</div>
    </div>
  </div>

  <div class="end-time hidden">
    <?php 
    $end_time = strtotime(get_field('end_time')); 
    $dateformatstring = "F d Y";
    echo date_i18n($dateformatstring, $end_time);
    ?>
  </div>

<?php endif; ?>

Такой получается скрипт в JS:

(function myTimerSale() {
  function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
      'total': t,
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  }

  function initializeClock(id, endtime) { 
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock() {
      var t = getTimeRemaining(endtime);

      daysSpan.innerHTML = t.days;
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

      if (t.total <= 0) {
        clearInterval(timeinterval);
      }
    }

    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
  }

  var deadline = $('.end-time').text();
  initializeClock('clockdiv', deadline);
})();

Такой получается внешний вид:

Выводим несколько таймеров на странице

Выводим несколько таймеров на странице, суть в том, что в таком случае, нельзя делать привязку к ID, нужно привязываться к классам.

Файл php будет выглядеть так:

<?php
/*
Timer for Products For SALE
*/
?>

<?php if( get_field('end_time') ) : ?>

  <?php 
  $date_now = strtotime( date('Y-m-d H:i:s') );
  $end_time = strtotime(get_field('end_time')); 
  $dateformatstring = "F d Y";
  $deadline = date_i18n($dateformatstring, $end_time);
  ?>

  <?php if( $end_time > $date_now ) : ?>

    <div class="hurry-up">
      <?php
      $product_id = get_the_ID();
      $product = wc_get_product($product_id);
      ?>
      Hurry! Only <?php echo $product->get_stock_quantity(); ?> left in stock.
    </div>

    <div class="clockdiv" data-date="<?php echo $deadline; ?>">
      <div>
        <span class="days"></span>
        <div class="smalltext">days</div>
      </div>
      <div>
        <span class="hours"></span>
        <div class="smalltext">hours</div>
      </div>
      <div>
        <span class="minutes"></span>
        <div class="smalltext">min</div>
      </div>
      <div>
        <span class="seconds"></span>
        <div class="smalltext">sec</div>
      </div>
    </div>

  <?php endif; ?>
<?php endif; ?>

JS будет выглядеть так:

(function() {
  function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
      total: t,
      days: days,
      hours: hours,
      minutes: minutes,
      seconds: seconds
    };
  }

  function initializeClock(el) {
    $(el).each(function() {
      var endtime = $(this).attr("data-date");
      var clock = $(this);
      var daysSpan = clock.find(".days");
      var hoursSpan = clock.find(".hours");
      var minutesSpan = clock.find(".minutes");
      var secondsSpan = clock.find(".seconds");

      function updateClock() {
        var t = getTimeRemaining(endtime);

        daysSpan.text(t.days);
        hoursSpan.text(("0" + t.hours).slice(-2));
        minutesSpan.text(("0" + t.minutes).slice(-2));
        secondsSpan.text(("0" + t.seconds).slice(-2));

        if (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }

      updateClock();
      var timeinterval = setInterval(updateClock, 1000);
    });
  }

  initializeClock(".clockdiv");
})();

Получается такой код:

See the Pen a few timers by Denis (@deniscreative) on CodePen.