Help Center

카페24 소식

[스마트디자인] 네이버마일리지 기능추가 > 주문관련

2012-04-19


안녕하세요, 카페24 운영도우미 입니다.

쇼핑몰 구매자가 보유한 네이버 아이디 하나로 네이버 마일리지 서비스 가맹점 어디서나
적립 및 사용 할 수 있는 통합 적립금인 네이버마일리지 관련 기능이 업데이트되었습니다.

상품관련, 주문관련, 나의 주문내역 상세 페이지가 업데이트 되었으며,
아래에서는 주문관련 페이지의 업데이트 내용을 안내해드립니다.

자세한 내용은 아래를 참조해 주세요.



1. 제목 : 네이버마일리지 기능추가 - 주문관련

2. 업데이트 내용

 

  - 장바구니 페이지 

  - 주문서 페이지
  - 주문완료 페이지
 


  ※ 네이버 마일리지 설정
    - '쇼핑몰어드민 > 상점관리 > 네이버 마일리지 > 네이버 마일리지' 가입신청을 해주세요.

    - '쇼핑몰어드민 > 상점관리 > 네이버 마일리지 > 노출설정 및 셋팅' 정보입력

 

  1) 장바구니 페이지
    아래 코드를 활용하시면, 장바구니 화면에 적용하실 수 있습니다.
    표준스킨에서는 아래와 같이 반영 되었습니다.


    ① HTML 수정
    - 수정파일 : /order/basket.html

    - Order_DcInfo 모듈 하단에 아래 코드를 넣어줍니다.

 <!-- 할인정보 START -->

<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>


 

    ② 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;}


 

   ▼ 적용화면

   



  3) 주문완료 페이지

    아래 코드를 활용하시면, 장바구니 화면에 적용하실 수 있습니다.
    표준스킨에서는 아래와 같이 반영 되었습니다.


    ① HTML 수정
    - 수정파일 : /order/order_result.html

  <li class="{$naver_mileage_display|display}"><strong>네이버마일리지/캐쉬</strong> <span>{$naver_used_point} {$naver_mileage_detail}</span></li>



   ▼ 적용화면
   


카페
24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다
.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다
.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]