Как вставить элемент «Таймер» в виджет
Разберем, как можно сделать в Convead виджет с таймером обратного отсчета. Выглядеть он может примерно так:
Чтобы реализовать такой таймер, нужно добавить на виджет блок <HTML>:
Теперь в этот блок нужно вставить код в зависимости от того, какой вы хотите таймер. Чаще всего наши клиенты используют один из двух таймеров:
- Единый таймер для всех посетителей на несколько дней в течение которых работает какая-то акция. Или «До Нового Года осталось…».
- Персональный таймер для каждого посетителя на несколько минут/часов в течение которых он может воспользоваться промокодом.
Ниже приведены коды для обоих вариантов:
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-кода:
Вы можете сделать любой таймер по аналогии с этими примерами. Ограничением тут является только ваша фантазия!