<!-- Скрипты магазина --> <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
Отправлено 20 Октябрь 2011 - 21:27
#2
Отправлено 21 Октябрь 2011 - 09:14
#3
Отправлено 22 Октябрь 2011 - 16:27
Vaccina (21 Октябрь 2011 - 09:14) писал:
#4
Отправлено 24 Октябрь 2011 - 14:30
Попробуйте использовать
<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._*
Отправлено 13 Май 2013 - 20:36
Vaccina (21 Октябрь 2011 - 09:14) писал:
Подскажите, возможно ли ставить счетчик не на все товары, а на некоторые категории?
Хочется поставить его как на картинке
#6
Отправлено 14 Май 2013 - 05:31
Чтобы счетчик появлялся в конкретном товаре необходимо счетчик обернуть в условие:
{% IF GOODS_NAME=Название товара %}код счетчика{% ENDIF %}
#7 Гость_Наталья C._*
Отправлено 14 Май 2013 - 09:28
Vaccina (14 Май 2013 - 05:31) писал:
Чтобы счетчик появлялся в конкретном товаре необходимо счетчик обернуть в условие:
{% IF GOODS_NAME=Название товара %}код счетчика{% ENDIF %}
Поняла. Возможно ли обернуть в условие целую категорию? Я бы хотела, чтобы эта категория была со счетчиком, то есть он должен быть в каждом товаре этой категории
#8
Отправлено 14 Май 2013 - 10:18
Наталья C. (14 Май 2013 - 09:28) писал:
Вы хотите чтобы счетчик отображался в Карточке товара определенной категории или в определенной Категории у каждого товара?
#9 Гость_Наталья C._*
Отправлено 14 Май 2013 - 10:26
miyako (14 Май 2013 - 10:18) писал:
В каждом товаре категории "Ювелирные флешки" должен быть счетчик. Он не должен отображаться в каталоге, а только при заходе в конкретный товар.
Как на картинке
#10
Отправлено 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._*
Отправлено 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
Отправлено 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>
Найдите в шаблоне Товар код:
<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._*
Отправлено 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._*
Отправлено 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>
И еще: возможно ли прописать условие, чтобы тележка, надпись и счетчик появлялись только тогда, когда на товар есть скидка?
Спасибо!
#15
Отправлено 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._*
Отправлено 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.hashemian.com/js/countdown.js"></script>
Исправила. Счетчик появился, но он совсем не такой, как должен быть.
И тележка на место не вернулась.
Очень некрасиво получилось (
Помогите настроить.
И возможно ли прописать условие, чтобы тележка и счетчик появлялись только тогда, когда есть скидка?
#17 Гость_Наталья 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) Таймер имеет свою картинку в виде часов, поэтому "тележка" уже не нужна.
Заранее спасибо за помощь.
Прикрепленные файлы
#18
Отправлено 15 Май 2013 - 02:19
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
Отправлено 27 Август 2013 - 17:37
Делал все по инструкции на сайте и по совету выше.
Вставил его в блок акций на странице товара. Отсчет не идет, даже цифр нету и на сайте ошибка 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
Отправлено 28 Август 2013 - 13:04
Aukvels (27 Август 2013 - 17:37) писал:
Делал все по инструкции на сайте и по совету выше.
Вставил его в блок акций на странице товара. Отсчет не идет, даже цифр нету и на сайте ошибка 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 анонимных