Как отобразить обратный отсчет таймера из статического блока

Question

Как отобразить обратный отсчет таймера из статического блока

Я хочу отобразить обратный отсчет таймера на ДОМАШНЕЙ странице, как баннер.

Я нашел вопрос Обратный отсчет таймера на странице просмотра продукта, но я не знаю, как использовать его для домашней страницы.

Куда мне поместить этот код и как его использовать?:

PHP-код:

<?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:

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;
    }

Для получения дополнительной информации я использую Magento CE 1.9.2.4 и Ultimo с темой Infortis.

1

javascript magento-1.9 home

Author: Community, 2017-02-08

Source

4 answers

Создайте файл .phtml в своей теме.

Путь будет следующим:

app/design/frontend/YourPackage/YourTheme/template/yourphtml.phtml

И вставьте этот HTML- и PHP-код туда.

И в блоке cms напишите приведенный ниже код.

{{block type="core/template" template="yourphtml.phtml"}}

И ниже запишите свой код JavaScript в теге script.

2

Author: Murtuza Zabuawala, 2017-02-08 11:56:17

Решение 1:

В вашей теме добавьте файл local.xml по адресу:

App/design/frontend/Your-Package/Your-Theme/layout/local.xml

Добавьте к нему следующий код:

 <?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>

Добавьте файл шаблона в

Приложение/дизайн/интерфейс/Ваш пакет/Ваша тема/шаблон/обратный отсчет/обратный отсчет.phtml

Решение 2:

Также вы можете добавить непосредственно из администратора cms → страницы → домашняя страница . Добавьте приведенный ниже код.

{{block type='core/template' name='uniquename' template='countdown/countdown.phtml'}}

Добавить файл шаблона в

Приложение/дизайн/интерфейс/Ваш пакет/Ваша тема/шаблон/обратный отсчет/обратный отсчет.phtml

Добавьте свой код в указанный выше файл и очистите кэш.

1

Author: Prashant Valanda, 2020-06-15 08:30:17

Вам следует создать .phtml файл, подобный:

app/design/frontend/package/theme/template/countdown/countdown.phtml

Затем поместите свой код в файл countdown.phtml. После этого вы объявляете это в local.xml вот так:

<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>

Этот XML-файл отобразит ваш обратный отсчет после хлебной крошки.

1

Author: PЯINCƏ, 2017-02-08 12:10:50

score 2 · Accepted Answer

Скопируйте и вставьте это в блок cms. Просто измените dt = new Date("2017-02-9 09:30:51"); в соответствии с вашими требованиями.

<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>