Таймер обратного отсчета товара в пути

[Pafik]

Добрый день. Много тем по  поводу таймера. И я почти нашёл что хотел, но не добился желаемого результата, а именно хочу вывести таймер обратного отсчёта для товара который в пути, т.е. : товар в пути будет через и..... 0 : 12 : 02 : 02.     

Я добился этого просто вставив javascript прям в описание товара в исходном коде в редакторе товара. Но всё отображается только при переходе в карточку товара, а из главной когда просматриваешь доступные товары таймер тупо замершый  и не переносятся стили.  Может кто знает куда вписать код. Вот 

<script>
 function updater(d, h, m, s) {
  // День сброса - 27 сентября 2015 года (и далее каждые три дня)
  var baseTime = new Date(2015, 8, 27);
  // Период сброса — 3 дня
  var period = 3*24*60*60*1000;

  function update() {
    var cur = new Date();
    // сколько осталось миллисекунд
    var diff = period - (cur - baseTime) % period;
    // сколько миллисекунд до конца секунды
    var millis = diff % 1000;
    diff = Math.floor(diff/1000);
    // сколько секунд до конца минуты
    var sec = diff % 60;
    if(sec < 10) sec = "0"+sec;
    diff = Math.floor(diff/60);
    // сколько минут до конца часа
    var min = diff % 60;
    if(min < 10) min = "0"+min;
    diff = Math.floor(diff/60);
    // сколько часов до конца дня
    var hours = diff % 24;
    if(hours < 10) hours = "0"+hours;
    var days = Math.floor(diff / 24);
    d.innerHTML = days;
    h.innerHTML = hours;
    m.innerHTML = min;
    s.innerHTML = sec;
  
    // следующий раз вызываем себя, когда закончится текущая секунда
    setTimeout(update, millis);
  }
  setTimeout(update, 0);
}

updater(document.getElementById("days"),
 document.getElementById("hours"), document.getElementById("minutes"),
 document.getElementById("seconds"));
    </script>

//Вывод таймера

<div class="timer">
<p>Товар в пути. Будет через </p>
  <span id="days">0</span>
  <span id="delimiter">:</span>
  <span id="hours">07</span>
  <span id="delimiter">:</span>
  <span id="minutes">08</span>
  <span id="delimiter">:</span>
  <span id="seconds">25</span>
</div>

 

Или может есть чё попроще и я придумываю велосипед по новой как я это могу) 

 

 

[vise]

Добавить в админку новое поле - дата поставки товара, берем любой таймер, выводим дату в скрипт, выводим скрипт в нужном месте на любой странице где нужно. Можно взять уже готовое поле, например, ups

Змінено 23 листопада 2017 користувачем vise

[Pafik]

Спасибо!!! Вроде понятно. Хотя подробностей не хватает). Огромное спасибо за ответ. Ща буду ковырятся!!!!Отпишусь...

Змінено 23 листопада 2017 користувачем Pafik

[Pafik]

17 часов назад, Pafik сказал:

 

 

Змінено 24 листопада 2017 користувачем Pafik

[Pafik]

17 часов назад, vise сказал:

Добавить в админку новое поле - дата поставки товара, берем любой таймер, выводим дату в скрипт, выводим скрипт в нужном месте на любой странице где нужно. Можно взять уже готовое поле, например, ups

Уважаемый, Vise подскажите новичку. Добавив новые поля я туда могу вписать только текстовое значение. Как туда вписать таймер? получается дополнительно есть два файла timer.js и timer.html. Как их туда добавить???

[vise]

Ну возьмите готовое поле upc, выводим его в карточку товара

в catalog\controller\product\product.php добавить

 $data['upc'] = $product_info['upc']; 

после 

$data['model'] = $product_info['model'];

потом открываем

catalog/view/theme/ваш_шаблон/template/product/product.tpl и вставляем туда нужный скрипт таймера, их в гугле полно. Соот-но туда где в скрипте выводится дата окончания таймера выводим

 <?php echo $upc; ?>

в админке заполните поле в таком же формате как и в скрипте, все довольно просто...

 

Вот первый попавшийся скрипт таймера, адаптировал под тату из админки. Добавить его в product.tpl

<script>
window.onload = function() // дожидаемся загрузки страницы
{
     initializeTimer(); // вызываем функцию инициализации таймера
}


function initializeTimer() {
	var endDate = new Date(<?php echo $upc; ?>); // получаем дату истечения таймера
	var currentDate = new Date(); // получаем текущую дату
	var seconds = (endDate-currentDate) / 1000; // определяем количество секунд до истечения таймера
	if (seconds > 0) {
		var minutes = seconds/60; // определяем количество минут до истечения таймера
		var hours = minutes/60; // определяем количество часов до истечения таймера
		minutes = (hours - Math.floor(hours)) * 60; // подсчитываем кол-во оставшихся минут в текущем часе
		hours = Math.floor(hours); // целое количество часов до истечения таймера
		seconds = Math.floor((minutes - Math.floor(minutes)) * 60); // подсчитываем кол-во оставшихся секунд в текущей минуте
		minutes = Math.floor(minutes); // округляем до целого кол-во оставшихся минут в текущем часе
		
		setTimePage(hours,minutes,seconds); // выставляем начальные значения таймера
		
		function secOut() {
		  if (seconds == 0) { // если секунду закончились то
			  if (minutes == 0) { // если минуты закончились то
				  if (hours == 0) { // если часы закончились то
					  showMessage(timerId); // выводим сообщение об окончании отсчета
				  }
				  else {
					  hours--; // уменьшаем кол-во часов
					  minutes = 59; // обновляем минуты 
					  seconds = 59; // обновляем секунды
				  }
			  }
			  else {
				  minutes--; // уменьшаем кол-во минут
				  seconds = 59; // обновляем секунды
			  }
		  }
		  else {
			  seconds--; // уменьшаем кол-во секунд
		  }
		  setTimePage(hours,minutes,seconds); // обновляем значения таймера на странице
		}
		timerId = setInterval(secOut, 1000) // устанавливаем вызов функции через каждую секунду
	}
	else {
		alert("Установленая дата уже прошла");
	}
}

function setTimePage(h,m,s) { // функция выставления таймера на странице
	var element = document.getElementById("timer"); // находим элемент с id = timer
	element.innerHTML = "Часы:"+h+"<br>Минуты:"+m+"<br>Секунды:"+s; // выставляем новые значения таймеру на странице
}

function showMessage(timerId) { // функция, вызываемая по истчению времени
	alert("Время истекло!");
	clearInterval(timerId); // останавливаем вызов функции через каждую секунду
}


</script>

Чтобы вывести его, нужно вставить вот эту строку в нужное место в product.tpl

	<div id="timer">
	</div>

В админке поле upc заполнить в формате 2020,1,1

Змінено 24 листопада 2017 користувачем vise

[Pafik]

2 часа назад, vise сказал:

 

В админке заполните поле в таком же формате как и в скрипте, все довольно просто...

 

Ура тикают. Я уже начал злится на себя. Но и не зря. Надо было обновлять в менеджере дополнений))) Крутяк! Спасибо огромное. Вы ГениЙ. Единственное, что хотел ещё изначально, вывести это всё ещё и на главной :

вставляю в captione в price   <span class="upc_upc"><?php echo $product['upc']; ?></span> но ничего( 

[vise]

catalog/controller/product/category.php после

'name'        => $result['name'],

добавить

'upc'         => $result['upc'],

тогда ваш код отработает

[Pafik]

2 часа назад, vise сказал:

catalog/controller/product/category.php после

'name'        => $result['name'],

добавить

'upc'         => $result['upc'],

тогда ваш код отработает

Дико извиняюсь, но результата 0 ! Может я не там прописываю или не в том файле? 

[vise]

так вы в скидку выводите

[Pafik]

В 24.11.2017 в 15:50, vise сказал:

так вы в скидку выводите

Не получается. Помогите нубу добить задачку(((

[Pafik]

Оно как бы и показывает дату. Но часики не тикают(

[vise]

скорей сего выводите просто upc, а движок не понимает что от него хотят, т.к нет цикла

[Pafik]

Только что, vise сказал:

скорей сего выводите просто upc, а движок не понимает что от него хотят, т.к нет цикла

Так как решить данную задачку?