Help with creating a countdown module.

[spk]

Hello! 

 

I've been trying to understand smarty for a while now and I still don't get it.

I'm trying to create a module that will show up in the left column, the module will display a timer that will count down to a specific time.

 

I got my PHP-script, my javascript and the html code that is necessary for this. It works if I run it on a .html page.

The problem now is to get this to work within a .tpl file which I have no clue how to do, I've read alot of threads and tutorials without any success.

 

 

This is my .tpl file:

 

        <script>
            var millis = "12222222";


            function displaytimer(){
                var hours = Math.floor(millis / 36e5),
                    mins = Math.floor((millis % 36e5) / 6e4),
                    secs = Math.floor((millis % 6e4) / 1000);
            if (hours > 0){
                    document.getElementById('count').innerHTML = hours+':'+mins+":"+secs;
                }
            else {
                    document.getElementById('count').innerHTML = mins+":"+secs;
                    var nFilter = document.getElementById('count');
                    nFilter.setAttribute("style", "font-weight:bold;color: #E00;float:left;");
                }
            }


            setInterval(function(){
                millis -= 1000;
                displaytimer();
            }, 1000);
        </script>
<h2 style="margin-bottom:20px;">{l s='Countdown' mod='welcome'}</h2>


            <div id="delivery">
                <p style="float:left;">Time left: </p>
                <p id="count" style="float:left;font-weight:bold;"></p>
            </div>

This shows a module, that is hooked to the left column. The output right now is like this:

Time left: 3:23:41 

3:23:41 = 12222222 (milliseconds)

 

And yes, it counts down as it should.

 

 

I got this PHP-function to get the time: 

 

<?php
$x = time();
$tre = mktime(14);
if ($x < $tre) {
$y = strtotime('today 14:00:00');
}
else {
$y = strtotime('tomorrow 14:00:00');
}
$result = floor(($y - $x) / 60);
$s = $result * 60;
$ms = $s * 1000;
?>

I want to pass the variable $ms to my .tpl-file, how do I do this? Where do I put the script? 

Like this: 

<script>
var millis = "{$ms}";

I've tried the $smarty->assign("ms", $ms) 

But I don't know where to put that code.

 

Thankful for any help! :-)

Edited January 21, 2014 by spk (see edit history)

[vekia]

in module you, in left column hook function you have to add variable to smarty array,

in old ps:

global $smarty;
$smarty->assign('myVariable', $myvariable);

new ps:

$this->smarty->assign('myVariable', $myvariable);

[spk]

 

in module you, in left column hook function you have to add variable to smarty array,

in old ps:

global $smarty;
$smarty->assign('myVariable', $myvariable);

new ps:

$this->smarty->assign('myVariable', $myvariable);

 

I guess 1.4.8.2 is considered old.

 

Okay, where do I put my php-script? The script that collects the time?

 

If:

global $smarty;
$smarty->assign('ms', $ms);

That will assign ms to be an empty variable. Since I dont know where to put the script that gives $ms a value. 

So exactly where goes my PHP-script?

Edited January 21, 2014 by spk (see edit history)

[vekia]

in the same hook, above the code for passing variable to smarty array.

$myVariable - is a php variable with "return" value of your script.

[spk]

in the same hook, above the code for passing variable to smarty array.

$myVariable - is a php variable with "return" value of your script.

 

Alright...

 

This is the "core" php-file, exactly where should I put the php-script?

<?php
if (!defined('_PS_VERSION_'))
exit;
 
class Welcome extends Module
{
 
  public function __construct()
  {
    $this->name = 'welcome';
    $this->tab = 'front_office_features';
    $this->version = '1.0';
    $this->author = 'Niklas Ekstrom';
    $this->secure_key = Tools::encrypt($this->name);
    parent::__construct();
    $this->displayName = $this->l('Welcome Module');
    $this->description = $this->l('Displays a welcome message on left column');
 
  }
 
  public function install()
  {
    if (!parent::install() OR !$this->registerHook('leftColumn'))
      return false;
    return true;
 
  }
 
  public function uninstall()
  {
    if (!parent::uninstall())
      return false;
    return true;
 
  }
   
  public function hookLeftColumn($params)
  {
    return $this->display(__FILE__, 'welcome.tpl');
  } 
} 
 
?>

This is the script im referring to:

<?php
$x = time();
$tre = mktime(14);
if ($x < $tre) {
$y = strtotime('today 14:00:00');
}
else {
$y = strtotime('tomorrow 14:00:00');
}
$result = floor(($y - $x) / 60);
$s = $result * 60;
$ms = $s * 1000;
?>

Edited January 21, 2014 by spk (see edit history)

[vekia]

public function hookLeftColumn($params)
{

$x = time();
$tre = mktime(14);
if ($x < $tre) {
$y = strtotime('today 14:00:00');
}
else {
$y = strtotime('tomorrow 14:00:00');
}
$result = floor(($y - $x) / 60);
$s = $result * 60;
$ms = $s * 1000;

 

 

global $smarty;
$smarty->assign('myVariable', $result);
return $this->display(__FILE__, 'welcome.tpl');
}

[spk]

That fixed it!

 

Thanks alot vekia, how do I mark this as solved?

Edited January 21, 2014 by spk (see edit history)

[vekia]

you're welcome

 

here are instructions:
 

 

 

[sOLVED] Topic
If, after posting a topic, you find a solution to your problem, please indicate it in your post and describe the solution.
Furthermore if you are the author of the topic for which a solution has been found, please edit your topic title to mark it as [sOLVED].

To mark a topic as [solved] :
- Edit the first post of your topic by clicking on the "Edit" button,
- Click on the "Use full editor" button,
- Add the "[solved]" string at the beginning of your topic title and click on the "Submit Modified Post" button.

[spk]

Woho, I'm back to disturb you vekia (or anyone else).

 

It did work great on my localhost server, but it did not work

on my official site.

They are both the same version and the structure of the page is 

almost the same.

 

I didn't use the {literal}{/literal} on my local server but I've tried both on

the official site.

 

If I inspect the javascript, it says that var millis = "3600000", so the smarty variable works fine,

the javascript on the other hand doesn't.

 

Do you see any error here? 

        <script type="text/javascript">
        {literal}
            var millis = "{/literal}{$milliSeconds}{literal}";

            function displaytimer(){
                var hours = Math.floor(millis / 36e5),
                    mins = Math.floor((millis % 36e5) / 6e4),
                    secs = Math.floor((millis % 6e4) / 1000);
            if (hours > 0){
                    document.getElementById('count').innerHTML = hours+':'+mins+":"+secs;
                }
            else {
                    document.getElementById('count').innerHTML = mins+":"+secs;
                    var nFilter = document.getElementById('count');
                    nFilter.setAttribute("style", "font-weight:bold;color: #E00;float:left;");
                }
            }

            setInterval(function(){
                millis -= 1000;
                displaytimer();
            }, 1000);
            {/literal}
        </script>
        <div class="block">
            <h4>{l s='Countdown' mod='welcome'}</h4>
            <div class="block_content" style="padding-top:10px;padding-bottom:5px;padding-left: 4px;">
                <div id="delivery">
                    <p style="float:left;">Tid tills nästa utskick </p>
                    <p id="count" style="float:left;font-weight:bold;"></p>
                </div>
            </div>
        </div>

[vekia]

check browser console while you browsing page on your remote server.

[spk]

Hey, okey.

 

check browser console while you browsing page on your remote server.

 

Uncaught TypeError: Cannot read property 'extset' of undefined 10001813-10001897.js:110

Uncaught SyntaxError: Unexpected end of input (index):1

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

[vekia]

i have no idea from what part of shop these arrors are

are you able to verify it?

[spk]

i have no idea from what part of shop these arrors are

are you able to verify it?

 

I could try to explain it.

 

This error:

Uncaught TypeError: Cannot read property 'extset' of undefined 

Points to this file (line 110):

10001813-10001897.js:110

Which is my jQuery library:

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license

The specific line (110) is: 

this[a])M().R(a,"Deleted",-16E4);else{var f=[],l;for(l in this[a])f.push(l+":"+(""+this[a][l]).replace(/:/g,"").replace(/\|/g," "));f=f.join("|");M().R(a,f,[spam-filter];this.da=function(a,{"undefined"==typeof b?"undefined"==typeof this[a]?this[a]=1:this[a]++:"undefined"==typeof this[a][b]?this[a][b]=1:this[a][b]++};this.ma=function(a){"undefined"==typeof this[a].pv?this[a].pv=0:this[a].pv--};this.ca=function(a){this[a]="convert Deleted"};this.Ba();Cb=this}function K(){return Cb?Cb:new Bb}var Cb=g;function Hb(){if("undefined"!=typeof convert_temp&&convert_temp){"undefined"!=typeof convert_temp.$&&(s=convert_temp.$);"undefined"!=typeof convert_temp.jQuery&&(ba=convert_temp.jQuery);for(var a in convert_temp.data)y[a]=convert_temp.data[a];y.prj.extset||(y.prj.extset={});convert_temp=g;delete convert_temp;y.prj.asoc_domains={};for(var b in y.prj.domains){a=0;for(var c=y.prj.domains[b].length;a<c;a++)y.prj.asoc_domains[y.prj.domains[b][a]]=b[spam-filter]p("convert.$",s);p("convert.jQuery",ba)};var U={},A=g,Ib=0,yb=[],Jb=g,Kb=2500,xa=h,Lb=0,Mb=e;function Nb(){s("script:first").after("<style id='reedge_hide_body' type='text/css' media='all'>body {position:relative;left:-10000px;background-image:none !important;background-color:#fff !important;}</style>");Jb=setTimeout(function(){V()},Kb)}function Ob(){"undefined"!=typeof _conv_domTimeout&&(Kb=_conv_domTimeout);Nb();s(document).ready(function(){xa=e});Lb=(new Date).getTime()}

I also get this warning:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

The weird part is that it works good on my localhost, so I guess there is something that interfere with my Javascript.

 

Edited January 24, 2014 by spk (see edit history)