남은시간 표시 > 유토 자료실

본문 바로가기
사이트 내 전체검색

유토 자료실

남은시간 표시

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 44회 작성일 21-06-08 18:18

본문


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. 적용화면

기준은 상품 등록페이지에서 판매종료 날짜로 적용됩니다.

(캡쳐상으로는 시간만 표시되어 보이나 실 적용시 시간이 짹각짹각 갑니다^^)

 

2508f6ceac42719475326d0369a46666_1491986791_0396.JPG 


댓글목록

등록된 댓글이 없습니다.

설문조사

결과보기

유토빌드를 어떻게 알게되었나요?

    고객센터

  • 02-123-4567
  • 상담시간. 월~금 09:00 ~ 18:00 (일요일,공휴일 휴무)
  • 입금계좌안내
  • OO은행 12345-67-89012 예금주명

사이트 정보

회사명 유토하우스
주소 OO도 OO시 OO구 OO동 123-45
사업자 등록번호 123-45-67890
대표 대표자명
전화 02-123-4567 팩스 02-123-4568
이메일 utohouse@naver.com
통신판매업신고번호 제 OO구 - 123호
개인정보 보호책임자 유토맨
부가통신사업신고번호 12345호

접속자집계

오늘
6
어제
21
최대
78
전체
13,258
Copyright © 소유하신 도메인. All rights reserved.