Multiple Countdown for same class div

Question

i have some products which are created through foreach loop. each products has different sale rule Like Percentage Discount, Sale Start and End time.

Now here is my js code in which i pass a variable having end time of sale.

 var saleEndDate = '2019-01-26';
var countDownDate = new Date(saleEndDate).getTime();
var x = setInterval(function() {
  console.log(saleEndDate);

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

  $('.woops_sheduler_timer').html('<span class="days">'+days + "d " +'</span><span class="hours">'+ hours + "h "+'</span><span class="mints">'+ minutes + "m "+'</span><span class="secs">'+ seconds + "s "+'</span>');
                // console.log('abcx');
  if (distance < 0) {
    // clearInterval(x);
    $(".woops_sheduler_timers").html("Sale has been Expired!");
  }
}, 1000);

I want to show different countdown according to sale rule.

Answer 1

lets suppose you have a div which renders dynamic content:

<?php if (!empty($_ruleCollection)): $_productId = $_product->getEntityId() ?>
   <?php if ($block->productInRule($_productId)): $_ruleData = $block->productInRule($_productId) ?>

        <div class="sales">
            <div class="woops_sheduler_timer" id="<?= 'woops_sheduler_timer_'.$_productId; ?>">
                <span></span>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>

Now nicely apply script to the content:

<script type="text/javascript">
        var rulesCollection = <?= json_encode($_ruleCollection); ?>;
                var saleInterval = [];
                $(rulesCollection).each(function (key, value) {

                    applyOnSale(key, value.product_id, value.to_date)
                });


                function applyOnSale(key, productId, saleEndDate)  {

                    var productCounterId = '#woops_sheduler_timer_' + productId;

                    if ($(productCounterId).length) {
                        var countDownDate = new Date(saleEndDate).getTime(),
                            distance, now;
                        saleInterval[key] = setInterval(function() {

                            now = new Date().getTime();

                            distance = countDownDate - now;


                            $(productCounterId).html(
                                '<span class="days">'+getDays(distance) + "d </span>"
                                + '<span class="hours">'+ getHours(distance) + "h </span>"
                                + '<span class="mints">' + getMinutes(distance) + "m </span>"
                                + '<span class="secs">'+ getSeconds(distance) + "s "+'</span>'
                            );

                            if (distance < 0) {
                                clearInterval(saleInterval[key]);
                                $(".woops_sheduler_timers").html("Sale has been Expired!");
                            }
                        }, 1000);
                    }

                };

                function getDays(distance) {
                    return Math.floor(distance / (1000 * 60 * 60 * 24));
                }

                function getHours(distance) {
                    return Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                }

                function getMinutes(distance) {
                    return Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                }

                function getSeconds(distance) {
                    return Math.floor((distance % (1000 * 60)) / 1000);
                }
 </script>

Answer 2

Welcome to SO!

There's a couple of different ways you can do this, which method you choose will depend on preference and what you have in place.

First option is to pass the element you created for the sales item into the function and find the element within that sales item element that has the specified class. For example, you might do something like this:

function startSaleCountdown($item, saleEndDate) {
  const timer = setInterval(() => {
    const diff = saleEndDate.getTime() - Date.now();
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    if (diff <= 0) {
      clearInterval(timer);
      
      $(".woops_sheduler_timers").html("Sale has been Expired!");
    } else {
      $item.find('.woops_scheduler_timer').html(`
        <span class="days">${days}d </span>
        <span class="hours">${hours}h </span>
        <span class="mints">${minutes}m </span>
        <span class="secs">${seconds}s </span>
      `);
    }
  }, 1000);
}

const item = $(`
  <div class="item">
    <p>Sale Item!</p>
    <div class="woops_scheduler_timer"></div>
  </div>
`);

$('body').append(item);

startSaleCountdown(item, new Date(2019, 0, 30));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Alternatively, if you give each sales item a unique id, you can pass that id to the function that starts the countdown.

function startSaleCountdown(itemId, saleEndDate) {
  const timer = setInterval(() => {
    const diff = saleEndDate.getTime() - Date.now();

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    if (diff <= 0) {
      clearInterval(timer);

      $(".woops_sheduler_timers").html("Sale has been Expired!");
    } else {
      $(`#${itemId} .woops_scheduler_timer`).html(`
        <span class="days">${days}d </span>
        <span class="hours">${hours}h </span>
        <span class="mints">${minutes}m </span>
        <span class="secs">${seconds}s </span>
      `);
    }
  }, 1000);
}

const barcodeNumber = 'barcodeNumber';
const id = `item_${barcodeNumber}`;

$('body').append($(`
  <div class="item" id="${id}">
    <p>Sale Item!</p>
    <div class="woops_scheduler_timer"></div>
  </div>
`));

startSaleCountdown(id, new Date(2019, 0, 30));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I use some ES6 syntax for sake my typing, but everything can be converted or transpiled into ES5 or earlier.