Help Center
카페24 소식
[스마트디자인] 네이버마일리지 기능추가 > 주문관련
2012-04-19
안녕하세요, 카페24 운영도우미 입니다.
쇼핑몰 구매자가 보유한 네이버 아이디 하나로 네이버 마일리지 서비스 가맹점 어디서나
적립 및 사용 할 수 있는 통합 적립금인 네이버마일리지 관련 기능이 업데이트되었습니다.
상품관련, 주문관련, 나의 주문내역 상세 페이지가 업데이트 되었으며,
아래에서는 주문관련 페이지의 업데이트 내용을 안내해드립니다.
자세한 내용은 아래를 참조해 주세요.
- 장바구니 페이지
- 주문서 페이지
- 주문완료 페이지
※ 네이버 마일리지 설정
- '쇼핑몰어드민 > 상점관리 > 네이버 마일리지 > 네이버 마일리지' 가입신청을 해주세요.
- '쇼핑몰어드민 > 상점관리 > 네이버 마일리지 > 노출설정 및 셋팅' 정보입력
1) 장바구니 페이지
아래 코드를 활용하시면, 장바구니 화면에 적용하실 수 있습니다.
표준스킨에서는 아래와 같이 반영 되었습니다.
① HTML 수정
- 수정파일 : /order/basket.html
- Order_DcInfo 모듈 하단에 아래 코드를 넣어줍니다. <div module="Order_DcInfo"> <!--@css(/css/module/order/dcInfo.css)--> <p><img src="{$group_image}" alt="{$group_name}" onerror="this.src='http://img.echosting.cafe24.com/design/common/mem_default.gif';" /></p> <p class="myInfo"> 저희 쇼핑몰을 이용해주셔서 감사합니다. <strong>{$user_name}</strong>님은 <strong>[{$group_name}]</strong> 회원이십니다. .......... </p> </div> <!-- 네이버 마일리지 관련 도움말 --> <div module="Order_Naverinfo"> <!--@css(/css/module/order/Naverinfo.css)--> <p><img src="http://img.cafe24.com/img1/front/common/txt_naver02.gif" alt="" /></p> </div>
<!-- 할인정보 START -->
② CSS 수정
- 새 파일 생성 : /css/module/order/naverinfo.css
.xans-order-naverinfo { margin:0 0 30px; } |
2) 주문서 페이지
아래 코드를 활용하시면, 주문서 화면에 적용하실 수 있습니다.
표준스킨에서는 아래와 같이 반영 되었습니다.
① HTML 수정
- 수정파일 : /order/orderform.html
<!--비회원 결제 -->
<div class="boardView {$nm_display|display}"> <table border="1"summary="비회원 결제 정보 입력란입니다." class="boardView ordAdd"> <caption>비회원 결제 정보 입력</caption> <tr> <th scope="row">비회원결제 비밀번호</th> <td>{$form.order_password} (주문조회시 필요합니다. 4자에서 12자 영문 또는 숫자 대소문자 구분)</td> </tr> .......... </table> </div> <!--네이버 마일리지 --> <div class="boardView {$naver_mileage_display|display}"> <table border="1"summary="네이버 마일리지 정보 입력란 입니다." class="boardView ordAdd"> <caption>네이버 마일리지</caption> <tr> <th scope="row"> <label>{$form.np_use}네이버 마일리지</label> </th> <td> <span id="ex_tx_np_save" style="display:none">[np_rate]% 적립</span> <span id="ex_tx_np_use" style="display:none">[np_use]마일 사용</span> <span id="divNvPointSave" style="display:none;"><span id="txt_np_save"></span></span> <span id="divNvPointOpr" style="display:none;">/</span> <span id="divNvPointUse" style="display:none;"><span id="txt_np_use"></span></span> <span id="divNvPointBtnAdd" style="display:inline;"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_useNaver.gif"alt="적립 및 사용" onclick="showNaverCashShowAccumPopup()"/></span> <span id="divNvPointBtnMod" style="display:none"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_useModify.gif"alt="수정" onclick="showNaverCashShowAccumPopup()" /></span> <span id="divNvDefaultGuide">버튼을 클릭해서 <span style="color:#00CC00;">{$sNpSaveRate}%</span> 적립받고 사용하세요</span> <img src="{$sNpIconUrl}" id="imgNaverMileageHelp"onclick="{$action_np_help}" /> </td> </tr> <tr> <td colspan="2" align="center"><img src="http://img.cafe24.com/img1/front/common/txt_naver02.gif"alt="" /></td> </tr> </table> </div>
<!--네이버마일리지 or 적립금 사용(택1) --> <div class="boardView {$either_mileage_navermileage_display|display}"> <table border="1"summary="적립금 or 네이버마일리지 정보 입력란 입니다."class="boardView ordAdd"> <caption>적립금&네이버마일리지(택1)</caption> <tr> <th scope="row"> <label>적립금&<br />네이버마일리지(택1)</label> </th> <td> <div class=""> {$form.either_mileage_navermileage_select} </div> <hr /> <!-- 적립금 사용 --> <div id="{$either_mileage_display_id}"> <p>{$price_unit_head}{$form.either_input_mile} {$price_unit_tail}(총 사용가능 적립금 :{$price_unit_head}{$total_avail_mileage}{$price_unit_tail})</p> <p>적립금은 최소{$either_mileage_min} 이상일 때 결제가능합니다.</p> <p id="either_mileage_max_unlimit"class="{$either_mileage_max_unlimit_display|display}">최대 사용금액은 제한이 없습니다.</p> <p id="either_mileage_max_limit"class="{$either_mileage_max_limit_display|display}">1회 구매시 적립금 최대 사용금액은{$either_mileage_max}입니다.</p> <p>적립금으로만 결제할 경우, 결제금액이 0으로 보여지는 것은 정상이며 [결제하기] 버튼을 누르면 주문이 완료됩니다.</p> <p id="either_mileage_shipfee"class="{$either_mileage_shipfee_display|display}">적립금 사용 시 배송비는 적립금으로 사용 할 수 없습니다.</p> <p id="either_mileage_exception"class="{$either_mileage_exception_display|display}">적립금 사용 시 해당 상품에 대한 적립금은 적립되지 않습니다.</p> </div>
<!-- 네이버 마일리지 사용 --> <div id="{$either_navermileage_display_id}"> {$either_navermileage_use} </div> </td> </tr> </table> <div id="{$either_navermileage_guide_display_id}"class="navermileage_guide"> <p><img src="http://img.cafe24.com/img1/front/common/txt_naver02.gif"alt="네이버마일리지 관련 도움말" /></p> </div> </div> <!--//네이버마일리지 or 적립금 사용(택1)--> |
② CSS 수정
- 수정파일 : /css/module/orderform.css 하단에 아래 코드를 추가합니다.
#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; line-height:14px; background:#fff; border:1px solid #5B9761; }
#divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; }
#divNvPointInfo a img { vertical-align:middle; }
#imgNaverMileageHelp { cursor:pointer;} |
아래 코드를 활용하시면, 장바구니 화면에 적용하실 수 있습니다.
표준스킨에서는 아래와 같이 반영 되었습니다.
① HTML 수정
- 수정파일 : /order/order_result.html
<li class="{$naver_mileage_display|display}"><strong>네이버마일리지/캐쉬</strong> <span>{$naver_used_point} {$naver_mileage_detail}</span></li>
▼ 적용화면