Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


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

Надіслати
Поділитися на інших сайтах


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

Змінено користувачем vise
Надіслати
Поділитися на інших сайтах


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

Змінено користувачем Pafik
Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах


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

Змінено користувачем vise
Надіслати
Поділитися на інших сайтах


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

 

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

 

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

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

Надіслати
Поділитися на інших сайтах


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

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


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

добавить


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

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

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

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

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.