(element theme) need help with countdown on homeFeatured Products page

[vince270]

The element theme demo link is http://grainmagique.free.fr/element/

Hi guyz, I want to add a 24hrs countdown lock on the homefeatured to make as daily special deals. I used the code below to add on .tpl file but it didnot work. Please anyone, can help me with this problem. Thank you guys!

 

 

Code:

<script type="text/javascript">

var days = '{$remainingDay}';

var hours = '{$remainingHour}';

var minutes = '{$remainingMinutes}';

var seconds = '{$remainingSeconds}';

var ldays = '{l s='Days'}';

var lday = '{l s='Day'}';

{literal}

<!--

function setCountDown()

{

seconds--;

if (seconds < 0){

minutes--;

seconds = 59

}

if (minutes < 0){

hours--;

minutes = 59

}

if (hours < 0){

days--;

hours = 23

}

if (days < 1){

$("#remain").html(hours+":"+minutes+":"+seconds);

}

else {

var d = (days > 1 ? ldays : lday );

$("#remain").html(days +" " + d + " "+hours+":"+minutes+":"+seconds);

}

setTimeout ("setCountDown()", 1000 );

}

 

$(document).ready(function(){

setCountDown();

});

 

//-->

{/literal}

[vince270]

this is picture of homefeatured module

[justinl]

A few questions that might help resolve your problem:

1. Do you end up closing the <style> tag at the end of your code block?
   
2. Do you have an element with the ID "remain" somewhere in the home featured module? That is the name of the element that your script is trying to output to. If you do not have an element with the ID "remain" that is probably the main reason why your script isn't working as you want it to.
   

[vince270]

Thanks Justinl,

1. I did not end up closing with the <style> tag at the end of code block.

2. I don't know the element ID, how to find that ID?

[justinl]

Hey Vince,

 

So you'll need to close that code block with a closing </style> tag and wherever you want your count down to output onto your page, put this code:

 

<span id="remain"></span>

 

 

Also, remove the <!-- and //--> from your javascript code that you pasted above.

[vince270]

hi Justinl,

 

code:

<span id="remain"></span>

 

I have to put it on php file or it's also on tpl file?

 

Thanks for your help!

[justinl]

Since it sounds like you're only concerned with adjusting the visuals of your prestashop and you're not a programer, 99% of ALL modifications you will make will probably take place in a .tpl file.

 

So make sure that both the <style></style> and <span></span> tags are in your .tpl file and NOT in your .php file. Wherever you put the <span></span> tags is where your countdown will show up on your webpage.

 

ps - the javascript in the <span></span> tags should technically go into an external .js file and then loaded into the page with a .php controller but that sounds like it's outside of your scope of expertise so it's okay to keep it in your .tpl file.

[vince270]

Hi Justinl,

I'm not a programer, I'm dont know much about code. Thanks for your help! I did add it on tpl file, but it's not working. Please take a look at the code below. Thanks

This is the code of homefeatured.tpl

<link rel="stylesheet" href="{$base_dir}modules/homefeatured/style.css" type="text/css" media="screen" />
{literal}
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .bloc").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
 //Set Variables
 var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
 var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
 var imgDesc = $(this).find('.bloc').html();  //Get HTML of block
 var imgDescHeight = $(".main_image").find('.bloc').height(); //Calculate height of block

 if ($(this).is(".active")) {  //If it's already active, then...
  return false; // Don't click through
 } else {
  //Animate the Teaser   
  $(".main_image .bloc").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
   $(".main_image .bloc").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
   $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
  });
 }

 $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
 $(this).addClass('active');  //add class of 'active' on this list only
 return false;

}) .hover(function(){
 $(this).addClass('hover');
 }, function() {
 $(this).removeClass('hover');
});

//Toggle Teaser
$("a.collapse").click(function(){
 $(".main_image .bloc").slideToggle();
 $("a.collapse").toggleClass("show");
});

});//Close Function
</script>
{/literal}
[color=#ff0000]<style>
{literal}
<script type="text/javascript">
var days = '{$remainingDay}';
var hours = '{$remainingHour}';
var minutes = '{$remainingMinutes}';
var seconds = '{$remainingSeconds}';
var ldays = '{l s='Days'}';
var lday = '{l s='Day'}';[/color]
[color=#ff0000]function setCountDown()
{
seconds--;
if (seconds < 0){
minutes--;
seconds = 59
}
if (minutes < 0){
hours--;
minutes = 59
}
if (hours < 0){
days--;
hours = 23
}
if (days < 1){
$("#remain").html(hours+":"+minutes+":"+seconds);
}
else {
var d = (days > 1 ? ldays : lday );
$("#remain").html(days +" " + d + " "+hours+":"+minutes+":"+seconds);
}
setTimeout ("setCountDown()", 1000 );
}[/color]
[color=#ff0000]$(document).ready(function(){
setCountDown();
});
</script>
{/literal}
</style>[/color]
<div id="main" class="container">
<div class="image_thumb">
<ul>
{foreach from=$products item=product name=homeFeaturedProducts}
{assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}
<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}first_item_of_line{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
 <a href="{$img_prod_dir}{$product.id_image}-large.jpg"><img src="{$img_prod_dir}{$product.id_image}-large.jpg" width="100" height="100" alt="{$product.legend|escape:htmlall:'UTF-8'}"/></a>
  <div class="desc">
 <div class="bloc">
  <h5><a href="{$productLink}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.name|escape:htmlall:'UTF-8'|truncate:100}</a></h5>
  <a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.description_short|strip_tags|truncate:60:'...'}</a>
 <small>{displayWtPrice p=$product.price}</small>
 <p><a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{l s='view it' mod='homefeatured'}</a></p>
 </div>
</div>
</li>
{/foreach}
</ul>
</div>
[color=#ff0000]<span id="remain"></span>[/color]
<div class="main_image">
 {foreach from=$products item=product name=homeFeaturedProducts}
 {assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}
 <li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}first_item_of_line{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">
  <img src="{$img_prod_dir}{$product.id_image}-large.jpg" width="450" height="450" alt="{$product.legend|escape:htmlall:'UTF-8'}"/>
  <div class="desc">
   <div class="bloc">
   <h5><a href="{$productLink}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.name|escape:htmlall:'UTF-8'|truncate:1000}</a></h5>
 <a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.description_short|strip_tags|truncate:60:'...'}</a><small>{displayWtPrice p=$product.price}</small>
 <p><a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{l s='view it' mod='homefeatured'}</a></p>
   </div>
  </div>
  </li>
 {/foreach}
</div>
</div>

[justinl]

First off, I just realized that I was telling you to use <style> tags but I meant to say <script> tags. So you can go ahead and remove the <style> tags from your code.

 

Are these variable defined anywhere ? ($remainingDay, $remainingHour, etc.)

 

var days = '{$remainingDay}';

var hours = '{$remainingHour}';

var minutes = '{$remainingMinutes}';

var seconds = '{$remainingSeconds}';

[vince270]

how can we defined timer as "(UTC-08:00) Pacific Time (US & Canada)"?

Thanks for your help!

[justinl]

Where are you defining the timer variables?

[vince270]

Hi justinl,

I'm done the countdown timer already. Now I have a different question. How can I call a flash movie (.wsf) on my homefeatured page? Could you help me please? Thank you for your help!

 

 

Code:

<span id="remain"></span>

<div class="main_image">

{foreach from=$products item=product name=homeFeaturedProducts}

{assign var='productLink' value=$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}first_item_of_line{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">

<img src="{$img_prod_dir}{$product.id_image}-large.jpg" width="450" height="450" alt="{$product.legend|escape:htmlall:'UTF-8'}"/>

<div class="desc">

<div class="bloc">

<h5><a href="{$productLink}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.name|escape:htmlall:'UTF-8'|truncate:1000}</a></h5>

<a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{$product.description_short|strip_tags|truncate:60:'...'}</a><small>{displayWtPrice p=$product.price}</small>

<p><a href="{$product.link}" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}">{l s='view it' mod='homefeatured'}</a></p>

</div>

</div>

</li>

{/foreach}

</div>

 

I want to call a .wsf file here.

 

</div>

[vince270]

I used the code below to input my flash swf file, but it just shows the box without flash movie

<embed src="../images/hp.swf" quality="high" bgcolor="#666666" width="275" height="150"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>

[justinl]

@vince270

 

Could you please create a new topic for your question and then post the link back here so I can find it? It's not good practice to post unrelated follow up questions inside of another topic. The answer should be fairly easy if you know where you are putting the .swf (it's not ".wsf"). I'll tell you how to do it once you create the new topic.

 

Cheers,

Justin

[Rukshar Khan]

Hello Vince and Justin,

 

Have you got a countdown timer that you can share?

 

I would like to get hold of a countdown timer for my featured products.

 

Thank you.