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

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

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

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

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

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

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

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

<div class="cnv_timer" style="text-align: center; font-size: 20px;" data-time-end="2023-10-01 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>

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

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

Скопируйте код таймера и вставьте его в HTML блок:

<div class="cnv_timer1" style="text-align: center; font-size: 20px;" data-seconds="100" data-message="Акция завершена"> </div> 
<script> 
 var snv_timer = function(elemClassName) {var b_timer = document.querySelectorAll('.' + elemClassName); var d_format = function(v) { return parseInt(v) <= 9 ? '0'+v : v; }; 
                             console.log('HERE', b_timer);
                             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('cnv_timer1');
   </script>

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

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

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

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