PrestaShop: product special price countdown timer

Trabla: PrestaShop: product special price countdown timer


PrestaShop eCommerce shop -  product special price countdown timer - codingtrabla tutorial 1


















Solving:


1. Add countdown timer code into product details template.

Based on Simple CountDown timer tutorial:
http://codingtrabla.blogspot.com/2014/12/js-simple-count-down-timer.html

Path to template file:
.../prestashop/themes/default-bootstrap/product.tpl

{if !empty($product->unity) && $product->unit_price_ratio > 0.000000}
{math equation="pprice / punit_price"  pprice=$productPrice  punit_price=$product->unit_price_ratio assign=unit_price}
<p class="unit-price"><span id="unit_price_display">{convertPrice price=$unit_price}</span> {l s='per'} {$product->unity|escape:'html':'UTF-8'}</p>
{hook h="displayProductPriceBlock" product=$product type="unit_price"}
{/if}
{/if} {*close if for show price*}
{hook h="displayProductPriceBlock" product=$product type="weight"}
<div class="clear"></div>
</div> <!-- end content_prices -->
<div class="product_attributes clearfix">




<style>
  .simple-countdown-labels{
   font-size: small;
   text-align: center;
  }
  .simple-countdown-nums{
   font-size: xx-large;
   text-align: center;
   color: red;
  }
  .simple-countdown-cell{
   border-style: solid;
      border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
  }
 </style>

<div id='simple-countdown' style="display:none;">
<h3>Time Left:</h3>
 <table>
 <tbody class="simple-countdown-nums">
  <tr>
   <td>
    <span id="simple-countdown-days" class="simple-countdown-cell">00</span>
   </td>
   <td>
    <span id="simple-countdown-hours" class="simple-countdown-cell">00</span>
   </td>
   <td>
    <span id="simple-countdown-minutes" class="simple-countdown-cell">00</span>
   </td>
   <td>
    <span id="simple-countdown-seconds" class="simple-countdown-cell">00</span>
   </td>
  </tr>
 </tbody>
 <tfoot class="simple-countdown-labels">
  <tr>
   <td>Days&nbsp;</td>
   <td>Hours</td>
   <td>Min&nbsp;&nbsp;</td>
   <td>Sec&nbsp;&nbsp;</td>
  </tr>
 </tfoot>
 </table>
</div>

<script type="text/javascript" >
  function SimpleCountDown( from, to , daysId, hoursId, minId, secId ){

    
   var from = Date.parse(from);
   var to = Date.parse(to);

    var interval = 0; //in milliseconds
   var days = document.getElementById(daysId);
   var hours = document.getElementById(hoursId);
   var minutes = document.getElementById(minId);
   var seconds = document.getElementById(secId);
   var timer;

    var self = this;

   this.init = function( ){

    interval =  to - from ;
   
   this.updateCountDown();

    timer = setInterval( this.updateCountDown, 1000);

   };

   this.millisecondsToDaysHoursMinutesSeconds = function( milliSeconds ){
  
   var milliseconds, days, hours, minutes, seconds; 

    if( milliSeconds > 0 ){

     milliseconds = milliSeconds;
    days   = Math.floor( milliseconds / ( 24 * 60 * 60 * 1000 ) );
    if ( days < 0 ) { days = 0; }  
    milliseconds  -= days * 24 * 60 * 60 * 1000;

     hours   = Math.floor( milliseconds / ( 60 * 60 * 1000 ) );
    if ( hours < 0 ) { hours = 0; } 
    milliseconds  -= hours * 60 * 60 * 1000;

     minutes  = Math.floor( milliseconds / ( 60 * 1000 ) );
    if ( minutes < 0 ) { minutes = 0; } 
    milliseconds  -= minutes * 60 * 1000;

     seconds  = Math.floor( milliseconds / ( 1000 ) );
    if ( seconds < 0 ) { seconds = 0; }

    }else{
    days = hours = minutes = seconds = 0;
   }
   
   var result = new Object;
   result.days = days;
   result.hours = hours;
   result.minutes = minutes;
   result.seconds = seconds;

   return result;
  };

   this.updateCountDown = function(){

    if( interval > 0 ){
    interval = interval - 1000;
   }else{
    interval = 0;
   }

    var left = self.millisecondsToDaysHoursMinutesSeconds( interval );

    days.innerHTML   = left.days < 10 ? '0' + left.days : left.days;
   hours.innerHTML  = left.hours < 10 ? '0' + left.hours : left.hours;
   minutes.innerHTML  = left.minutes < 10 ? '0' + left.minutes : left.minutes;
   seconds.innerHTML  = left.seconds < 10 ? '0' + left.seconds : left.seconds;
   
  };

   


  };

  if( product_specific_price !== undefined ){
  if( product_specific_price.from !== undefined ){
  if( product_specific_price.to !== undefined ){
 
  //Display SimpleCountDown view
  var container = document.getElementById('simple-countdown');
  container.style.cssText += "display : block";

  var countdown = new SimpleCountDown( 
  product_specific_price.from
 ,  product_specific_price.to
 , 'simple-countdown-days'
 , 'simple-countdown-hours'
 , 'simple-countdown-minutes'
 , 'simple-countdown-seconds'

  );
countdown.init();

  }
  }
  }


  

</script>







<!-- quantity wanted -->
{if !$PS_CATALOG_MODE}
<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} style="display: none;"{/if}>
<label>{l s='Quantity'}</label>


2.  Add special(specific) price with interval in admin dashboard

PrestaShop eCommerce shop -  product special price countdown timer - codingtrabla tutorial 2

No comments:

Post a Comment