To share with every one how countdown can be added using start sale and end sale date using some not proper way.
And hope it was going to add in future version soon as a more mature solutions
1. Install thirdparty extension and enable
extensions.joomla.org/profile/extension/...nts/allb4u-countdown
.
2. Goto hikashop->display->view->product->listing_img_title (may vary depends on your template and view of listing, i am using image with title listing)
3. Find the line below, should be on line 17 onwards
if($this->config->get('thumbnail',1)){ ?>
<!-- PRODUCT IMG -->
<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_product_image">
4. Add the code below, code not tidy up yet, you may clean the unnecessary code
<?php
//date_default_timezone_set('UTC');
if (!empty($this->row->product_sale_end)) {
$this->row->product_sale_end += 7*3600;
$tDiff = $this->row->product_sale_end - time();
$tDiff -= 7*3600;
$days = floor($tDiff / 86400);
$hours = ($tDiff / 3600) % 24;
$mins = ($tDiff / 60) % 60;
$secs = ($tDiff) % 60;
?>
<div><?php //echo (date("Y-m-d G:i e", $this->row->product_sale_end));?><br/><style>
<?php echo "#cntid".$this->row->product_id;?> {
font-family: 'Share Tech Mono', serif;
color: white;
background: hotpink;
line-height: 1;
display: inline-block;
padding: 1px;
width: 100%;
height: 35px;
text-align:center;
}
<?php echo "#cntid".$this->row->product_id;?> dl {
font-size: 2em;
}
div.countdown dl{
margin: 0.4em 0 0 0;
}
div.countdown dl dt,
div.countdown dl dd {
display: inline-block;
margin: 0;
}
div.countdown dl dt {
position: relative;
top: -20px;
font-size: 8px;
}
div.countdown dl dd {
margin-right: 0.4em;
min-width: 1.1em;
}
div.countdown dl dd:after {
content: ':';
}
div.countdown dl dd:last-child:after {
content: none;
}
div.countdown dl dd:nth-of-type(1) {
min-width: 1em;
margin-left: -0.55em;
}
div.countdown dl dd:nth-of-type(2) {
margin-left: -0.8em;
}
div.countdown dl dd:nth-of-type(3) {
margin-left: -0.6em;
}
div.countdown dl dd:nth-of-type(4) {
margin-left: -0.5em;
}
</style><div id=<?php echo "'cntid".$this->row->product_id."'";?> class='countdown '><dl class='counttime'><dt class='day'>days</dt><dd class='day'><?php echo $days;?></dd><dt class='hour'>hours</dt><dd class='hour'><?php echo $hours;?></dd><dt class='min'>mins</dt><dd class='min'><?php echo $mins;?></dd><dt class='sec'>secs</dt><dd class='sec'><?php echo $secs;?></dd></dl>
<script type='text/javascript'>
jQuery(document).ready(function($) {
function zeroPadd(intVal, len, space){
var result = '' + intVal;
var zs = len - result.length;
for(var i = 0; i < zs; i++) result = (space? ' ': '0') + result;
return result;
}
jQuery.fn.reverse = [].reverse;
setInterval(function(){
var carry = 0;
$(<?php echo "'#cntid".$this->row->product_id."'";?>).children('dl').children('dd').reverse().each( function(index)
{
var num = parseInt( $(this).text(), 10 );
if(!index) num--;
num -= carry;
carry = 0;
if(num < 0){
num = 59;
if (2==index) num = 23;
if (3==index) location.reload();
carry = 1;
}
var len = 3 == index? 1: 2;
var space = 3 == index? 1: 0;
$(this).text(zeroPadd(num, len, space));
});
}, 1000);
}
);
</script></div></div> <?php }
//print_r($this->row); ?>
5. Remember to install the hide product plugin after sale end date to prevent script error
Hope Jerome / Nicolas can share the link to download the plugin again