<!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
</head>
<body>
<div class="b_page" id="wrapper">
<div class="container" id="header">
<div class="pad-box cont620" id="logo">
<a href="http://{NET_DOMAIN}/">
<img src="{ASSETS_IMAGES_PATH}/logo_mod.png" style="margin-TOP: 4px;margin-left: 7px;">
</a></div>
<div style="text-align: center;width: 720px;">
<!-- Контакты --><br />
<div style="left: -10px;position:relative;top: -5px;"><h1 style="font-size: 20px;">Распродажа!!!</h1><h2 style="font-size: 16px;">скидки <span style="font-size:20px">30%</span> на все товары!</h2></div>
<h2 style="position: absolute;
left: 448px;
top: 52px;
font-size: 12px;">до конца акции осталось: </h2>
<br />
<!-- Обратный отсчет с автообнулением! -->
<span id="clockJS"></span>
<script language="JavaScript" type="text/javascript">
TargetDate = "10/20/2011 8:59 PM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "<span class='countdown_schet'>%%D%%:%%H%%:%%M%%:%%S%%</span>";
FinishMessage = "Time's Up";
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return s;
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("clockJS").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("clockJS").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
1
Проблема Со Скриптом
Автор Serenkiy, 20 окт. 2011 21:27
Сообщений в теме: 36
#1
Serenkiy
-
- Пользователи
-
- 25 сообщений
Пользователь
Отправлено 20 Октябрь 2011 - 21:27
Хочу сделать обратный счётчик с обнулением (каждые 3 дня), чтобы не нужно было снова и снова вставлять дату! Попытался сделать, но не получилось... сайт modavsumke.ru. Баннер в самом верху. Если не трудно, помогите! вот фрагмент html файла:
#2
Vaccina
-
- Модераторы
-
- 24 353 сообщений
Активный участник
Отправлено 21 Октябрь 2011 - 09:14
Не совсем поняла вашу проблему. На вашем сайте блок отображается, обратный отсчет идет. Пожалуйста, объясните подробнее.
#3
Serenkiy
-
- Пользователи
-
- 25 сообщений
Пользователь
Отправлено 22 Октябрь 2011 - 16:27
Vaccina (21 Октябрь 2011 - 09:14) писал:
Не совсем поняла вашу проблему. На вашем сайте блок отображается, обратный отсчет идет. Пожалуйста, объясните подробнее.
#4
Vaccina
-
- Модераторы
-
- 24 353 сообщений
Активный участник
Отправлено 24 Октябрь 2011 - 14:30
Думаю проблему можно решить только используя cookies браузера.
Попробуйте использовать
так же вам понадобиться добавить библиотеку http://saintist.ru/2.../jquery-cookie/
добавьте её в шаблоне "HTML" перед подключением файла main.js
Попробуйте использовать
<script language="JavaScript" type="text/javascript">
if($.cookie('target_date').length) {
TargetDate = $.cookie('target_date');
}
else {
TargetDate = new Date();
$.cookie('target_date', TargetDate);
}
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "<span class='countdown_schet'>%%D%%:%%H%%:%%M%%:%%S%%</span>";
FinishMessage = "Time's Up";
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return s;
}
function CountBack(secs) {
if (secs < 100) {
var new_date = new Date();
$.cookie('target_date', new_date.setDate(new_date.getDate() + 3));
//document.getElementById("clockJS").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("clockJS").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
</script>
так же вам понадобиться добавить библиотеку http://saintist.ru/2.../jquery-cookie/
добавьте её в шаблоне "HTML" перед подключением файла main.js
#5 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 13 Май 2013 - 20:36
Vaccina (21 Октябрь 2011 - 09:14) писал:
Не совсем поняла вашу проблему. На вашем сайте блок отображается, обратный отсчет идет. Пожалуйста, объясните подробнее.
Подскажите, возможно ли ставить счетчик не на все товары, а на некоторые категории?
Хочется поставить его как на картинке
Прикрепленные изображения
#6
Vaccina
-
- Модераторы
-
- 24 353 сообщений
Активный участник
Отправлено 14 Май 2013 - 05:31
Для этого необходимо устанавливать код счетчика в шаблон Товары в необходимом вам месте.
Чтобы счетчик появлялся в конкретном товаре необходимо счетчик обернуть в условие:
Чтобы счетчик появлялся в конкретном товаре необходимо счетчик обернуть в условие:
{% IF GOODS_NAME=Название товара %}код счетчика{% ENDIF %}
#7 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 09:28
Vaccina (14 Май 2013 - 05:31) писал:
Для этого необходимо устанавливать код счетчика в шаблон Товары в необходимом вам месте.
Чтобы счетчик появлялся в конкретном товаре необходимо счетчик обернуть в условие:
Чтобы счетчик появлялся в конкретном товаре необходимо счетчик обернуть в условие:
{% IF GOODS_NAME=Название товара %}код счетчика{% ENDIF %}Поняла. Возможно ли обернуть в условие целую категорию? Я бы хотела, чтобы эта категория была со счетчиком, то есть он должен быть в каждом товаре этой категории
#8
miyako
-
- Модератоpы
-
- 5 372 сообщений
Активный участник
Отправлено 14 Май 2013 - 10:18
Наталья C. (14 Май 2013 - 09:28) писал:
Поняла. Возможно ли обернуть в условие целую категорию? Я бы хотела, чтобы эта категория была со счетчиком, то есть он должен быть в каждом товаре этой категории
Вы хотите чтобы счетчик отображался в Карточке товара определенной категории или в определенной Категории у каждого товара?
#9 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 10:26
miyako (14 Май 2013 - 10:18) писал:
Вы хотите чтобы счетчик отображался в Карточке товара определенной категории или в определенной Категории у каждого товара?
В каждом товаре категории "Ювелирные флешки" должен быть счетчик. Он не должен отображаться в каталоге, а только при заходе в конкретный товар.
Как на картинке
Прикрепленные изображения
#10
miyako
-
- Модератоpы
-
- 5 372 сообщений
Активный участник
Отправлено 14 Май 2013 - 10:58
Наталья C. (14 Май 2013 - 10:26) писал:
В каждом товаре категории "Ювелирные флешки" должен быть счетчик. Он не должен отображаться в каталоге, а только при заходе в конкретный товар.
Как на картинке
Как на картинке
Найдите в шаблоне Товар код:
<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable">
<div rel="true" class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>Товар есть в наличии</div>
<div rel="false" class="available-false" {% IF GOODS_MOD_REST_VALUE>0 %}style="display:none;"{% ENDIF %}>Товара нет в наличии</div>
</div>
и после него вставьте такой код:
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Название категории %} код счетчика {% ENDIF %}
{% ENDFOR %}
То есть для категории "Ювелирные флешки" код будет такой:
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %} код счетчика {% ENDIF %}
{% ENDFOR %}
#11 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 11:58
miyako (14 Май 2013 - 10:58) писал:
Найдите в шаблоне Товар код:
То есть для категории "Ювелирные флешки" код будет такой:
<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable">
<div rel="true" class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>Товар есть в наличии</div>
<div rel="false" class="available-false" {% IF GOODS_MOD_REST_VALUE>0 %}style="display:none;"{% ENDIF %}>Товара нет в наличии</div>
</div>
и после него вставьте такой код:
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Название категории %} код счетчика {% ENDIF %}
{% ENDFOR %}
То есть для категории "Ювелирные флешки" код будет такой:
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %} код счетчика {% ENDIF %}
{% ENDFOR %}
Поняла мои действия для шаблона "Товар".
Теперь есть 3 вопроса:
1) Куда именно мне нужно вставить код, чтобы он встал в место на картинке? Специально сделала в фотошопе для наглядности.
2) Также код должен встать вместе с картинкой "тележки" и надписью. Ее я загрузила на сайте в "Файлы"
Возможно ли счет вставить на саму картинку? Чтобы получилось в точности как во вложении.
3) Как мне в этом коде прописать условие, чтобы он обновлялся сам снова на 24 часа? То есть мне нужен "вечный таймер на 24 часа", чтобы мне не приходилось каждый день его корректировать.
<script language="JavaScript">
TargetDate = "10/13/2011 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции осталось:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
Прикрепленные изображения
#12
miyako
-
- Модератоpы
-
- 5 372 сообщений
Активный участник
Отправлено 14 Май 2013 - 13:01
Наталья C. (14 Май 2013 - 11:58) писал:
Поняла мои действия для шаблона "Товар".
Теперь есть 3 вопроса:
1) Куда именно мне нужно вставить код, чтобы он встал в место на картинке? Специально сделала в фотошопе для наглядности.
2) Также код должен встать вместе с картинкой "тележки" и надписью. Ее я загрузила на сайте в "Файлы"
Возможно ли счет вставить на саму картинку? Чтобы получилось в точности как во вложении.
3) Как мне в этом коде прописать условие, чтобы он обновлялся сам снова на 24 часа? То есть мне нужен "вечный таймер на 24 часа", чтобы мне не приходилось каждый день его корректировать.
<script language="JavaScript">
TargetDate = "10/13/2011 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции осталось:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
Теперь есть 3 вопроса:
1) Куда именно мне нужно вставить код, чтобы он встал в место на картинке? Специально сделала в фотошопе для наглядности.
2) Также код должен встать вместе с картинкой "тележки" и надписью. Ее я загрузила на сайте в "Файлы"
Возможно ли счет вставить на саму картинку? Чтобы получилось в точности как во вложении.
3) Как мне в этом коде прописать условие, чтобы он обновлялся сам снова на 24 часа? То есть мне нужен "вечный таймер на 24 часа", чтобы мне не приходилось каждый день его корректировать.
<script language="JavaScript">
TargetDate = "10/13/2011 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции осталось:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
Найдите в шаблоне Товар код:
<td class="goodsDataFormSubmitButton">
<a class="more-link" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">В корзину</a><br /><br />
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
{% IFNOT SETTINGS_COMPARE_DISABLE %}
<a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
<a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
{% ENDIF %}
{% ENDIF %}
и после него вставьте код:
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Название категории %}
<div style="font-weight:bold;"> Скидка закончится через:
<img src="путь до изображения" />
код скрипта
</div>
{% ENDIF %}
{% ENDFOR %}
#13 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 14:38
miyako (14 Май 2013 - 13:01) писал:
Найдите в шаблоне Товар код:
<td class="goodsDataFormSubmitButton">
<a class="more-link" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">В корзину</a><br /><br />
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
{% IFNOT SETTINGS_COMPARE_DISABLE %}
<a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
<a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
{% ENDIF %}
{% ENDIF %}
и после него вставьте код:
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Название категории %}
<div style="font-weight:bold;"> Скидка закончится через:
<img src="путь до изображения" />
код скрипта
</div>
{% ENDIF %}
{% ENDFOR %}
Не совсем получилось.
Тележка после надписи и выше, чем надо. Посмотрите, пожалуйста.
Счетчик вообще не отобразился ((
Надо, чтобы было как на картинке.
Код шаблона "Товар" прикладываю.
И про счетчик: как мне его исправить, чтобы он был "вечный" и автоматически при обнулении заводился на 24 часа?
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %} <script language="JavaScript">
TargetDate = "05/20/2013 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
</div>
{% ENDIF %}
{% ENDFOR %}
</td>
<td class="goodsDataFormSubmitButton">
<a class="more-link" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">В корзину</a><br /><br />
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
{% IFNOT SETTINGS_COMPARE_DISABLE %}
<a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
<a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
{% ENDIF %}
{% ENDIF %}
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %}
<div style="font-weight:bold;"> До конца акции:
<img src="http://design.raduis...ka2-1.png?9992" />
<script language="JavaScript">
TargetDate = "05/20/2013 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
</div>
</div>
{% ENDIF %}
{% ENDFOR %}
</td>
</tr>
Прикрепленные изображения
#14 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 14:53
Наталья C. (14 Май 2013 - 14:38) писал:
Не совсем получилось.
Тележка после надписи и выше, чем надо. Посмотрите, пожалуйста.
Счетчик вообще не отобразился ((
Надо, чтобы было как на картинке.
Код шаблона "Товар" прикладываю.
И про счетчик: как мне его исправить, чтобы он был "вечный" и автоматически при обнулении заводился на 24 часа?
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %} <script language="JavaScript">
TargetDate = "05/20/2013 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
</div>
{% ENDIF %}
{% ENDFOR %}
</td>
<td class="goodsDataFormSubmitButton">
<a class="more-link" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">В корзину</a><br /><br />
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
{% IFNOT SETTINGS_COMPARE_DISABLE %}
<a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
<a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
{% ENDIF %}
{% ENDIF %}
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %}
<div style="font-weight:bold;"> До конца акции:
<img src="http://design.raduis...ka2-1.png?9992" />
<script language="JavaScript">
TargetDate = "05/20/2013 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
</div>
</div>
{% ENDIF %}
{% ENDFOR %}
</td>
</tr>
Тележка после надписи и выше, чем надо. Посмотрите, пожалуйста.
Счетчик вообще не отобразился ((
Надо, чтобы было как на картинке.
Код шаблона "Товар" прикладываю.
И про счетчик: как мне его исправить, чтобы он был "вечный" и автоматически при обнулении заводился на 24 часа?
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %} <script language="JavaScript">
TargetDate = "05/20/2013 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
</div>
{% ENDIF %}
{% ENDFOR %}
</td>
<td class="goodsDataFormSubmitButton">
<a class="more-link" onclick="$('.goodsDataForm').submit(); return false;" title="Положить «{GOODS_NAME}» в корзину" href="#">В корзину</a><br /><br />
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
{% IF TARIFF_FEATURE_GOODS_COMPARE %}
<!-- Если не выключен модуль сравнения товаров, то покажем кнопку сравнения товаров -->
{% IFNOT SETTINGS_COMPARE_DISABLE %}
<a class="goodsDataCompareButton add" {% IF GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_ADD_URL}?return_to={CURRENT_URL | urlencode}" title="Добавить «{GOODS_NAME}» к списку сравнения с другими товарами" href="#" >Добавить к сравнению</a>
<a class="goodsDataCompareButton delete" {% IFNOT GOODS_MOD_IS_HAS_IN_COMPARE_LIST %}style="display:none;"{% ENDIF %} rel="{COMPARE_DELETE_URL}?return_to={CURRENT_URL | urlencode}" title="Убрать «{GOODS_NAME}» из списка сравнения с другими товарами" href="#" >Убрать из сравнения</a>
{% ENDIF %}
{% ENDIF %}
{% FOR upper_navigation %}
{% IF upper_navigation.NAME=Ювелирные флешки %}
<div style="font-weight:bold;"> До конца акции:
<img src="http://design.raduis...ka2-1.png?9992" />
<script language="JavaScript">
TargetDate = "05/20/2013 0:00 AM";
BackColor = "";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = false;
DisplayFormat = "<div style='font-size: 18px; text-align: center;'> <em>До конца акции:</em> %%D%% дн. %%H%% ч. %%M%% мин. и %%S%% сек.<br/>Спешите сделать заказ!</div>";
FinishMessage ="Акция окончилась !";
</script><script language="JavaScript" src="http://scripts.hashe...n.js"></script>
</div>
</div>
{% ENDIF %}
{% ENDFOR %}
</td>
</tr>
И еще: возможно ли прописать условие, чтобы тележка, надпись и счетчик появлялись только тогда, когда на товар есть скидка?
Спасибо!
#15
miyako
-
- Модератоpы
-
- 5 372 сообщений
Активный участник
Отправлено 14 Май 2013 - 15:12
Наталья C. (14 Май 2013 - 14:53) писал:
И еще: возможно ли прописать условие, чтобы тележка, надпись и счетчик появлялись только тогда, когда на товар есть скидка?
Спасибо!
Спасибо!
Вы некорректно подключили скрипт.
Вместо кода:
<script language="JavaScript" src="http://scripts.hashe...n.js"></script>
Добавьте код:
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
#16 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 15:46
miyako (14 Май 2013 - 15:12) писал:
Вы некорректно подключили скрипт.
Вместо кода:
<script language="JavaScript" src="http://scripts.hashe...n.js"></script>
Добавьте код:
Вместо кода:
<script language="JavaScript" src="http://scripts.hashe...n.js"></script>
Добавьте код:
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
Исправила. Счетчик появился, но он совсем не такой, как должен быть.
И тележка на место не вернулась.
Очень некрасиво получилось (
Помогите настроить.
И возможно ли прописать условие, чтобы тележка и счетчик появлялись только тогда, когда есть скидка?
Прикрепленные изображения
#17 Гость_Наталья C._*
Гость_Наталья C._*
-
- Гости
Отправлено 14 Май 2013 - 19:34
Наталья C. (14 Май 2013 - 15:46) писал:
Исправила. Счетчик появился, но он совсем не такой, как должен быть.
И тележка на место не вернулась.
Очень некрасиво получилось (
Помогите настроить.
И возможно ли прописать условие, чтобы тележка и счетчик появлялись только тогда, когда есть скидка?
И тележка на место не вернулась.
Очень некрасиво получилось (
Помогите настроить.
И возможно ли прописать условие, чтобы тележка и счетчик появлялись только тогда, когда есть скидка?
Откатила назад "такую красоту"
Нашла нужный таймер, теперь вопросы по его установке:
В инструкции сказано, что необходимо сделать:
1) в папке js имеются 2 файла, которые нужно подключить к сайту примерно таким образом. Ваш путь к файлам может быть другим.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Куда мне этот код вставить? И эти 2 js файла нужно просто в "Файлы" загрузить через Редактор тем?
2) Правильно ли я понимаю, что стили мне нужно вставить в main.ccs?
* {
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
position: relative;
background: #fff url(./i/bg.png);
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
font: normal 1em/1.2em Tahoma, Arial, Helvetica, sans-serif;
min-width: 970px;
color: #333;
}
.container{
padding-top: 100px;
width: 94%;
max-width: 1300px;
margin: 0 auto;
}
.time{
display: block;
margin: 0 auto;
padding: 20px 0 50px;
position: relative;
text-align: center;
width: 49%;
}
.time *{vertical-align: top;}
.time ins,
.time .clock{
position: relative;
top: 10px;
width: 40px;
height: 55px;
display: inline-block;
*display: inline;
zoom: 1;
background: transparent url(i/sprites.png) no-repeat -260px -154px;
}
.time .clock{margin-right: 7px;}
.time ins{width: 10px;}
.time ins{background-position: -300px -154px;}
.time .etitle{
position: absolute;
width: 110px;
text-align: center;
left: 50%;
margin-left: -47px;
top: 55px;
line-height: 30px;
}
.etitle-1{font-size: 1.6em;}
.etitle-2{
font-size: 1.37em;
padding-top: .1em;
}
.etitle-3{
font-size: 1.12em;
padding-top: .2em;
}
.etitle-4{
font-size: .87em;
padding-top: .3em;
}
.c-block{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 18px 0 3px;
padding: 4px 0 40px 3px;
position: relative;
background: transparent url(i/sprites.png) no-repeat -260px 0;
}
.c-block:before{
content: '';
position: absolute;
left: 100%;
top: 0;
width: 31px;
background: transparent url(i/sprites.png) no-repeat 100% -77px;
height: 77px;
}
.bl-inner{
position: relative;
margin-right: -10px;
height: 48px;
background: transparent url(i/sprites.png) no-repeat -5px -48px;
}
.bl-inner span{
display: none;
font-size: 46px;
color: #fff;
line-height: 46px;
margin-left: 2px;
}
.bl-inner:before{
content: '';
position: absolute;
left: 100%;
top: 0;
width: 3px;
background: transparent url(i/sprites.png) no-repeat -122px -48px;
height: 48px;
}
.c-block-1{width: 20px;}
.c-block-2{width: 45px;}
.c-block-3{width: 70px;}
3) А это куда вставить?
@import url(http://fonts.googlea...=latin,cyrillic);
footer {
background-color: #111111;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
font: 14px/1.3 'Philosopher',Arial,sans-serif;
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}
footer h2 {
color: #EEEEEE;
font-size: 14px;
font-weight: normal;
width: 540px;
text-align:center;
}
Архив на всякий случай приложила. Таймер нашла здесь http://serblog.ru/kr...cheta-na-jquery
4) Таймер имеет свою картинку в виде часов, поэтому "тележка" уже не нужна.
Заранее спасибо за помощь.
Прикрепленные файлы
-
timer.zip 54,88К
114 Количество загрузок:
#18
Vaccina
-
- Модераторы
-
- 24 353 сообщений
Активный участник
Отправлено 15 Май 2013 - 02:19
1. Вам необходимо загрузить файлы в разделе редактора тем, а вставить данные строки в шаблон "HTML", так же как вставляется файл main.js
2. Да, только не вставляйте стили
3. Это вам вставлять не нужно.
2. Да, только не вставляйте стили
* {
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
position: relative;
background: #fff url(./i/bg.png);
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
font: normal 1em/1.2em Tahoma, Arial, Helvetica, sans-serif;
min-width: 970px;
color: #333;
}
.container{
padding-top: 100px;
width: 94%;
max-width: 1300px;
margin: 0 auto;
}
3. Это вам вставлять не нужно.
#19
Aukvels
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 27 Август 2013 - 17:37
Здравствуйте. Тоже пытался установить этот таймер.
Делал все по инструкции на сайте и по совету выше.
Вставил его в блок акций на странице товара. Отсчет не идет, даже цифр нету и на сайте ошибка JS.
Что я сделал:
в html вставил код
Поскольку еще один файл main.js загрузить не удалось, я все скопировал из него в уже существующий файл main.js (код ниже)
В таблицу стилей main.css скопировал код
В товар под кодом
Дописал код
Так же после всего проделанного возникли проблемы со слайдером - перестал отображаться в мозиле и опере. может быть тут какой то конфликт?
Буду очень благодарен за любую подсказку.
Делал все по инструкции на сайте и по совету выше.
Вставил его в блок акций на странице товара. Отсчет не идет, даже цифр нету и на сайте ошибка JS.
Что я сделал:
в html вставил код
<!-- Скрипты магазина -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}script.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.js"></script>
<script>
var currentyear=new Date().getFullYear();
var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 1 ;
var christmas="january 1, "+thischristmasyear+" 0:0:00";
var currentTime=new Date();
var targetdate=new Date(christmas);
var timediff=(targetdate-currentTime)/1000;
var oneMinute=60;
var oneHour=60*60;
var oneDay=60*60*24;
var dayfield=Math.floor(timediff/oneDay);
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));
$(function(){
$('.c-block:eq(0) .bl-inner span').text(dayfield);
$('.c-block:eq(1) .bl-inner span').text(hourfield);
$('.c-block:eq(2) .bl-inner span').text(minutefield);
$('.c-block:eq(3) .bl-inner span').text(secondfield);
});
</script>
</head>
Поскольку еще один файл main.js загрузить не удалось, я все скопировал из него в уже существующий файл main.js (код ниже)
$(function() {
if (document.createElement('canvas').getContext) {
var image = $('<img />').load(function() {
var image = this,
offset_left = 5,
offset_number = 4;
function drawNumberLine(context, position, number, line) {
context.drawImage(image, number * 25, line, 25, 1, position * 25 + offset_left + offset_number, line, 25, 1);
}
function drawNumberBottom(context, position, number) {
context.drawImage(image, number * 25, 25, 25, 23, position * 25 + offset_left + offset_number, 25, 25, 23);
}
function drawNumberTop(context, position, number) {
context.drawImage(image, number * 25, 0, 25, 23, position * 25 + offset_left + offset_number, 0, 25, 23);
}
function cf_draw(from, to, canvas, step) {
var context = canvas.getContext('2d'),
offsets = [
{w: 2, h: -2},
{w: 4, h: -5},
{w: 6, h: -9},
{w: 8, h: -14},
{w: 10, h: -20},
{w: 0, h: 0},
{w: 10, h: -20},
{w: 8, h: -14},
{w: 6, h: -9},
{w: 4, h: -5},
{w: 2, h: -2},
{w: 0, h: 0}
],
width = canvas.width,
nwidth = width + offsets[step].w,
maxscale = nwidth/width,
height = 23,
nheight = height + offsets[step].h,
scale_y = nheight / height,
dig_col = parseInt($(canvas).parents('div.c-block')[0].className.substr(-1), 10);
from = from.toString();
to = to.toString();
while (from.length < dig_col) {from = '0' + from;}
while (to.length < dig_col) {to = '0' + to;}
context.clearRect(0, 0, width, canvas.height);
context.save();
for (var j = 0; j <= to.length - 1; j++) {
drawNumberTop(context, j, to[j]);
}
if (step == 11) {
for (var j = 0; j <= to.length - 1; j++) {
drawNumberBottom(context, j, to[j]);
}
return;
}
for (var j = 0; j <= from.length - 1; j++) {
drawNumberBottom(context, j, from[j]);
}
// draw bg
context.drawImage(image, 0, 96 + step * 48, width - 5, 48, 0, 0, width - 5, 48);
context.drawImage(image, 125, 96 + step * 48, 4, 48, width - 5, 0, 5, 48);
for (var i = 0; i < 24; i++) {
if (step < 5) {
context.setTransform(maxscale - (maxscale - 1) * i / 23, 0, 0, scale_y, -(nwidth - width) / 2 * (1 - i / 23), -offsets[step].h);
for (var j = 0; j <= from.length - 1; j++) {
drawNumberLine(context, j, from[j], i);
}
}
if (step > 5) {
context.setTransform(1 + (maxscale - 1) * i / 23, 0, 0, scale_y, -(nwidth - width) / 2 * (i / 23), -offsets[step].h);
for (var j = 0; j <= to.length - 1; j++) {
drawNumberLine(context, j, to[j], 25+i);
}
}
context.restore();
}
context.setTransform(1, 0, 0, 1, 0, 0);
// draw blick
context.drawImage(image, 130, 96 + step * 48, width - 5, 48, 0, 0, width - 5, 48);
context.drawImage(image, 255, 96 + step * 48, 4, 48, width -5, 0, 5, 48);
}
function cf_animate(from, to, canvas, step) {
cf_draw(from, to, canvas, step);
step ++;
if (step > 11) return;
setTimeout(function() {
cf_animate(from, to, canvas, step);
}, 50 - 20 * step/11);
}
function seconds(from, canvas) {
var to = from - 1;
if (from <= 0) {
to = 59;
// minutes animate
var minutes_from = parseInt($('span', minutes_cnt).text(), 10);
var minutes_to = minutes_from - 1;
if (minutes_from <= 0) {
minutes_to = 59;
// hourses animate
var hourses_from = parseInt($('span', hourses_cnt).text(), 10);
var hourses_to = hourses_from - 1;
if (hourses_from <= 0) {
hourses_to = 23;
var days_from = parseInt($('span', days_cnt).text(), 10);
var days_to = days_from - 1;
if (days_from == 0) {
return;
}
cf_animate(days_from, days_to, $('canvas', days_cnt)[0], 0);
$('span', days_cnt).text(days_to);
}
cf_animate(hourses_from, hourses_to, $('canvas', hourses_cnt)[0], 0);
$('span', hourses_cnt).text(hourses_to);
}
cf_animate(minutes_from, minutes_to, $('canvas', minutes_cnt)[0], 0);
$('span', minutes_cnt).text(minutes_to);
}
cf_animate(from, to, canvas, 0);
from--;
if (from < 0) {from = 59;}
setTimeout(function() {
seconds(from, canvas);
}, 1000);
}
$('div.bl-inner').each(function() {
var canvas = $('<canvas></canvas>').css({
position: 'absolute',
left: -5,
top: 0
}).appendTo(this)[0];
canvas.width = $(this).width() + offset_left * 2 + 3;
canvas.height = $(this).height();
cf_draw(parseInt($('span', this).text(), 10), parseInt($('span', this).text(), 10), canvas, 11);
});
var seconds_cnt = $('div.time .bl-inner:last'),
minutes_cnt = $('div.time .bl-inner:eq(2)'),
hourses_cnt = $('div.time .bl-inner:eq(1)'),
days_cnt = $('div.time .bl-inner:eq(0)');
seconds(parseInt($('span', seconds_cnt).text(), 10), $('canvas', seconds_cnt)[0]);
});
image.attr('src', 'i/sprites.png');
} else {
$('div.bl-inner span').show();
}
});
В таблицу стилей main.css скопировал код
/* ! js таймер */
.time{
display: block;
margin: 0 auto;
padding: 20px 0 50px;
position: relative;
text-align: center;
width: 49%;
}
.time *{vertical-align: top;}
.time ins,
.time .clock{
position: relative;
top: 10px;
width: 40px;
height: 55px;
display: inline-block;
*display: inline;
zoom: 1;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -260px -154px;
}
.time .clock{margin-right: 7px;}
.time ins{width: 10px;}
.time ins{background-position: -300px -154px;}
.time .etitle{
position: absolute;
width: 110px;
text-align: center;
left: 50%;
margin-left: -47px;
top: 55px;
line-height: 30px;
}
.etitle-1{font-size: 1.6em;}
.etitle-2{
font-size: 1.37em;
padding-top: .1em;
}
.etitle-3{
font-size: 1.12em;
padding-top: .2em;
}
.etitle-4{
font-size: .87em;
padding-top: .3em;
}
.c-block{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 18px 0 3px;
padding: 4px 0 40px 3px;
position: relative;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -260px 0;
}
.c-block:before{
content: '';
position: absolute;
left: 100%;
top: 0;
width: 31px;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat 100% -77px;
height: 77px;
}
.bl-inner{
position: relative;
margin-right: -10px;
height: 48px;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -5px -48px;
}
.bl-inner span{
display: none;
font-size: 46px;
color: #fff;
line-height: 46px;
margin-left: 2px;
}
.bl-inner:before{
content: '';
position: absolute;
left: 100%;
top: 0;
width: 3px;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -122px -48px;
height: 48px;
}
.c-block-1{width: 20px;}
.c-block-2{width: 45px;}
.c-block-3{width: 70px;}
В товар под кодом
<!-- Акция на товар -->
<strong>Товар участвует в акции «{GOODS_MOD_MAX_DISCOUNT_CAMPAIGN_NAME}».</strong><br />
По {GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет {GOODS_MOD_MAX_DISCOUNT}%<br />
Дописал код
<!-- Таймер --> <div class="time"> <em class="clock"></em> <div class="c-block c-block-3"><div class="bl-inner"><span>5</span></div> <span class="etitle etitle-1">дней</span></div> <div class="c-block c-block-2"><div class="bl-inner"><span>7</span></div> <span class="etitle etitle-2">часов</span></div> <div class="c-block c-block-2"><div class="bl-inner"><span>12</span></div> <span class="etitle etitle-3">минут</span></div> <div class="c-block c-block-2"><div class="bl-inner"><span>45</span></div> <span class="etitle etitle-4">секунд</span></div> </div> <!--End Таймер -->
Так же после всего проделанного возникли проблемы со слайдером - перестал отображаться в мозиле и опере. может быть тут какой то конфликт?
Буду очень благодарен за любую подсказку.
Прикрепленные изображения
#20
miyako
-
- Модератоpы
-
- 5 372 сообщений
Активный участник
Отправлено 28 Август 2013 - 13:04
Aukvels (27 Август 2013 - 17:37) писал:
Здравствуйте. Тоже пытался установить этот таймер.
Делал все по инструкции на сайте и по совету выше.
Вставил его в блок акций на странице товара. Отсчет не идет, даже цифр нету и на сайте ошибка JS.
Что я сделал:
в html вставил код
Поскольку еще один файл main.js загрузить не удалось, я все скопировал из него в уже существующий файл main.js (код ниже)
В таблицу стилей main.css скопировал код
В товар под кодом
Дописал код
Так же после всего проделанного возникли проблемы со слайдером - перестал отображаться в мозиле и опере. может быть тут какой то конфликт?
Буду очень благодарен за любую подсказку.
Делал все по инструкции на сайте и по совету выше.
Вставил его в блок акций на странице товара. Отсчет не идет, даже цифр нету и на сайте ошибка JS.
Что я сделал:
в html вставил код
<!-- Скрипты магазина -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}script.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.js"></script>
<script>
var currentyear=new Date().getFullYear();
var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 1 ;
var christmas="january 1, "+thischristmasyear+" 0:0:00";
var currentTime=new Date();
var targetdate=new Date(christmas);
var timediff=(targetdate-currentTime)/1000;
var oneMinute=60;
var oneHour=60*60;
var oneDay=60*60*24;
var dayfield=Math.floor(timediff/oneDay);
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));
$(function(){
$('.c-block:eq(0) .bl-inner span').text(dayfield);
$('.c-block:eq(1) .bl-inner span').text(hourfield);
$('.c-block:eq(2) .bl-inner span').text(minutefield);
$('.c-block:eq(3) .bl-inner span').text(secondfield);
});
</script>
</head>
Поскольку еще один файл main.js загрузить не удалось, я все скопировал из него в уже существующий файл main.js (код ниже)
$(function() {
if (document.createElement('canvas').getContext) {
var image = $('<img />').load(function() {
var image = this,
offset_left = 5,
offset_number = 4;
function drawNumberLine(context, position, number, line) {
context.drawImage(image, number * 25, line, 25, 1, position * 25 + offset_left + offset_number, line, 25, 1);
}
function drawNumberBottom(context, position, number) {
context.drawImage(image, number * 25, 25, 25, 23, position * 25 + offset_left + offset_number, 25, 25, 23);
}
function drawNumberTop(context, position, number) {
context.drawImage(image, number * 25, 0, 25, 23, position * 25 + offset_left + offset_number, 0, 25, 23);
}
function cf_draw(from, to, canvas, step) {
var context = canvas.getContext('2d'),
offsets = [
{w: 2, h: -2},
{w: 4, h: -5},
{w: 6, h: -9},
{w: 8, h: -14},
{w: 10, h: -20},
{w: 0, h: 0},
{w: 10, h: -20},
{w: 8, h: -14},
{w: 6, h: -9},
{w: 4, h: -5},
{w: 2, h: -2},
{w: 0, h: 0}
],
width = canvas.width,
nwidth = width + offsets[step].w,
maxscale = nwidth/width,
height = 23,
nheight = height + offsets[step].h,
scale_y = nheight / height,
dig_col = parseInt($(canvas).parents('div.c-block')[0].className.substr(-1), 10);
from = from.toString();
to = to.toString();
while (from.length < dig_col) {from = '0' + from;}
while (to.length < dig_col) {to = '0' + to;}
context.clearRect(0, 0, width, canvas.height);
context.save();
for (var j = 0; j <= to.length - 1; j++) {
drawNumberTop(context, j, to[j]);
}
if (step == 11) {
for (var j = 0; j <= to.length - 1; j++) {
drawNumberBottom(context, j, to[j]);
}
return;
}
for (var j = 0; j <= from.length - 1; j++) {
drawNumberBottom(context, j, from[j]);
}
// draw bg
context.drawImage(image, 0, 96 + step * 48, width - 5, 48, 0, 0, width - 5, 48);
context.drawImage(image, 125, 96 + step * 48, 4, 48, width - 5, 0, 5, 48);
for (var i = 0; i < 24; i++) {
if (step < 5) {
context.setTransform(maxscale - (maxscale - 1) * i / 23, 0, 0, scale_y, -(nwidth - width) / 2 * (1 - i / 23), -offsets[step].h);
for (var j = 0; j <= from.length - 1; j++) {
drawNumberLine(context, j, from[j], i);
}
}
if (step > 5) {
context.setTransform(1 + (maxscale - 1) * i / 23, 0, 0, scale_y, -(nwidth - width) / 2 * (i / 23), -offsets[step].h);
for (var j = 0; j <= to.length - 1; j++) {
drawNumberLine(context, j, to[j], 25+i);
}
}
context.restore();
}
context.setTransform(1, 0, 0, 1, 0, 0);
// draw blick
context.drawImage(image, 130, 96 + step * 48, width - 5, 48, 0, 0, width - 5, 48);
context.drawImage(image, 255, 96 + step * 48, 4, 48, width -5, 0, 5, 48);
}
function cf_animate(from, to, canvas, step) {
cf_draw(from, to, canvas, step);
step ++;
if (step > 11) return;
setTimeout(function() {
cf_animate(from, to, canvas, step);
}, 50 - 20 * step/11);
}
function seconds(from, canvas) {
var to = from - 1;
if (from <= 0) {
to = 59;
// minutes animate
var minutes_from = parseInt($('span', minutes_cnt).text(), 10);
var minutes_to = minutes_from - 1;
if (minutes_from <= 0) {
minutes_to = 59;
// hourses animate
var hourses_from = parseInt($('span', hourses_cnt).text(), 10);
var hourses_to = hourses_from - 1;
if (hourses_from <= 0) {
hourses_to = 23;
var days_from = parseInt($('span', days_cnt).text(), 10);
var days_to = days_from - 1;
if (days_from == 0) {
return;
}
cf_animate(days_from, days_to, $('canvas', days_cnt)[0], 0);
$('span', days_cnt).text(days_to);
}
cf_animate(hourses_from, hourses_to, $('canvas', hourses_cnt)[0], 0);
$('span', hourses_cnt).text(hourses_to);
}
cf_animate(minutes_from, minutes_to, $('canvas', minutes_cnt)[0], 0);
$('span', minutes_cnt).text(minutes_to);
}
cf_animate(from, to, canvas, 0);
from--;
if (from < 0) {from = 59;}
setTimeout(function() {
seconds(from, canvas);
}, 1000);
}
$('div.bl-inner').each(function() {
var canvas = $('<canvas></canvas>').css({
position: 'absolute',
left: -5,
top: 0
}).appendTo(this)[0];
canvas.width = $(this).width() + offset_left * 2 + 3;
canvas.height = $(this).height();
cf_draw(parseInt($('span', this).text(), 10), parseInt($('span', this).text(), 10), canvas, 11);
});
var seconds_cnt = $('div.time .bl-inner:last'),
minutes_cnt = $('div.time .bl-inner:eq(2)'),
hourses_cnt = $('div.time .bl-inner:eq(1)'),
days_cnt = $('div.time .bl-inner:eq(0)');
seconds(parseInt($('span', seconds_cnt).text(), 10), $('canvas', seconds_cnt)[0]);
});
image.attr('src', 'i/sprites.png');
} else {
$('div.bl-inner span').show();
}
});
В таблицу стилей main.css скопировал код
/* ! js таймер */
.time{
display: block;
margin: 0 auto;
padding: 20px 0 50px;
position: relative;
text-align: center;
width: 49%;
}
.time *{vertical-align: top;}
.time ins,
.time .clock{
position: relative;
top: 10px;
width: 40px;
height: 55px;
display: inline-block;
*display: inline;
zoom: 1;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -260px -154px;
}
.time .clock{margin-right: 7px;}
.time ins{width: 10px;}
.time ins{background-position: -300px -154px;}
.time .etitle{
position: absolute;
width: 110px;
text-align: center;
left: 50%;
margin-left: -47px;
top: 55px;
line-height: 30px;
}
.etitle-1{font-size: 1.6em;}
.etitle-2{
font-size: 1.37em;
padding-top: .1em;
}
.etitle-3{
font-size: 1.12em;
padding-top: .2em;
}
.etitle-4{
font-size: .87em;
padding-top: .3em;
}
.c-block{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 18px 0 3px;
padding: 4px 0 40px 3px;
position: relative;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -260px 0;
}
.c-block:before{
content: '';
position: absolute;
left: 100%;
top: 0;
width: 31px;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat 100% -77px;
height: 77px;
}
.bl-inner{
position: relative;
margin-right: -10px;
height: 48px;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -5px -48px;
}
.bl-inner span{
display: none;
font-size: 46px;
color: #fff;
line-height: 46px;
margin-left: 2px;
}
.bl-inner:before{
content: '';
position: absolute;
left: 100%;
top: 0;
width: 3px;
background: transparent url({ASSETS_IMAGES_PATH}sprites.png) no-repeat -122px -48px;
height: 48px;
}
.c-block-1{width: 20px;}
.c-block-2{width: 45px;}
.c-block-3{width: 70px;}
В товар под кодом
<!-- Акция на товар -->
<strong>Товар участвует в акции «{GOODS_MOD_MAX_DISCOUNT_CAMPAIGN_NAME}».</strong><br />
По {GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет {GOODS_MOD_MAX_DISCOUNT}%<br />
Дописал код
<!-- Таймер --> <div class="time"> <em class="clock"></em> <div class="c-block c-block-3"><div class="bl-inner"><span>5</span></div> <span class="etitle etitle-1">дней</span></div> <div class="c-block c-block-2"><div class="bl-inner"><span>7</span></div> <span class="etitle etitle-2">часов</span></div> <div class="c-block c-block-2"><div class="bl-inner"><span>12</span></div> <span class="etitle etitle-3">минут</span></div> <div class="c-block c-block-2"><div class="bl-inner"><span>45</span></div> <span class="etitle etitle-4">секунд</span></div> </div> <!--End Таймер -->
Так же после всего проделанного возникли проблемы со слайдером - перестал отображаться в мозиле и опере. может быть тут какой то конфликт?
Буду очень благодарен за любую подсказку.
Немного поправлю Ваш код Выше -
1) Найдите код в шаблоне HTML -
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.js"></script>
и удалите. У Вас уже загружен он.2) Удалите код -
<script type="text/javascript" src="{ASSETS_JS_PATH}script.js"></script>
3) В файле main.js найдите код -
image.attr('src', 'i/sprites.png');
и вместо кода -i/sprites.png
укажите путь до изображения sprites.png, но не {ASSETS_IMAGES_PATH}sprites.png
Загрузите sprites.png в раздел Сайт- Файлы и скопируйте путь до изображения, сгенирированной системой.
4) Сохраните изменения. Очистите кэш. И откройте в новой вкладке.
Прикрепленные изображения
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных
