查看: 2165|回复: 0

干货-magento修改页面实现special产品时间倒计时功能

[复制链接]
发表于 2016-6-13 18:33:10 | 显示全部楼层 |阅读模式
2016-06-13_183121.jpg
212059gf1y6z6o78ojwo6r.jpg
近日,我们依据客户的要求,修改了specail 产品展示页面,使其可以有一个简单漂亮的倒计时的功能,此版本支持[color=rgb(68, 68, 68) !important]magento1.9.1且兼容市面绝大多数的浏览器,用最简洁的代码给用户最好了的体验。
修改template\catalog\product\view\type\default.phtml文件为
  1. <?php $_product = $this->getProduct() ?>

  2. <?php echo $this->getPriceHtml($_product) ?>

  3. <!--time-->
  4. <?php if($specialPriceToDate = $_product->getSpecialToDate()):?>
  5.         <div class="flashsale">
  6.                  <div class="clock">
  7.                 <span id="time-over" class="timer">
  8.                         <span class="day_count" id="day_count_<?php echo $_product->getId();?>"> </span><span class="day">days</span>
  9.                         <span class="day_seconds">
  10.                                 <span id="hour_<?php echo $_product->getId();?>"> </span>:
  11.                                 <span id="minute_<?php echo $_product->getId();?>"> </span>:
  12.                                 <span id="second_<?php echo $_product->getId();?>"> </span>
  13.                         </span>
  14.                 </span>
  15.                 </div>
  16.         </div>

  17.        

  18.         <script type="text/javascript">
  19.                 countDown("<?php echo date("Y/m/d H:i:s",strtotime($specialPriceToDate))?>","day_count_<?php echo $_product->getId();?>","hour_<?php echo $_product->getId();?>","minute_<?php echo $_product->getId();?>","second_<?php echo $_product->getId();?>");
  20.                 function countDown(time,day_elem,hour_elem,minute_elem,second_elem){        
  21.             var end_time = new Date(time).getTime(), //-1   
  22.                         sys_second = (end_time-new Date().getTime())/1000;
  23.             var timer = setInterval(function(){
  24.                 if (sys_second > 1) {
  25.                     sys_second -= 1;
  26.                     var day = Math.floor((sys_second / 3600) / 24);
  27.                     var hour = Math.floor((sys_second / 3600) % 24);
  28.                     var minute = Math.floor((sys_second / 60) % 60);
  29.                     var second = Math.floor(sys_second % 60);
  30.                     document.getElementById(day_elem).innerHTML = day;
  31.                     document.getElementById(hour_elem).innerHTML = hour<10?"0"+hour:hour;
  32.                     document.getElementById(minute_elem).innerHTML = minute<10?"0"+minute:minute;
  33.                     document.getElementById(second_elem).innerHTML = second<10?"0"+second:second;
  34.                 } else {
  35.                     document.getElementById("time-over").innerHTML = "time over" ;
  36.                     clearInterval(timer);
  37.                 }
  38.             }, 1000);
  39.         }
  40.         </script>
  41.        
  42.          


  43. <?php endif;?>
  44.                        
  45. <?php if ($this->displayProductStockStatus()): ?>
  46.     <?php if ($_product->isAvailable()): ?>
  47.         <p class="availability in-stock"><?php echo $this->__('Availability:') ?> <span><?php echo $this->__('In stock') ?></span></p>
  48.     <?php else: ?>
  49.         <p class="availability out-of-stock"><?php echo $this->__('Availability:') ?> <span><?php echo $this->__('Out of stock') ?></span></p>
  50.     <?php endif; ?>
  51. <?php endif; ?>

  52. <?php echo $this->getChildHtml('product_type_data_extra') ?>
复制代码




真让网www.zhenrang.com 轻松实现商业价值
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表