How to display a timer countdown from a static block
-
06-10-2020 - |
문제
I want to display a timer countdown on a HOME page like a banner.
I found the question Timer countdown in product view page, but I don't know how to use it for the home page.
Where do I put this code and how do I use them?:
PHP code:
<?php $end_datetime='your end date and time';
$date = date("Y/m/d H:i:s", strtotime($end_datetime));
$endstr = date(strtotime($date));
$nowstr = Mage::getModel('core/date')->timestamp(time());
$now = date('Y/m/d H:i:s', $nowstr); ?>
<span id="countdown" class"countdown">
<script>getTimer('<?php echo $date?>', '<?php echo $now ?>')</script>
</span>
JavaScript code:
function getTimer(dt, no)
{
var end = new Date(dt);
var now_date = new Date(no);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
flag_time = true;
timer = '';
setInterval(function(){showRemaining();}, 1000);
function showRemaining()
{
var date = no;
var now = new Date(date);
var de= now.getTime();
if (flag_time) {
timer = de;
}
var d = new Date(timer);
currentYear = d.getFullYear();
month = d.getMonth() + 1;
var currentDate = d.getDate();
currentDate = currentDate < 10 ? '0'+currentDate : currentDate;
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
minutes = minutes < 10 ? '0'+minutes : minutes;
seconds = seconds < 10 ? '0'+seconds : seconds;
var strTime = hours + ':' + minutes+ ':' + seconds;
timer = timer + 1000;
var now_time = currentYear + '/' + month + '/' + currentDate + ' ' + strTime;
var now = new Date(now_time);
var distance = end - now;
if (distance < 0) {
if (distance > -3)
{
location.reload(true);
return;
};
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'Completed';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
if (days < 10)
{days = '0' + days;}
if (hours < 10)
{hours = '0' + hours;}
if (minutes < 10)
{ minutes = '0' + minutes;}
if (seconds < 10)
{seconds = '0' + seconds;}
if (days==00)
{
dytext = '';
}
else if(days==1)
{
dytext = '<span class="countdown-text">'+ days +' Day </span>';
}
else
{
dytext = '<span class="countdown-text">'+ days +' Days </span>';
}
if (hours==00) {
hrtext='';
}
else {
hrtext = '<span class="countdown-text">'+ hours + '</span>'+ ":";
}
if (minutes==00)
{
mintext='';
}
else {
mintext = '<span class="countdown-text">'+ minutes +'</span>'+ ":";
}
sectext = '<span class="countdown-text">'+ seconds +'</span>';
document.getElementById('countdown').innerHTML = dytext + hrtext + mintext + sectext;
flag_time = false;
}
For more information, I'm using Magento CE 1.9.2.4 and Ultimo with the Infortis theme.
해결책
Copy paste this in the cms block. Just change dt = new Date("2017-02-9 09:30:51");
as your requirement.
<script type="text/javascript">// <![CDATA[
function getTimer()
{
dt = new Date("2017-02-9 09:30:51");
dt = dt.getTime();
no = new Date();
no = no.getTime();
var end = dt;
var now_date = no;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
flag_time = true;
timer = '';
setInterval(function(){showRemaining();}, 1000);
function showRemaining()
{
var date = no;
var now = new Date(date);
var de = now.getTime();
if (flag_time) {
timer = de;
}
var d = new Date(timer);
currentYear = d.getFullYear();
month = d.getMonth() + 1;
var currentDate = d.getDate();
currentDate = currentDate < 10 ? '0'+currentDate : currentDate;
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
minutes = minutes < 10 ? '0'+minutes : minutes;
seconds = seconds < 10 ? '0'+seconds : seconds;
var strTime = hours + ':' + minutes+ ':' + seconds;
timer = timer + 1000;
var now_time = currentYear + '/' + month + '/' + currentDate + ' ' + strTime;
var now = new Date(now_time);
var distance = end - now;
if (distance < 0) {
if (distance > -3)
{
location.reload(true);
return;
};
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'Completed';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
if (days < 10)
{days = '0' + days;}
if (hours < 10)
{hours = '0' + hours;}
if (minutes < 10)
{ minutes = '0' + minutes;}
if (seconds < 10)
{seconds = '0' + seconds;}
if (days==00)
{
dytext = '';
}
else if(days==1)
{
dytext = '<span class="countdown-text">'+ days +' Day </span>';
}
else
{
dytext = '<span class="countdown-text">'+ days +' Days </span>';
}
if(hours==00) {
hrtext='';
}
else {
hrtext = '<span class="countdown-text">'+ hours + '</span>'+ ":";
}
if(minutes==00)
{
mintext='';
}
else {
mintext = '<span class="countdown-text">'+ minutes +'</span>'+ ":";
}
sectext = '<span class="countdown-text">'+ seconds +'</span>';
document.getElementById('countdown').innerHTML = dytext + hrtext + mintext + sectext;
flag_time = false;
}
}
// ]]></script>
<span id="countdown">
<script type="text/javascript">// <![CDATA[
getTimer()
// ]]></script>
</span>
다른 팁
Create a .phtml file in your theme.
The path would be:
app/design/frontend/YourPackage/YourTheme/template/yourphtml.phtml
And paste that HTML and PHP code over there.
And in the cms block write the below code.
{{block type="core/template" template="yourphtml.phtml"}}
And below that write down your JavaScript code in the script
tag.
Solution 1:
In your theme add a local.xml
file at:
app/design/frontend/Your-Package/Your-Theme/layout/local.xml
Add the below code to it:
<?xml version="1.0"?>
<layout version="0.1.0">
<cms_index_index>
<reference name="root">
<block type="core/template" name="anyUniqueName" template="countdown/countdown.phtml" />
</reference>
</cms_index_index>
</layout>
Add a template file at
app/design/frontend/Your-Package/Your-Theme/template/countdown/countdown.phtml
Solution 2:
Also you can add directly from the admin cms → pages → homepage. Add the below code.
{{block type='core/template' name='uniquename' template='countdown/countdown.phtml'}}
Add a template file at
app/design/frontend/Your-Package/Your-Theme/template/countdown/countdown.phtml
Add your code to the above file, and clear the cache.
You should create a .phtml file like:
app/design/frontend/package/theme/template/countdown/countdown.phtml
Then put your code in the countdown.phtml
file. After that you declare it in local.xml like this:
<cms_index_index>
<reference name="root">
<block type="core/template" name="countdown.block" before="content" template="countdown/countdown.phtml" after="breadcrumbs" />
</reference>
</cms_index_index>
This XML will display your countdown after a breadcrumb.