19'C 흐림
서울 강남구
소셜커머스 타임세일과 같이 상품의 남은 시간을 표기해 주는 방법입니다.
제가 한건 아니고 능력자분들이 만들어 놓으신 밥상에 숟가락만 살짝...
그냥 제가 필요해서 이것저것 찾아보고 아미나테마에 맞춰 아주 쬐끔만 수정만 한거라
문제가 되면 자삭 하겠습니다.~~^^;;
참고자료 : http://sir.kr/yc5_tip/77 (여기서 거의 다 가져와서 수정만 살짝)
1. 상품스킨 (/skin/apms/item/shop/item.skin.php) 에서 적당한 위치에 아래소스 삽입
<!--남은 시간 시작-->
<!-- 남은 시간 { -->
<script src="<?php echo G5_JS_URL; ?>/jquery.plugin.js"></script>
<script src="<?php echo G5_JS_URL; ?>/jquery.countdown.js"></script>
<!-- } 남은 시간 -->
<?
// 종료시간
$endtime = $it['pt_end'];
// 판매 가능하고 재고가 있으며 품절이 아닐때, 종료시간 전일때
if ( $it[it_use] && !$it[it_soldout] && $it[it_stock_qty] > 0 && $endtime>time() ) {
// 남은 시간
$countdown = $endtime - time();
//echo $countdown;
?>
<div class="buy_time">
<!-- 마감 카운트다운 -->
<div class="time">
<span class="tit"><i class="fa fa-clock-o" aria-hidden="true"></i> 남은 시간</span>
<div id="dealCountdown" class="count" style="background:none;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var d = <?php echo $countdown; ?>;
var layout ='<span class="date"><span>{dn} 일</span>';
layout +='<div>';
layout +=' <span>{hnn}</span>';
layout +=' <span>:</span>';
layout +='</div>';
layout +='<div>';
layout +=' <span>{mnn}</span>';
layout +=' <span>:</span>';
layout +='</div>';
layout +='<div>';
layout +=' <span>{snn}</span>';
layout +='</div>';
$('#dealCountdown').countdown({until: d, format: 'dHMS', labels:['','','','','','',''],layout:layout});
});
</script>
</div>
<? } ?>
<!--남은 시간 끝-->
2. 상품스킨 style파일 (/skin/apms/item/shop/style.css)에서 적당한 위치에 아래소스 삽입
-아래 부분은 각자 취향에 맞춰서 적절하게 수정하시면 됩니다.
/*Time Deal*/
.buy_time{background:#fafafa;text-align:left;width:100%;height:40px;padding: 5px;margin:5px 5px 5px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.buy_time .time{top right no-repeat;float:left;width:300px;height:25px;position:relative}
.buy_time .time .tit{float:left;height:25px;line-height:25px;color:#666;margin-left:10px;font-weight:bold}
.buy_time .time .count{float:left;position:absolute;top:0;left:110px;height:35px}
.buy_time .time .count span{width:80px;font-size:14px;font-weight:bold;height:25px;line-height:25px;margin-left:5px}
.buy_time .time .count .date{color:#ed0707;width:35px;float:left;margin-right:5px;line-height:25px;height:25px;text-align:left}
.buy_time .time .count div{float:left;width:38px;text-align:left}
.hide {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px}
3.참고자료에서처럼 아래 링크로 js파일 다운받아 업로드 (/js 디렉토리내)
http://keith-wood.name/js/jquery.plugin.js
http://keith-wood.name/js/jquery.countdown.js
4. 적용화면
기준은 상품 등록페이지에서 판매종료 날짜로 적용됩니다.