Главная → Как вставить элемент «Таймер» в виджет

Как вставить элемент «Таймер» в виджет

Разберем, как можно сделать в Convead виджет с таймером обратного отсчета. Выглядеть он может примерно так:

Чтобы реализовать такой таймер, нужно добавить на виджет блок <HTML>:

Теперь в этот блок нужно вставить код в зависимости от того, какой вы хотите таймер. Чаще всего наши клиенты используют один из двух таймеров:

  1. Единый таймер для всех посетителей на несколько дней в течение которых работает какая-то акция. Или «До Нового Года осталось…».
  2. Персональный таймер для каждого посетителя на несколько минут/часов в течение которых он может воспользоваться промокодом.

Ниже приведены коды для обоих вариантов:

HTML-код единого таймера до определенной даты

В коде задается дата, до которой показывается таймер обратного отсчета. Когда дата наступает, высвечивается надпись «Акция завершена». Скопируйте код таймера и вставьте его в HTML блок:

<div class="cnv_timer" style="text-align: center; font-size: 20px;" data-time-end="2019-05-19 23:59:59" data-message="Акция завершена"></div>
<script>
var snv_timer = function() {
  var b_timer = document.querySelectorAll('.cnv_timer');
  var d_format = function(v) {
    return parseInt(v) <= 9 ? '0'+v : v;
  }
  var update = function() {
    for(i=0; i < b_timer.length; i++)
    {
      var b_el = b_timer[i];
      var time_end = new Date(b_el.dataset.timeEnd.replace(/(\d+)-(\d+)-(\d+)/, '$2/$3/$1'));
      var time_real = (new Date());
      if (time_end < time_real)
      {
        b_el.innerHTML = b_el.dataset.message;
      }
      else
      {
        var s = time_end.getTime() - time_real.getTime();
        s = parseInt(s / 1000);
        var d = parseInt(s / 86400);
        s -= d * 86400;
        var h = parseInt(s / 3600);
        s -= h * 3600;
        var m = parseInt(s / 60);
        s -= m * 60;
        b_el.innerHTML = d + ' д. ' + d_format(h) + ':' + d_format(m) + ':' + d_format(s);
      }
    }
    setTimeout(function() { if (b_timer.length > 0) update(); }, 1000);
  }
  update();
}
snv_timer();
</script>

HTML-код уникального таймера для каждого посетителя

Этот таймер будет при каждом открытии начинать отсчитывать 100 секунд. Когда 100 секунд истекут, пользователь увидит надпись «Акция завершена». Скопируйте код таймера и вставьте его в HTML блок:

<div class="cnv_timer" style="text-align: center; font-size: 20px;" data-seconds="100" data-message="Акция завершена"></div>
<script>
var snv_timer = function() {
  var b_timer = document.querySelectorAll('.cnv_timer');
  var d_format = function(v) {
    return parseInt(v) <= 9 ? '0'+v : v;
  }
  var update = function() {
    for(i=0; i < b_timer.length; i++)
    {
      var b_el = b_timer[i];
      if (!b_el.dataset.current_mseconds) b_el.dataset.current_mseconds = b_el.dataset.seconds * 1000;
      var time_end = b_el.dataset.current_mseconds;
      if (time_end < 0)
      {
        b_el.innerHTML = b_el.dataset.message;
      }
      else
      {
        var s = time_end;
        s = parseInt(s / 1000);
        var d = parseInt(s / 86400);
        s -= d * 86400;
        var h = parseInt(s / 3600);
        s -= h * 3600;
        var m = parseInt(s / 60);
        s -= m * 60;
        b_el.innerHTML = d_format(h) + ':' + d_format(m) + ':' + d_format(s);
        time_end = time_end - 1000;
        b_el.dataset.current_mseconds = time_end;
      }
    }
    setTimeout(function() { if (b_timer.length > 0) update(); }, 1000);
  }
  update();
}
snv_timer();
</script>

Не пугайтесь, что вместо счетчика в редакторе вы видите HTML-код. Чтобы увидеть, как выглядит счетчик – воспользуйтесь предпросмотром.

Настройка таймера

Вы можете отредактировать дату и время до которого будет работать виджет, а также подправить размер, цвет и стиль текста. Для этого потребуются базовые знания HTML и твердая рука. Стиль текста, дату и время окончания таймера можно подредактировать в самой верхней части HTML-кода:

Вы можете сделать любой таймер по аналогии с этими примерами. Ограничением тут является только ваша фантазия!