Задача такая – выводить для различных товаров таймер обратного отсчета, когда заканчиваются скидки или акции на данный товар.
Поставленную задачу мы решим с помощью кастомного поля с датой, подробнее в этой статье, и с помощью простого таймера на 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.0