-->

무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 주문관련

[렌탈페이] 상품 관련 렌탈페이 적용 방법

글번호 : 1365

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1365
상품 관련 렌탈페이 적용 방법에 대해 안내드립니다. (상품 메인 / 목록 / 미리보기 / 상품 상세 / 상품 검색) <<지원범위>> - 통합옵션 / 주문 2.0 / D4 / 모바일 4.0 / 고급형 주문서 <<기능설정>> 1) [쇼핑몰구축 > 쇼핑몰 결제서비스 설정 > 결제서비스 계정 관리 > 렌탈페이 결제] 화면에서 PG ID 저장 2) [상품관리 > 렌탈 관리 > 렌탈 상품관리] 화면에서 렌탈상품 신규등록 후 사용 가능합니다.
[PC 버전]
<<상품 메인>> 1. 작업 위치 - 중앙 디자인 > 메인 2. 가상태그 - 메인 SPECIAL 영역 > 렌탈상품 여부 확인: <!--/if_special_product@is_rental_pay/--> - 메인 SPECIAL 영역 > 월 렌탈금액: <!--/number/special_product@rental_price/--> - 메인 NEW ARRIVAL 영역 > 렌탈상품 여부 확인: <!--/if_new_product@is_rental_pay/--> - 메인 NEW ARRIVAL 영역 > 월 렌탈금액: <!--/number/new_product@rental_price/--> - 메인 MD’S PICK 영역 > 렌탈상품 여부 확인: <!--/if_recmd_product@is_rental_pay/--> - 메인 MD’S PICK 영역 > 월 렌탈금액: <!--/number/recmd_product@rental_price/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. ① 베이직 심플 [디자인 편집탭] 1) 메인 SPECIAL 영역 > 렌탈 아이콘 표시 <li class="prd-ico"><!--/special_product@icons/--><!--/special_product@subs_icon/--><!--/special_product@promotion_icon/--> <!--렌탈표시 추가 --><!--/if_special_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--></li> 2) 메인 SPECIAL 영역 > 월 렌탈 금액 표시 <!--/else_if_special_product@is_soldout/--> Sold Out <!--/else/--> <!--/if_special_product@price_discount/--> <!--/if_special_product@is_rental_pay/--> <span class="price">월 <!--/number/special_product@rental_price/-->원~</span> <!--/else/--> <strike><!--/number/special_product@price_sell/-->원</strike> <span class="price"><!--/number/special_product@price_discount/-->원</span> <!--/end_if/--> <!--/else/--> <!--/if_special_product@is_rental_pay/--> <span class="price">월 <!--/number/special_product@rental_price/-->원~</span> <!--/else/--> <!--/if_special_product@price_consumer(+1)/--> <strike><!--/number/special_product@price_consumer/-->원</strike> <!--/end_if/--> <span class="price"><!--/number/special_product@price_sell/-->원</span> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> </li> <!--/if_special_product@color/--> <li class="prd-color"> ※ NEW ARRIVAL 영역과 MD’S PICK 영역에는 <!--/if_special_product@is_rental_pay/-->, <!--/number/special_product@rental_price/--> 가상태그 대신 아래 가상태그를 넣으시면 됩니다. - 메인 NEW ARRIVAL 영역: <!--/if_new_product@is_rental_pay/-->, <!--/number/new_product@rental_price/--> - 메인 MD’S PICK 영역: <!--/if_recmd_product@is_rental_pay/-->, <!--/number/recmd_product@rental_price/--> [CSS] /* 렌탈아이콘 */ .product-wrap .ico-rental {display: inline-block; font-weight: 400; margin-right: 3px; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} ② 모던 심플 [디자인 편집탭] 1) 메인 SPECIAL ITEM 영역 > 렌탈 아이콘 표시 <li class="dsc"><!--/special_product@icons/--><!--/special_product@subs_icon/--><!--/special_product@promotion_icon/--> <!--/special_product@present_icon/--> <!--/if_special_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--> <!--/special_product@name(20)/--> 2) 메인 SPECIAL ITEM 영역 > 월 렌탈 금액 표시 </li> <!--/if_special_product@is_rental_pay/--> <li class="price">월 <!--/number/special_product@rental_price/-->원~</li> <!--/else/--> <li class="price"><!--/number/special_product@price_sell/-->원</li> <!--/end_if/--> ※ NEW ITEM 영역과 HOT ITEM 영역에는 <!--/if_special_product@is_rental_pay/-->, <!--/number/special_product@rental_price/--> 가상태그 대신 아래 가상태그를 넣으시면 됩니다. - 메인 NEW ITEM 영역: <!--/if_new_product@is_rental_pay/-->, <!--/number/new_product@rental_price/--> - 메인 HOT ITEM 영역: <!--/if_recmd_product@is_rental_pay/-->, <!--/number/recmd_product@rental_price/--> [CSS] /* 렌탈아이콘 */ .ico-rental {display: inline-block; font-weight: 400; margin-right: 3px; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} [예시 이미지]
<<상품 목록>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 분류 페이지 > 기본 분류 페이지 2. 가상태그 - 목록 BEST 영역 > 렌탈상품 여부 확인: <!--/if_best_product@is_rental_pay/--> - 목록 BEST 영역 > 월 렌탈금액: <!--/number/best_product@rental_price/--> - 목록 추천 영역 렌탈상품 여부 확인: <!--/if_recmd_product@is_rental_pay/--> - 목록 추천 영역 월 렌탈금액: <!--/number/recmd_product@rental_price/--> - 목록 상품 렌탈상품 여부 확인: <!--/if_product@is_rental_pay/--> - 목록 상품 월 렌탈금액: <!--/number/product@rental_price/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. ① 베이직 심플 [디자인 편집탭] 1) 목록 BEST 영역 > 렌탈 아이콘 표시 <li class="prd-ico"><!--/best_product@icons/--> <!--/best_product@subs_icon/--><!--/best_product@promotion_icon/--> <!--렌탈표시 추가 --><!--/if_best_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--></li> <li class="prd-name"><a href="<!--/best_product@link/-->"><!--/best_product@name/--></a></li> <li class="prd-price"> 2) 목록 BEST 영역 > 월 렌탈 금액 표시 <!--/if_best_product@price_discount/--> <!--/if_best_product@is_rental_pay/--> <span class="price">월 <!--/number/best_product@rental_price/-->원~</span> <!--/else/--> <strike><!--/number/best_product@price_sell/-->원</strike> <span class="price"><!--/number/best_product@price_discount/-->원</span> <!--/end_if/--> <!--/else/--> <!--/if_best_product@is_rental_pay/--> <span class="price">월 <!--/number/best_product@rental_price/-->원~</span> <!--/else/--> <!--/if_best_product@price_consumer(+1)/--> <strike><!--/number/best_product@price_consumer/-->원</strike> <!--/end_if/--> <span class="price"><!--/number/best_product@price_sell/-->원</span> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> </li> <!--/if_best_product@color/--> <li class="prd-color"> <!--/loop_best_product@color/--> <font color="<!--/best_product@color@code/-->">■</font> ※ 목록 추천 영역과 목록 상품 영역에는 <!--/if_best_product@is_rental_pay/-->, <!--/number/best_product@rental_price/-->가상태그 대신 아래 가상태그를 넣으시면 됩니다. - 목록 추천 영역: <!--/if_recmd_product@is_rental_pay/-->, <!--/number/recmd_product@rental_price/--> - 목록 상품 영역: <!--/if_product@is_rental_pay/-->, <!--/number/product@rental_price/--> ② 모던 심플 [디자인 편집탭] 1) 목록 BEST 영역 > 렌탈 아이콘 표시 <li class="dsc"> <!--/best_product@icons/--> <!--/best_product@subs_icon/--><!--/best_product@promotion_icon/--><!--/if_best_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--> <!--/best_product@name(30)/--> <!--/best_product@btn_option_preview/--> 2) 목록 BEST 영역 > 월 렌탈 금액 표시 <li class="price"> <!--/if_best_product@is_rental_pay/--> 월 <!--/number/best_product@rental_price/-->원~ <!--/else/--> <!--/number/best_product@price_sell/-->원 ※ 목록 추천 영역과 목록 상품 영역에는 <!--/if_best_product@is_rental_pay/-->, <!--/number/best_product@rental_price/-->가상태그 대신 아래 가상태그를 넣으시면 됩니다. - 목록 추천 영역: <!--/if_recmd_product@is_rental_pay/-->, <!--/number/recmd_product@rental_price/--> - 목록 상품 영역: <!--/if_product@is_rental_pay/-->, <!--/number/product@rental_price/--> [CSS] /* 렌탈아이콘 */ #productClass .ico-rental {display: inline-block; font-weight: 400; margin-right: 3px; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} [예시 이미지]
<<미리보기>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 미리보기 화면 2. 가상태그 - 렌탈상품 여부 확인: <!--/if_is_rental_product/--> - 렌탈상품 여부 확인 (렌탈 상품이 아닌 경우): <!--/if_not_is_rental_product/--> - 렌탈기간: <!--/loop_rental_period/--> - 선납금: <!--/block_rental_prepayment/--> - 월 렌탈금액: <!--/block_total_rental_price/--> - 렌탈구매 버튼: <!--/link_rental_buy/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. ① 베이직 심플 [디자인 편집탭] <div class="prd-icons"> <p class="picon"><!--/icons/--> <!--/subs_icon/--> <!--/promotion_icon/--><!--/if_is_rental_product/--><span class="ico-rental">렌탈</span><!--/end_if/--></p> <div class="prd-wish"><p><!--/block_wish_cnt/--><!--/wish_cnt/--><!--/end_block/--></p></div> </div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <td colspan="2"><!--/btn_importune/--></td> </tr> <!--/end_if/--> <tr> <td colspan="2"> <!--/if_btn_scrap_fb/--><!--/btn_scrap_fb/--><!--/end_if/--> <!--/if_btn_scrap_m2/--><!--/btn_scrap_m2/--><!--/end_if/--> <!--/if_btn_scrap_tw/--><!--/btn_scrap_tw/--><!--/end_if/--> </td> </tr> </tbody> </table> <!--/if_is_rental_product/--> <table> <colgroup> <col width="90"> <col> </colgroup> <tr> <td colspan="2"> <div class="border"></div> </td> </tr> <tr> <th scope="row"><div class="tb-left">렌탈기간</div></th> <td> <div class="tb-right" style="padding:0"> <ul class="period"> <!--/loop_rental_period/--> <!--/rental_period@block_period/--><label><!--/rental_period@radio_rental_period/--><span><!--/rental_period@period_txt/-->개월</span></label><!--/end_block/--> <!--/end_loop/--> </ul> </div> </td> </tr> <tr> <th scope="row"> <div class="tb-left">선납금 <a href="#prepayments" class="open-layer-tip"><img src="/images/common/ico_shop_question.gif" alt=""></a></div> <div id="prepayments" class="layer-tip" style="width:310px;"> <div class="top"> <p>선납금이란?</p> <a href="#prepayments" class="btn-close"><img src="/images/common/btn_close_tip_layer.gif" alt=""></a> </div> <div class="cont"> 총 렌탈료의 10%가 선납금으로 미리 결제됩니다.<br> 월 렌탈료는 선납금을 제외하여 계산됩니다. </div> </div> </th> <td> <div class="tb-right"> <!--/block_rental_prepayment/--><!--/end_block/-->원 </div> </td> </tr> <tr> <th scope="row"><div class="tb-left">렌탈료</div></th> <td> <div class="tb-right"> <span class="rental-price">월 <!--/block_total_rental_price/--><!--/end_block/-->원</span> </div> </td> </tr> <tr> <td colspan="2"> <div class="border"></div> </td> </tr> <tr> <td colspan="2"> <div class="comment-txt" style="color:#777;"> * 할인 적용에 따라 상품 금액이 변경될 수 있습니다. </div> </td> </tr> </table> <!--/end_if/--> </div><!-- .table-opt --> <div class="f-btns"> <!--/if_is_rental_product/--> <a href="<!--/link_rental_buy/-->" class="btn-rental">렌탈구매</a> <!--/end_if/--> <div class="soldout-btns"> <div class="fl-r"> <!--/if_soldout/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="soldout">SOLD OUT</div> <!--/end_if/--> <!--/end_if/--> <!--/if_not_is_rental_product/--> <!--/if_not_soldout/--> <!--/if_cart_free/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <a href="<!--/link_subs/-->" class="btn_subs">정기배송 신청</a> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> </div> </div><!-- .txt-wrap --> </div><!-- .detail --> </div><!-- .cnt --> [CSS] /* 렌탈 항목 추가 */ #detailpage .txt-wrap .table-opt .period {display: inline-block;} #detailpage .txt-wrap .table-opt .period li {float: left; width: 56px; margin-left: 6px; text-align: center; border: 1px solid #dfdfdf; } #detailpage .txt-wrap .table-opt .period li label {display: block; line-height: 22px; font-size: 11px; color: #555555; position: relative; cursor: pointer;} /* 23.01.12 수정 */ #detailpage .txt-wrap .table-opt .period li label input {position: absolute; opacity: 0; filter:alpha(opacity=0);} /* 23.01.12 추가 */ #detailpage .txt-wrap .table-opt .period li.on {border: 1px solid #441e7c;} #detailpage .txt-wrap .table-opt .period li.on label { color: #441e7c;} /* 23.01.12 수정 */ #detailpage .txt-wrap .table-opt .period li:first-child {margin-left: 0;} #detailpage .txt-wrap .table-opt .rental-price {font-weight: bold; font-size: 14px; color: #000;} #detailpage .txt-wrap .table-opt .border {border-top: 1px solid #dddddd;} #detailpage .txt-wrap .table-opt .open-layer-tip {display: inline-block; margin-top: -3px;} #detailpage .txt-wrap .table-opt th {position: relative;} #detailpage .txt-wrap .table-opt th .layer-tip {display: none; position: absolute; top: 18px; left: 0; border: 2px solid #666666; z-index: 99;} #detailpage .txt-wrap .table-opt th .layer-tip .top {height: 28px; background: #f0f0f0; line-height: 28px; padding: 0 15px; position: relative;} #detailpage .txt-wrap .table-opt th .layer-tip .top .btn-close {display: inline-block; position: absolute; top: 8px; right: 9px; width: 9px; height: 9px;} #detailpage .txt-wrap .table-opt th .layer-tip .top .btn-close img {vertical-align: top;} #detailpage .txt-wrap .table-opt th .layer-tip .top p {font-size: 12px; font-weight: bold; color: #000000;} #detailpage .txt-wrap .table-opt th .layer-tip .cont {padding: 15px 20px; background: #fff; line-height: 18px; font-size: 11px; color: #666666;} #detailpage .txt-wrap .f-btns .btn-rental {display: block; line-height: 42px; text-align: center; background: #441e7c; font-size: 12px; color: #fff;} #detailpage .ico-rental {display: inline-block; font-weight: 400; margin-left: 5px; padding: 0 7px; line-height: 19px; background: #441e7c; font-size: 11px; color: #fff;} ② 모던 심플 [디자인 편집탭] <li>재고 수량 : <!--/stock/--></li> <!-- 렌탈 옵션 추가 s --> <li> <div class="rental-area"> <table> <colgroup> <col width="130"> <col width=""> </colgroup> <tr> <th><div class="tb-left">렌탈기간</div></th> <td> <div class="tb-right"> <ul class="period"> <!--/loop_rental_period/--> <!--/rental_period@block_period/--><label><!--/rental_period@radio_rental_period/--><span><!--/rental_period@period_txt/-->개월</span></label><!--/end_block/--> <!--/end_loop/--> </ul> </div> </td> </tr> <tr> <th> <div class="tb-left">선납금 <a href="#prepayments" class="open-layer-tip"><img src="/images/common/ico_shop_question.gif" alt=""></a></div> <div id="prepayments" class="layer-tip" style="width:310px;"> <div class="top"> <p>선납금이란?</p> <a href="#prepayments" class="btn-close"><img src="/images/common/btn_close_tip_layer_blue.gif" alt=""></a> </div> <div class="cont"> 총 렌탈료의 10%가 선납금으로 미리 결제됩니다.<br> 월 렌탈료는 선납금을 제외하여 계산됩니다. </div> </div> </th> <td> <div class="tb-right"> <!--/block_rental_prepayment/--><!--/end_block/-->원 </div> </td> </tr> <tr> <th><div class="tb-left">렌탈료</div></th> <td> <div class="tb-right"> <span class="rental-price">월 <!--/block_total_rental_price/--><!--/end_block/-->원</span> </div> </td> </tr> </table> </div> <!--/if_is_rental_product/--><a href="<!--/link_rental_buy/-->" class="btn-rental"><img src="/images/d3/modern_simple/btn/btn_rental_preview_buy.gif" alt="렌탈구매"></a><!--/end_if/--> </li> <!-- 렌탈 옵션 추가 e --> </ul> </div><!-- .table-opt --> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <a><img src="/images/d3/modern_simple/btn/btn_h22_soldout.gif" alt="품절" /></a> <!--/end_if/--> <!--/end_if/--> <!--/if_not_is_rental_product/--> <!--/if_not_soldout/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <img src="/images/d3/modern_simple/btn/btn_h22_subs.gif" alt="정기배송 신청" title="정기배송 신청" /></a> </div> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> </div> [CSS] /* 렌탈 옵션 */ #detailpage .txt-wrap .opt li .rental-area {padding: 10px 0 7px; background:#eeeeee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;} #detailpage .txt-wrap .opt li .rental-area .period {display: inline-block;} #detailpage .txt-wrap .opt li .rental-area .period li {float: left; width: 56px; padding: 0; margin:0 6px 0px 0; text-align: center; border: 1px solid #dfdfdf; } /* 23.01.12 수정 */ #detailpage .txt-wrap .opt li .rental-area .period li label {display: block; line-height: 22px; font-size: 11px; color: #555555; background: #fff; cursor: pointer;} /* 23.01.12 수정 */ #detailpage .txt-wrap .opt li .rental-area .period li label input {opacity: 0; filter:alpha(opacity=0); position: absolute;} /* 23.01.12 수정 */ #detailpage .txt-wrap .opt li .rental-area .period li.on {border: 1px solid #441e7c;} #detailpage .txt-wrap .opt li .rental-area .period li.on label { color: #441e7c;} /* 23.01.12 수정 */ #detailpage .txt-wrap .opt li .rental-area .period li:nth-child(3) {margin-right: 0;} #detailpage .txt-wrap .opt li .rental-area .period li:nth-child(4) {margin-bottom: 0; margin-top: 6px;} /* 23.01.12 수정 */ #detailpage .txt-wrap .opt li .rental-area .period li:nth-child(5) {margin-bottom: 0; margin-top: 6px;} /* 23.01.12 수정 */ #detailpage .txt-wrap .opt li .rental-area .rental-price {font-weight: bold; font-size: 14px; color: #000;} #detailpage .txt-wrap .opt li .rental-area .border {border-top: 1px solid #dddddd;} #detailpage .txt-wrap .opt li .rental-area .open-layer-tip {display: inline-block; margin-top: -3px;} #detailpage .txt-wrap .opt li .rental-area th {padding: 4px 0; line-height: 24px; position: relative; vertical-align: top; font-size: 12px; color: #777777; font-weight: 400;} #detailpage .txt-wrap .opt li .rental-area th .layer-tip {display: none; position: absolute; top: 18px; left: 0; border: 2px solid #93a4b3; z-index: 99; text-align: left; } #detailpage .txt-wrap .opt li .rental-area th .layer-tip .top {height: 28px; background: #edf0f4; line-height: 28px; padding: 0 15px; position: relative;} #detailpage .txt-wrap .opt li .rental-area th .layer-tip .top .btn-close {display: inline-block; position: absolute; top: 8px; right: 9px; width: 9px; height: 9px;} #detailpage .txt-wrap .opt li .rental-area th .layer-tip .top .btn-close img {vertical-align: top;} #detailpage .txt-wrap .opt li .rental-area th .layer-tip .top p {font-size: 12px; font-weight: bold; color: #000000;} #detailpage .txt-wrap .opt li .rental-area th .layer-tip .cont {padding: 15px; background: #fff; line-height: 18px; font-size: 11px; color: #666666;} #detailpage .txt-wrap .opt li .rental-area td {padding: 4px 0; font-size: 12px; color: #777777;} #detailpage .txt-wrap .opt li .btn-rental {display: block; margin-top: 20px;} [예시 이미지]
<<상품 상세>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 가상태그 - 렌탈상품 여부 확인: <!--/if_is_rental_product/--> - 렌탈상품 여부 확인 (렌탈 상품이 아닌 경우): <!--/if_not_is_rental_product/--> - 렌탈기간: <!--/loop_rental_period/--> - 선납금: <!--/block_rental_prepayment/--> - 월 렌탈금액: <!--/block_total_rental_price/--> - 렌탈구매 버튼: <!--/link_rental_buy/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. ① 베이직 심플 [디자인 편집탭] <div class="prd-icons"> <p class="prd-icon"><!--/icons/--> <!--/subs_icon/--> <!--/promotion_icon/--> <!--/if_is_rental_product/--><span class="ico-rental">렌탈</span><!--/end_if/--></p> <!--/if_not_is_rental_product/--> <div class="prd-wish"><p><!--/block_wish_cnt/--><!--/wish_cnt/--><!--/end_block/--></p></div> <!--/end_if/--> </div> <h3 class="tit-prd"><!--/name/--></h3> <div class="table-opt"> <table summary="판매가격, 적립금, 주문수량, 옵션, 사이즈, 상품조르기, sns"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_btn_scrap_tw/--><!--/btn_scrap_tw/--><!--/end_if/--> </div> </td> </tr> <!--/end_if/--> <!--/end_if/--> <!--/if_is_rental_product/--> <tr> <td colspan="2"> <div class="border"></div> </td> </tr> <tr> <th scope="row"><div class="tb-left">렌탈기간</div></th> <td> <div class="tb-right"> <ul class="period"> <!--/loop_rental_period/--> <!--/rental_period@block_period/--><label><!--/rental_period@radio_rental_period/--> <!--/rental_period@period_txt/-->개월</label><!--/end_block/--> <!--/end_loop/--> </ul> </div> </td> </tr> <tr> <th scope="row"> <div class="tb-left">선납금 <a href="#prepayments" class="open-layer-tip"><img src="/images/common/ico_shop_question.gif" alt=""></a></div> <div id="prepayments" class="layer-tip" style="width:310px;"> <div class="top"> <p>선납금이란?</p> <a href="#prepayments" class="btn-close"><img src="/images/common/btn_close_tip_layer.gif" alt=""></a> </div> <div class="cont"> 총 렌탈료의 10%가 선납금으로 미리 결제됩니다.<br> 월 렌탈료는 선납금을 제외하여 계산됩니다. </div> </div> </th> <td> <div class="tb-right"> <!--/block_rental_prepayment/--><!--/end_block/-->원 </div> </td> </tr> <tr> <th scope="row"><div class="tb-left">렌탈료</div></th> <td> <div class="tb-right"> <span class="rental-price">월 <!--/block_total_rental_price/--><!--/end_block/-->원</span> </div> </td> </tr> <tr> <td colspan="2"> <div class="border"></div> </td> </tr> <tr> <td colspan="2"> <div class="comment-txt"> * 할인 적용에 따라 상품 금액이 변경될 수 있습니다. </div> </td> </tr> <!--/end_if/--> </tbody> </table> </div><!-- .table-opt --> <div class="prd-btns"> <!--/if_link_rental_buy/--> <a href="#" onclick="<!--/link_rental_buy/-->" class="btn-rental">렌탈구매</a><!--/end_if/--> <div class="soldout-btns"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="soldout">SOLD OUT</div> <!--/end_if/--> <!--/end_if/--> <!--/if_not_is_rental_product/--> <!--/if_not_soldout/--> <a href="<!--/link_immediate/-->" class="btn_buy">BUY IT NOW</a> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_okcashbag_set/--> <!--/okcashbag_set/--> <!--/end_if/--> <!--/end_if/--> [CSS] /* 렌탈 상품 */ #productDetail .thumb-info .info .table-opt .period {display: inline-block;} #productDetail .thumb-info .info .table-opt .period li {float: left; width: 56px; margin-left: 6px; text-align: center; border: 1px solid #dfdfdf; } #productDetail .thumb-info .info .table-opt .period li label {display: block; line-height: 22px; font-size: 11px; color: #555555; position: relative; cursor: pointer;} #productDetail .thumb-info .info .table-opt .period li label input {position: absolute; opacity: 0; filter:alpha(opacity=0);} #productDetail .thumb-info .info .table-opt .period li.on {border: 1px solid #441e7c;} #productDetail .thumb-info .info .table-opt .period li.on label { color: #441e7c;} #productDetail .thumb-info .info .table-opt .period li:first-child {margin-left: 0;} #productDetail .thumb-info .info .table-opt .rental-price {font-weight: bold; font-size: 14px; color: #000;} #productDetail .thumb-info .info .table-opt .border {border-top: 1px solid #dddddd;} #productDetail .thumb-info .info .table-opt .open-layer-tip {display: inline-block; margin-top: -3px;} #productDetail .thumb-info .info .table-opt th {position: relative;} #productDetail .thumb-info .info .table-opt th .layer-tip {display: none; position: absolute; top: 18px; left: 0; border: 2px solid #666666; z-index: 99; text-align: left; } #productDetail .thumb-info .info .table-opt th .layer-tip .top {height: 28px; background: #f0f0f0; line-height: 28px; padding: 0 15px; position: relative;} #productDetail .thumb-info .info .table-opt th .layer-tip .top .btn-close {display: inline-block; position: absolute; top: 8px; right: 9px; width: 9px; height: 9px;} #productDetail .thumb-info .info .table-opt th .layer-tip .top .btn-close img {vertical-align: top;} #productDetail .thumb-info .info .table-opt th .layer-tip .top p {font-size: 12px; font-weight: bold; color: #000000;} #productDetail .thumb-info .info .table-opt th .layer-tip .cont {padding: 15px 20px; background: #fff; line-height: 18px; font-size: 11px; color: #666666;} #productDetail .thumb-info .info .prd-btns .btn-rental {display: block; line-height: 42px; text-align: center; background: #441e7c; font-size: 12px; color: #fff;} #productDetail .ico-rental {display: inline-block; font-weight: 400; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} #productDetail .thumb-info .info .table-opt .comment-txt {font-size: 12px; color: #777777;} [JS] // 대량구매 혜택 더보기 jQuery('.btn-view').on('click', function(){ jQuery(this).next().addClass('active'); }); jQuery('.view-wrap #view_close').click(function() { jQuery(this).parents().removeClass('active'); }); // 렌탈페이 $('.period li label').click(function(){ $(this).parent().addClass('on'); $(this).parent().siblings('li').removeClass('on'); }); $('.open-layer-tip').click(function(e){ e.preventDefault(); $(this.hash).show(); }); $('.layer-tip .btn-close').click(function(e){ e.preventDefault(); $(this.hash).hide(); }); })(jQuery); ② 모던 심플 [디자인 편집탭] <!--/form_product/--> <div class="info"> <!--/if_not_is_rental_product/--><div class="prd-wish"><p><!--/block_wish_cnt/--><!--/wish_cnt/--><!--/end_block/--></p></div><!--/end_if/--> <h3 class="tit-prd"><!--/name/--> <!--/icons/--> <!--/subs_icon/--> <!--/promotion_icon/--><!--/if_is_rental_product/--><span class="ico-rental">렌탈</span><!--/end_if/--></h3> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_btn_scrap_tw/--><!--/btn_scrap_tw/--><!--/end_if/--> </div> </td> </tr> <!-- 렌탈 옵션 s --> <!--/if_is_rental_product/--> <tr> <td colspan="2"> <div class="rental-area"> <table> <colgroup> <col width="130"> <col width=""> </colgroup> <tr> <th><div class="tb-left">렌탈기간</div></th> <td> <div class="tb-right"> <ul class="period"> <!--/loop_rental_period/--> <!--/rental_period@block_period/--><label><!--/rental_period@radio_rental_period/--><!--/rental_period@period_txt/-->개월</label><!--/end_block/--> <!--/end_loop/--> </ul> </div> </td> </tr> <tr> <th> <div class="tb-left">선납금 <a href="#prepayments" class="open-layer-tip"><img src="/images/common/ico_shop_question.gif" alt=""></a></div> <div id="prepayments" class="layer-tip" style="width:310px;"> <div class="top"> <p>선납금이란?</p> <a href="#prepayments" class="btn-close"><img src="/images/common/btn_close_tip_layer_blue.gif" alt=""></a> </div> <div class="cont"> 총 렌탈료의 10%가 선납금으로 미리 결제됩니다.<br> 월 렌탈료는 선납금을 제외하여 계산됩니다. </div> </div> </th> <td> <div class="tb-right"> <!--/block_rental_prepayment/--><!--/end_block/-->원 </div> </td> </tr> <tr> <th><div class="tb-left">렌탈료</div></th> <td> <div class="tb-right"> <span class="rental-price">월 <!--/block_total_rental_price/--><!--/end_block/-->원</span> </div> </td> </tr> </table> </div> </td> </tr> <tr> <td colspan="2"> <div class="comment-txt"> * 할인 적용에 따라 상품 금액이 변경될 수 있습니다. </div> </td> </tr> <!-- 렌탈 옵션 e --> <!--/end_if/--> </tbody> </table> </div><!-- .table-opt --> <div class="prd-btns"> <!--/if_link_rental_buy/--><a href="#" onclick="<!--/link_rental_buy/-->"><img src="/images/d3/modern_simple/btn/btn_rental_buy.gif" alt="렌탈구매"></a><!--/end_if/--> <div class="soldout-btns"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div style="text-align: right; color: #525252; font-size: 12px; font-weight: bold;">상품이 품절되었습니다.</div> <!--/end_if/--> <!--/end_if/--> <!--/if_not_is_rental_product/--> <!--/if_not_soldout/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/btn_nhn/--> <!--/end_if/--> <!--/end_if/--> <!--/if_btn_app/--> [CSS] /* 렌탈 옵션 */ #productDetail .thumb-info .info .table-opt .rental-area {padding: 15px 0 7px; background:#eeeeee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;} #productDetail .thumb-info .info .table-opt .rental-area .period {display: inline-block;} #productDetail .thumb-info .info .table-opt .rental-area .period li {float: left; width: 56px; margin:0 6px 0px 0; text-align: center; border: 1px solid #dfdfdf; } /* 23.01.12 수정 */ #productDetail .thumb-info .info .table-opt .rental-area .period li label {display: block; line-height: 22px; font-size: 11px; color: #555555; background: #fff; cursor: pointer;} /* 23.01.12 수정 */ #productDetail .thumb-info .info .table-opt .rental-area .period li label input {opacity: 0; filter:alpha(opacity=0); position: absolute;} /* 23.01.12 수정 */ #productDetail .thumb-info .info .table-opt .rental-area .period li.on {border: 1px solid #441e7c;} #productDetail .thumb-info .info .table-opt .rental-area .period li.on label { color: #441e7c;} /* 23.01.12 수정 */ #productDetail .thumb-info .info .table-opt .rental-area .period li:nth-child(3) {margin-right: 0;} #productDetail .thumb-info .info .table-opt .rental-area .period li:nth-child(4) {margin-bottom: 0; margin-top: 6px;} /* 23.01.12 수정 */ #productDetail .thumb-info .info .table-opt .rental-area .period li:nth-child(5) {margin-bottom: 0; margin-top: 6px;} /* 23.01.12 수정 */ #productDetail .thumb-info .info .table-opt .rental-area .rental-price {font-weight: bold; font-size: 14px; color: #000;} #productDetail .thumb-info .info .table-opt .rental-area .border {border-top: 1px solid #dddddd;} #productDetail .thumb-info .info .table-opt .rental-area .open-layer-tip {display: inline-block; margin-top: -3px;} #productDetail .thumb-info .info .table-opt .rental-area th {padding: 4px 0; line-height: 24px; position: relative; vertical-align: top; font-size: 12px; color: #777777;} #productDetail .thumb-info .info .table-opt .rental-area th .layer-tip {display: none; position: absolute; top: 18px; left: 0; border: 2px solid #93a4b3; z-index: 99; text-align: left; } #productDetail .thumb-info .info .table-opt .rental-area th .layer-tip .top {height: 28px; background: #edf0f4; line-height: 28px; padding: 0 15px; position: relative;} #productDetail .thumb-info .info .table-opt .rental-area th .layer-tip .top .btn-close {display: inline-block; position: absolute; top: 8px; right: 9px; width: 9px; height: 9px;} #productDetail .thumb-info .info .table-opt .rental-area th .layer-tip .top .btn-close img {vertical-align: top;} #productDetail .thumb-info .info .table-opt .rental-area th .layer-tip .top p {font-size: 12px; font-weight: bold; color: #000000;} #productDetail .thumb-info .info .table-opt .rental-area th .layer-tip .cont {padding: 15px; background: #fff; line-height: 18px; font-size: 11px; color: #666666;} #productDetail .thumb-info .info .table-opt .rental-area td {padding: 4px 0; font-size: 12px; color: #777777;} #productDetail .ico-rental {display: inline-block; font-weight: 400; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} #productDetail .thumb-info .info .tit-prd {overflow: hidden;} #productDetail .thumb-info .info .tit-prd > span {float: left;} #productDetail .thumb-info .info .tit-prd > span.MK-product-icons {margin-left: 5px;} [JS] // 대량구매 혜택 더보기 jQuery('.btn-view').on('click', function(){ jQuery(this).next().addClass('active'); }); jQuery('.view-wrap #view_close').click(function() { jQuery(this).parents().removeClass('active'); }); // 렌탈 구매 $('.period li label').click(function(){ // 23.01.12 수정 $(this).parent().addClass('on'); $(this).parent().siblings('li').removeClass('on'); }); $('.open-layer-tip').click(function(e){ e.preventDefault(); $(this.hash).show(); }); $('.layer-tip .btn-close').click(function(e){ e.preventDefault(); $(this.hash).hide(); }); })(jQuery); [예시 이미지]
<< 상품 검색>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 검색 결과 화면 2. 가상태그 - 렌탈상품 여부 확인: <!--/if_product@is_rental_pay/--> - 월 렌탈금액 표시: <!--/number/product@rental_price/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. ① 베이직 심플 [디자인 편집탭] <li class="prd-ico"><!--/product@icons/--> <!--/product@subs_icon/--><!--/product@promotion_icon/--> <!-- 렌탈아이콘 추가 --><!--/if_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--></li> <li class="prd-name"><a href="<!--/product@link/-->"><!--/product@name/--></a></li> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_product@price_discount/--> <!--/if_product@is_rental_pay/--> <span class="price">월 <!--/number/product@rental_price/-->원~</span> <!--/else/--> <strike><!--/number/product@price_sell/-->원</strike> <span class="price"><!--/number/product@price_discount/-->원</span> <!--/end_if/--> <!--/else/--> <!--/if_product@is_rental_pay/--> <span class="price">월 <!--/number/product@rental_price/-->원~</span> <!--/else/--> <!--/if_product@price_consumer(+1)/--> <strike><!--/number/product@price_consumer/-->원</strike> <!--/end_if/--> <span class="price"><!--/number/product@price_sell/-->원</span> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> </li> <!--/if_product@color/--> <li class="prd-color"> <!--/loop_product@color/--> <font color="<!--/product@color@code/-->">■</font> [CSS] /* 렌탈아이콘 */ .item-wrap .item-cont .item-list .ico-rental {display: inline-block; font-weight: 400; margin-right: 3px; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} ② 모던 심플 [디자인 편집탭] <!--/product@icons/--> <!--/product@subs_icon/--><!--/product@promotion_icon/--> <!--/product@present_icon/--> <!-- 렌탈아이콘 추가 --><!--/if_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--> <!--/product@name(30)/--> <!--/product@btn_option_preview/--> <!--/if_product@link_pop_product_benefit/--> <a href="<!--/product@link_pop_product_benefit/-->"><img src="/images/d3/modern_simple/btn_benefit.gif" alt="혜택팝업보기" /></a> <!--/end_if/--> </li> <li class="price"> <!--/if_product@is_rental_pay/--> 월 <!--/number/product@rental_price/-->원~ <!--/else/--> <!--/number/product@price_sell/-->원 <!--/end_if/--> </li> [CSS] /* 렌탈아이콘 */ .ico-rental {display: inline-block; font-weight: 400; margin-right: 3px; padding: 0 7px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} [예시 이미지]
[MO 버전]
<< 상품 메인>> 1. 작업 위치 - 중앙 디자인 > 메인 2. 가상태그 - 메인 NEW ARRIVAL 영역 > 렌탈상품 여부 확인 : <!--/if_new_product_list@is_rental_pay/--> - 메인 NEW ARRIVAL 영역 > 월 렌탈금액: <!--/number/new_product_list@rental_price/--> - 메인 RECOMMEND ITEM 영역 > 렌탈상품 여부 확인 : <!--/if_recmd_product_list@is_rental_pay/--> - 메인 RECOMMEND ITEM 영역 > 월 렌탈금액: <!--/number/recmd_product_list@rental_price/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. 1) 메인 NEW ARRIVAL 영역 > 렌탈 아이콘 표시 <p><!--/new_product_list@mobile_icons/--><!--/new_product_list@subs_icon/--><!--/new_product_list@promotion_icon_mobile/--> <!-- 렌탈아이콘 추가 --><!--/if_new_product_list@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--></p> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <p class="listPrice"><!--/number/new_product_list@price_sell/-->원</p> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> 2) 메인 NEW ARRIVAL 영역 > 월 렌탈 금액 표시 <p class="listReplce"><!--/new_product_list@price_replace/--></p> <!--/else/--> <!--/if_new_product_list@is_rental_pay/--> <p class="listPrice">월 <!--/number/new_product_list@rental_price/-->원~</p> <!--/else/--> <!--/if_new_product_list@price_discount/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/else/--> <p class="listPrice"><!--/number/new_product_list@price_sell/-->원</p> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> ※ 메인 RECOMMEND ITEM영역에는<!--/if_new_product_list@is_rental_pay/-->, <!--/number/new_product_list@rental_price/--> 가상태그 대신 아래 가상태그를 넣으시면 됩니다. - 메인 RECOMMEND ITEM 영역: <!--/if_recmd_product_list@is_rental_pay/-->, <!--/number/recmd_product_list@rental_price/--> [CSS] /* 렌탈아이콘 */ .main .ico-rental {display: inline-block; font-weight: 400; padding: 0 5px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} [예시 이미지]
<<상품 목록>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 분류 페이지 > 기본 분류 페이지 2. 가상태그 - 목록 BEST 영역 > 렌탈상품 여부 확인: <!--/if_best_product@is_rental_pay/--> - 목록 BEST 영역 > 월 렌탈금액: <!--/number/best_product@rental_price/--> - 목록 갤러리형/리스트형 렌탈상품 여부 확인: <!--/if_product_list@is_rental_pay/--> - 목록 갤러리형/리스트형 월 렌탈금액: <!--/number/product_list@rental_price/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. [디자인 편집탭] 1) 목록 BEST 영역 > 렌탈 아이콘 표시 <p><!--/best_product@mobile_icons/--><!--/best_product@subs_icon/--><!--/best_product@promotion_icon_mobile/--><!-- 렌탈아이콘 추가 --><!--/if_best_product@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--></p> 2) 목록 BEST 영역 > 월 렌탈금액 표시 <!--/if_best_product@is_soldout/--> <p class="listSoldout">(품절)</p> <!--/else/--> <!--/if_best_product@is_rental_pay/--> <p class="listPrice">월 <!--/number/best_product@rental_price/-->원~</p> <!--/else/--> <!--/if_best_product@price_replace/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <p class="listPrice"><!--/number/best_product@price_sell/-->원</p> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> ※ 목록 갤러리형/리스트형 영역에는 <!--/if_best_product@is_rental_pay/-->, <!--/number/best_product@rental_price/--> 가상태그 대신 아래 가상태그를 넣으시면 됩니다. - 목록 갤러리형/리스트형 영역: <!--/if_product_list@is_rental_pay/-->, <!--/number/product_list@rental_price/--> [CSS] /* 렌탈아이콘 */ .shopbrand .ico-rental {display: inline-block; font-weight: 400; padding: 0 5px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} [예시 이미지]
<<미리보기>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 미리보기 화면 2. 가상태그 - 렌탈상품 여부 확인: <!--/if_is_rental_product/--> - 렌탈기간: <!--/loop_rental_period/--> - 선납금: <!--/block_rental_prepayment/--> - 월 렌탈금액: <!--/block_total_rental_price/--> - 렌탈구매 버튼: <!--/link_rental_buy/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. [디자인 편집탭] <h3 class="ptit"><!--/mobile_icons/--> <!--/subs_icon/--> <!--/promotion_icon_mobile/--> <!--/if_is_rental_product/--><span class="rental-ico">렌탈</span><!--/end_if/--> <!--/notag/name/--></h3> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <li class="p-total"><span class="prev-tit">총 상품 금액</span><span class="total-price"><!--/number/option_price_sell/--></span>원</li> <!--/end_if/--> <!--/if_is_rental_product/--> <li> <div class="rentalArea"> <div class="rental-info"> <div> <span class="tit">렌탈기간</span> <div class="period"> <ul> <!--/loop_rental_period/--> <!--/rental_period@block_period/--><label><!--/rental_period@radio_rental_period/--><span><!--/rental_period@period_txt/-->개월</span></label><!--/end_block/--> <!--/end_loop/--> </ul> </div> </div> <div> <span class="tit"><a href="#" onclick="javascript:desc_rental_prepayment();return false;">선납금 <span class="fa fa-info-circle fa-lg"></span></a></span> <span class="advance"><!--/block_rental_prepayment/--><!--/end_block/-->원</span> </div> <div> <span class="tit">렌탈료</span> <span class="price">월 <strong><!--/block_total_rental_price/--><!--/end_block/--></strong>원</span> </div> </div> </div> <div class="comment-txt" style="margin-top:10px; color:#777;">* 할인 적용에 따라 상품 금액이 변경될 수 있습니다. </div> </li> <!--/end_if/--> </ul> </div><!-- .table-opt --> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_not_soldout/--> <!--/if_is_rental_product/--> <li> <a href="<!--/link_rental_buy/-->" class="btn-rental-buy">렌탈구매</a> </li> <!--/else/--> <!--/if_cart_free/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <a href="<!--/link_subs/-->">정기배송 신청</a> </li> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/end_form/--> <script> function desc_rental_prepayment() { alert('총 렌탈료의 10%가 선납금으로 미리 결제됩니다.\n월 렌탈료는 선납금을 제외하여 계산됩니다.'); } $(function() { //렌탈 기간 클릭 $('.rentalArea .period li label').click(function(){ $(this).parent('li').addClass('on'); $(this).parent('li').siblings('li').removeClass('on'); }); }); </script> [CSS] /* 렌탈 영역 추가 */ #detailpage .rentalArea {margin-top: 10px;} #detailpage .rentalArea .rental-info {padding: 10px 5px 5px; border: 1px solid #d6d6d6; background: #f6f6f6;} #detailpage .rentalArea .rental-info > div {margin-top: 10px; overflow: hidden;} #detailpage .rentalArea .rental-info > div:first-child {margin-top: 0;} #detailpage .rentalArea .rental-info > div > span {float: left;} #detailpage .rentalArea .rental-info > div .tit {width: 25%; line-height: 34px; font-size: 0.875em; color: #000;} #detailpage .rentalArea .rental-info > div .period {float: right; width: 220px; text-align: right;} #detailpage .rentalArea .rental-info > div .period ul {display: inline-block; } #detailpage .rentalArea .rental-info > div .period ul li {float: left; width: 68px; margin: 0 0 5px 5px; box-sizing:border-box; border: 1px solid #d6d6d6; line-height: 26px; text-align: center; background: #fff;} #detailpage .rentalArea .rental-info > div .period li label {display: block; font-size: 0.875em; color: #666666; position: relative;} #detailpage .rentalArea .rental-info > div .period li label input {opacity: 0; position: absolute;} #detailpage .rentalArea .rental-info > div .period li.on {border: 1px solid #431e7d;} #detailpage .rentalArea .rental-info > div .period li.on label {color: #431e7d;} #detailpage .rentalArea .rental-info > div .advance {float: right; line-height: 34px; font-size: 13px; color: #000;} #detailpage .rentalArea .rental-info > div .price {float: right; line-height: 34px; color: #000; font-size: 16px;} #detailpage .f-btns .btn-rental-buy {display: block; line-height: 50px; width: 100%; text-align: center; background: #431e7d; font-size: 12px; font-weight: bold; color: #fff;} #detailpage .rental-ico {display: inline-block; width: 30px; line-height: 18px; text-align: center; background: #441e7c; font-weight: bold; font-size: .875em; color: #fff;} [예시 이미지]
<<상품 상세>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 가상태그 - 렌탈상품 여부 확인: <!--/if_is_rental_product/--> - 렌탈상품 여부 확인 (렌탈 상품이 아닌 경우): <!--/if_not_is_rental_product/--> - 렌탈기간: <!--/loop_rental_period/--> - 선납금: <!--/block_rental_prepayment/--> - 월 렌탈금액: <!--/block_total_rental_price/--> - 렌탈구매 버튼: <!--/link_rental_buy/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. [디자인 편집탭] </nav> <section class="shopdetailInfo"> <!--/if_not_is_rental_product/--> <div class="prd-wish"><p><i class="fa fa-heart"></i><!--/block_wish_cnt/--><!--/wish_cnt/--><!--/end_block/--></p></div> <!--/end_if/--> <h2><!--/notag/name/--></h2> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <img src="/images/d3/m_04/bt_option@2x.png" width="67" height="18" alt="옵션열기" class="btn_option"/> <!--/if_link_rental_buy/--> <!-- 렌탈 구매 버튼 추가 --> <a href="#" onclick="<!--/link_rental_buy/-->" class="btn_Purple">렌탈구매</a> <!--/else/--> <a href="#" class="btn_Red">구매하기</a> <!--/end_if/--> </div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!-- //멀티옵션 수량, 가격 --> </div> <!--/end_if/--> <!--/if_is_rental_product/--> <!-- 렌탈 선택 영역 s --> <div class="rentalArea"> <div class="rental-info"> <div> <span class="tit">렌탈기간</span> <div class="period"> <ul class="period"> <!--/loop_rental_period/--> <!--/rental_period@block_period/--><label><!--/rental_period@radio_rental_period/--><!--/rental_period@period_txt/-->개월</label><!--/end_block/--> <!--/end_loop/--> </ul> </div> </div> <div> <span class="tit"><a href="#" onclick="javascript:desc_rental_prepayment();return false;">선납금 <span class="fa fa-info-circle fa-lg"></span></a></span> <span class="advance"><!--/block_rental_prepayment/--><!--/end_block/-->원</span> </div> <div> <span class="tit">렌탈료</span> <span class="price">월 <strong><!--/block_total_rental_price/--><!--/end_block/--></strong>원</span> </div> </div> <div class="comment-txt"> * 할인 적용에 따라 상품 금액이 변경될 수 있습니다. </div> <div class="btn"> <a href="#" onclick="<!--/link_rental_buy/-->" class="btn-rental-buy">렌탈구매</a> </div> </div> <!-- 렌탈 선택 영역 e --> <!--/end_if/--> </div> <div class="buy_on"> <!--/if_is_rental_product/--> <a href="#" onclick="<!--/link_rental_buy/-->" class="btn-rental">렌탈구매</a> <!--/else/--> <a href="<!--/link_basket/-->">장바구니</a> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <a href="<!--/link_subs/-->" class="subs">정기배송 신청</a> <!--/end_if/--> <!--/end_if/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!-- 상품 배송정보 영역 --> <!--/if_not_is_rental_product/--> <!--/if_usergroup_name/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ </div> <!--/end_if/--> <!--/end_if/--> <!-- //상품 배송정보 영역 --> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_not_soldout/--> <!--/if_selling/--> <!--/if_not_is_rental_product/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <a href="<!--/link_subs/-->" class="subs">정기배송 신청</a> <!--/end_if/--> <!--/end_if/--> <!--/else/--> <!--/if_not_is_rental_product/--> <a href="<!--/link_wish_toggle/-->" class="wish"><!--/block_btn_wish/--><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><!--/end_block/-->관심상품</a> <!--/end_if/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <p>선택하신 상품은 관리자에게 문의하세요.</p> <!--/end_if/--> <!--/end_if/--> </div> <!--/if_not_is_rental_product/--> <!--/if_btn_shoppay/--> <!--/btn_shoppay/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="okdgg-checkout"> <!--/btn_dgg/--> </div> <!--/end_if/--> <!--/end_if/--> [CSS] /* 렌탈구매 옵션 */ .shopdetail .shopdetailInfo .rentalArea {padding: 20px 15px; border-top: 1px solid #4a4a4a;} .shopdetail .shopdetailInfo .rentalArea .rental-info {padding: 10px 15px; border: 1px solid #d6d6d6; background: #f6f6f6;} .shopdetail .shopdetailInfo .rentalArea .rental-info > div {margin-top: 10px; overflow: hidden;} .shopdetail .shopdetailInfo .rentalArea .rental-info > div:first-child {margin-top: 0;} .shopdetail .shopdetailInfo .rentalArea .rental-info > div > span {float: left;} .shopdetail .shopdetailInfo .rentalArea .rental-info > div .tit {width: 25%; line-height: 34px; font-size: 12px; color: #000;} /* 22.01.17 수정 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period {float: right; width: 225px; text-align: right;} /* 22.01.17 추가 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period ul {display: inline-block; } /* 22.01.17 수정 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period ul li {float: left; width: 70px; margin: 0 0 5px 5px; box-sizing:border-box; border: 1px solid #d6d6d6; line-height: 32px; text-align: center; background: #fff;} /* 22.01.17 수정 */ /*.shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li:nth-child(4), .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li:nth-child(5) {margin: 2.5% 2.5% 0 0;} /* 22.01.17 수정 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li label {display: block; font-size: 12px; color: #666666; position: relative;} /* 23.01.12 수정 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li label input {opacity: 0; position: absolute;} /* 23.01.12 추가 */ /*.shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li:first-child {margin-left: 0;} *//* 22.01.17 수정 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li.on {border: 1px solid #431e7d;} .shopdetail .shopdetailInfo .rentalArea .rental-info > div .period li.on label {color: #431e7d;} /* 23.01.12 수정 */ .shopdetail .shopdetailInfo .rentalArea .rental-info > div .advance {float: right; line-height: 34px; font-size: 15px; color: #000;} .shopdetail .shopdetailInfo .rentalArea .rental-info > div .price {float: right; line-height: 34px; color: #000; font-size: 18px;} .shopdetail .shopdetailInfo .rentalArea .comment-txt {line-height: 35px; font-size: 12px; color: #777777;} .shopdetail .shopdetailInfo .rentalArea .btn .btn-rental-buy {display: block; line-height: 50px; width: 100%; text-align: center; background: #431e7d; font-size: 12px; font-weight: bold; color: #fff;} .btn_Purple {width:100%; height:40px; line-height:40px; background-color:#431e7d; color:#fff; text-align:center; display:block; border:1px solid #431e7d; box-sizing: border-box; vertical-align: middle;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on .btn-rental {display: block; width: 100%; padding: 0; margin: 0; line-height: 50px; border: 1px solid #431e7d; background: #431e7d; text-align: center; font-size: 12px; color: #fff; font-weight: bold;} .shopdetail .shopdetailInfo .option_area.fixed .rentalArea .btn .btn-rental-buy {display: none;} [JS] // 렌탈구매 $('.rentalArea .period li label').click(function(){ $(this).parent('li').addClass('on'); $(this).parent('li').siblings('li').removeClass('on'); }); function desc_rental_prepayment() { alert('총 렌탈료의 10%가 선납금으로 미리 결제됩니다.\n월 렌탈료는 선납금을 제외하여 계산됩니다.'); } [예시 이미지]
<<상품 검색>> 1. 작업 위치 - 중앙 디자인 > 상품관련 > 상품 검색 결과 화면 2. 가상태그 - 렌탈상품 여부 확인: <!--/if_product_list@is_rental_pay/--> - 월 렌탈금액: <!--/number/product_list@rental_price/--> 3. 예제 소스 * 아래 빨간색 소스를 넣어주세요. [디자인 편집탭] 1) 리스트형 > 렌탈금액 표시 <!--/if_product_list@price_replace/--> <p class="listReplce"><!--/product_list@price_replace/--></p> <!--/else/--> <!--/if_product_list@price_discount/--> <!--/if_product_list@is_rental_pay/--> <p class="listPrice">월 <!--/number/product_list@rental_price/-->원~</p> <!--/else/--> <p class="listDiscount"><del><!--/number/product_list@price_sell/-->원</del></p> <p class="listPrice"> <!--/if_product_list@discount_apply_type(mobile)/--> <span class="fa fa-mobile fa-lg"> </span> <!--/end_if/--> <!--/number/product_list@price_discount/-->원 </p> <!--/end_if/--> <!--/else/--> <!--/if_product_list@is_rental_pay/--> <p class="listPrice">월 <!--/number/product_list@rental_price/-->원~</p> <!--/else/--> <p class="listPrice"><!--/number/product_list@price_sell/-->원</p> <!--/end_if/--> <!--/end_if/--> <!--/end_if/--> 2) 리스트형 > 렌탈 아이콘 표시 <p><!--/product_list@mobile_icons/--> <!--/product_list@subs_icon/--><!--/product_list@promotion_icon_mobile/--> <!-- 렌탈아이콘 추가 --><!--/if_product_list@is_rental_pay/--><span class="ico-rental">렌탈</span><!--/end_if/--></p> ※ 목록 갤러리형 영역에도 동일한 가상태그를 넣으시면 됩니다. [CSS] /* 렌탈아이콘 */ #search .ico-rental {display: inline-block; font-weight: 400; padding: 0 5px; line-height: 17px; background: #441e7c; font-size: 11px; color: #fff;} [예시 이미지]
목록 1:1 문의