Trabla: PrestaShop: product special price countdown timer
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 </td>
<td>Hours</td>
<td>Min </td>
<td>Sec </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
No comments:
Post a Comment