Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

Добрый день. Много тем по  поводу таймера. И я почти нашёл что хотел, но не добился желаемого результата, а именно хочу вывести таймер обратного отсчёта для товара который в пути, т.е. : товар в пути будет через и..... 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>

 

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

 

 

Безымянный11.png

Link to post
Share on other sites

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

Edited by vise
Link to post
Share on other sites

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

Edited by Pafik
Link to post
Share on other sites

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

 

 

Edited by Pafik
Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

Ну возьмите готовое поле 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

Edited by vise
Link to post
Share on other sites

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

 

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

 

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

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

Link to post
Share on other sites

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

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

добавить

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

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

Link to post
Share on other sites

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

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


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

добавить


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

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

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

Безымянный11.png

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.