Help Center

카페24 소식

공지사항업데이트스토어소식

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

2012-04-19

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

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

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

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


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

2. 업데이트 내용

 

  - 상품상세 페이지 

  - 상품 확대 보기 페이지

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

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

 

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


    ① HTML 수정
    - 수정파일 : /product/detail.html

    - product_detail 모듈안에 아래의 파란색 소스 부분을 넣어주세요.


 <tr class="mileage">

    <th scope="row">적립금</th>

    <td>

        <ul>

            <li class="{$mileage_display|display}"><span id="span_mileage_text">{$mileage_value|numberformat}</span><span class="{$mileage_percent_display|display}">({$mileage_percent}%)</span>

            </li>

            ..........

        </ul>

    </td>

</tr>

<tr class="{$naver_mileage_display|display}">

    <th scope="row">제휴 적립금</th>

    <td>

        네이버 마일리지 {$naver_mileage_rate} 적립

        <img src="{$sNpIconUrl}" id="imgNaverMileageHelp" onclick="{$action_np_help}" />

    </td>

</tr>

<tr class="{$allotment_display|display}">

    <th scope="row">무이자할부</th>

    <td>{$allotment_period}<br />{$allotment_card}</td>

</tr>


 ..........

 

<!-- 옵션 추가 구매 -->

<div module="product_multioption">

    <div class="{$multiple_option_template_class}">

      <table border="1" summary="옵션 추가">

        <caption>옵션 추가</caption>   
        <tbody>

        <tr module="product_option">

          <th scope="row">{$option_name}</th>

          <td>{$form.option}</td>

        </tr>
    ..........

        </table>
    </div>

</div>    

<p class="{$naver_mileage_exception_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/mono/txt_naver.gif" alt="개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다." /></p>


    ② CSS 수정
    - 수정파일 : /css/module/product/detail.css

    - 아래의 코드를 추가해주세요.

 

#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; 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; }


   ▼ 적용화면
   



  2) 상품 확대 보기
   아래 코드를 활용하시면, 상품 확대 화면에 적용하실 수 있습니다.
   표준스킨에서는 아래와 같이  반영 되었습니다.


    ① HTML 수정
    - 수정파일 : /product/image_zoom.html

    - product_zoom 모듈안에 파란색 소스 부분을 넣어주세요.


 <tr class="mileage">

    <th scope="row">적립금</th>

    <td>

        <ul>

            <li class="{$mileage_display|display}"><span id="span_mileage_text">{$mileage_value|numberformat}</span>원 ({$mileage_percent}%)</li>

            ..........

        </ul>

    </td>

</tr>

<tr class="{$naver_mileage_display|display}">

    <th scope="row">제휴 적립금</th>

    <td>

        네이버 마일리지 {$naver_mileage_rate} 적립

        <img src="{$sNpIconUrl}" id="imgNaverMileageHelp" onclick="{$action_np_help}" />

    </td>

</tr>
<tr class="{$allotment_display|display}">

    <th scope="row">무이자할부</th>

    <td>{$allotment_period}<br/>{$allotment_card}</td>

</tr>

 

<!-- 상세정보 내역 -->

<div id="prdInfo">

    <h3>{$name|cut:20}

        <span>{$soldout_icon} {$recommend_icon} {$new_icon} {$mileage_icon} {$product_icons}</span>

    </h3>

    <p class="{$delvtype_display|display}">({$eng_name}) 해외배송 가능</p>

    <table border="1" summary="{$name} 기본 정보입니다.">

    ..........


    </table>

    <div class="listImg">

        <ul>

            <li><img src="{$tiny_img}" class="{$thumb_img_class}" style="display:{$img_display};" alt="" /></li>

            ..........

        </ul>

    </div>

</div>
<p class="{$naver_mileage_exception_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/mono/txt_naver.gif" alt="개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다." /></p>



    ② CSS 수정
    - 수정파일 : /css/module/product/zoomPackage.css

    - 아래의 코드를 추가 합니다.


#NaverChk_Button { clear:both; margin:10px 0 0; float:right; }

#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; 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; }



   ▼ 적용화면
  




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

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

 

이전글

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

2012-04-19

다음글

[스마트디자인] 아이콘 관리 업데이트

2012-05-11