How to pass a smarty variable to a JS

[Zhivko]

I'm trying to implement a countdown module which uses a JS to display remaining special price time.

1) In module.php file I read $special_price->to value and assign it to smarty array

 

$this->context->smarty->assign(array(
'expiry' => $specific_price->to,
));

 

test 1: After reading a lot of topics in various forums and sites I tried to pass it as a global variable

In module.tpl file I want to pass 'expiry' value to JS class

 

<script type="text/javascript">
var priceExpiryDate = "{$expiry}";
</script>

In js class I use it to initialize counter

 

var ts = new Date(priceExpiryDate);
left = Math.floor((ts - (new Date())) / 1000);

This solution works fine with Chrome but it doesn't work with Firefox and IE.

 

I tried to set global variable using alert("{$expiry}") and it doesn't work - it just opens a pop-up message in IE.

 

test 2:

In module.tpl file I set 'expiry value to a hiddent <span>

<span id="expiry_date" style="display:none">{$expiry}</span>

In js class I try to read it using

var ts = $('#expiry_date').text() or var ts = $('#expiry_date').val()

In both text() and val() cases date is not retreived from html.

 

I tried <span class="expiry_date" style="display:none">{$expiry}</span> and var ts = $('span.expiry_date').text() and it doesn't work, too.

 

What am I doing wrong?

[math_php]

Hi zhivko

 

First solution must work and is the good one.

Perhaps your script is loaded before var is added to html ?

 

Does your script wait for document to be ready ?

 

Regards

Edited March 26, 2013 by math_php (see edit history)

[Zhivko]

Hi,

Thanks for your comment. I added a $(document).ready at the beginning of JS and I use solution 1.

 

It didn't solve my problem but I found the reason for incorrect calculation.

It appears that different SQL date formats are handled in IE and non-IE Date object. My date is "2013-04-30 00:00:00" and IE does not support this format.

http://stackoverflow.com/questions/3243546/problem-with-javascript-date-function-in-ie-7-returns-nan

 

Therefore I added a small piece of code to convert SQL date to Date object:

 

var tstr = priceExpiryDate;
//Convert SQL date from string to JS Date object
tstr = tstr.replace(/:| /g,"-");
 var YMDhms = tstr.split("-");
 var sqlDate = new Date();
 sqlDate.setFullYear(parseInt(YMDhms[0]), parseInt(YMDhms[1])-1,
                                                parseInt(YMDhms[2]));
 sqlDate.setHours(parseInt(YMDhms[3]), parseInt(YMDhms[4]), 
                                             parseInt(YMDhms[5]), 0/*msValue*/);

left = Math.floor((sqlDate - (new Date())) / 1000);

 

Now it works fine with all browsers, except for CSS in IE 9.0 which is a new story

[reno123]

I've read at smarty and PS sites, that it's not "good practice" to put the JS code into TPL file.

 

http://www.smarty.net/docs/en/language.escaping.tpl

 

But I don't know other solution, so I had to use the same solution as you described.

 

Maybe some one could give us proper solution how to pass variable from PHP to JS ?

[Aioras]

I've read at smarty and PS sites, that it's not "good practice" to put the JS code into TPL file.

 

http://www.smarty.net/docs/en/language.escaping.tpl

 

But I don't know other solution, so I had to use the same solution as you described.

 

Maybe some one could give us proper solution how to pass variable from PHP to JS ?

 

Did you solve it ? I'm doing a module and I'm stuck on that part :/