무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

스마트 정기배송 작업방법

글번호 : 994

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=994
정기배송 이란? 주기적으로 구매하는 상품들을 원하는 주기와 요일에 맞춰 자동으로 결제/주문되는 서비스입니다. << 기능 설정 >> 상품관리 > 정기배송 설정 > 정기배송 사용여부 [사용함] 설정 후 해당 기능을 사용하실 수 있습니다. * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다.
[ PC버전 ] << 메인 페이지 >> 1. 작업위치 중앙 디자인 > 메인 > 메인 2. 가상태그 - 신규 상품 정기배송 아이콘 : <!--/new_product@subs_icon/--> - 추천 상품 정기배송 아이콘 : <!--/recmd_product@subs_icon/--> - 특별 상품 정기배송 아이콘 : <!--/special_product@subs_icon/--> - 추가상품 정기배송 아이콘 : <!--/add[CODE]_product@subs_icon/--> - 베스트 상품 정기배송 아이콘 : <!--/best_product@subs_icon/--> 3. 예제소스 [ 디자인 편집탭 ] 1) 특별 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/special_product@icons/--><!--/special_product@subs_icon/--></li> 2) 신규 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/new_product@icons/--><!--/new_product@subs_icon/--></li> 3) 추천 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/recmd_product@icons/--><!--/recmd_product@subs_icon/--></li> << 상품 분류페이지 >> 1. 작업위치 중앙 디자인 > 상품관련 > 상품 분류 페이지 2. 가상태그 - 베스트 상품 > 정기배송 아이콘 : <!--/best_product@subs_icon/--> - 상품 > 정기배송 아이콘 : <!--/product@subs_icon/--> - 프로모션 상품 > 정기배송 아이콘 : <!--/promotion_product@subs_icon/--> - 추천 상품 > 정기배송 아이콘 : <!--/recmd_product@subs_icon/--> 3. 예제소스 [ 디자인 편집탭 ] 1) 베스트 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/best_product@icons/--> <!--/best_product@subs_icon/--></li> 2) 추천 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/recmd_product@icons/--> <!--/recmd_product@subs_icon/--></li> 3) 일반 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/product@icons/--> <!--/product@subs_icon/--></li> << 상품 상세페이지 >> 1. 작업위치 중앙 디자인 > 상품관련 > 상품 상세 페이지 2. 가상태그 - 정기배송 링크 : <!--/link_subs/--> - 정기배송 할인율 : <!--/subs_discount_percent/--> - 정기배송 상품 아이콘 : <!--/subs_icon/--> - 정기배송 가격 : <!--/subs_price/--> 3. 예제소스 (베이직 심플 스킨 기준) [ 디자인 편집탭 ] 1) 정기배송 아이콘 노출 <!--/form_product/--> <div class="info"> <p class="prd-icon"><!--/icons/--> <!--/subs_icon/--></p> <h3 class="tit-prd"><!--/name/--></h3> <div class="table-opt"> 2) 정기배송 가격 노출 <!--/if_link_subs/--> <tr> <th scope="row"><div class="tb-left">정기배송 가격</div></th> <td class="price"> <div class="tb-left"> <!--/number/subs_price/-->원 </div> </td> </tr> <!--/end_if/--> 3) 정기배송 신청 버튼 <!--/if_link_subs/--> <a href="<!--/link_subs/-->" class="btn_subs">정기배송 신청</a> <!--/end_if/--> [ CSS 탭 ] /* 정기배송 */ #productDetail .thumb-info .info .prd-btns .btn_subs { display:block; width:448px; height:48px; font-size:12px; color:#fff; text-align:center; line-height:50px; border:1px solid #f1191f; background:#f1191f; } #productDetail .thumb-info .info .prd-btns .btn_subs:hover { color:#000; background:#fff } #productDetail .thumb-info .info .prd-btns .btn_subs:active { position: relative; top: 1px; } << 장바구니 >> 1. 작업위치 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 장바구니 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 통합장바구니2 2. 가상태그 - 정기배송 이동 링크 : <!--/link_subs_basket/--> - 정기배송 장바구니 개수 : <!--/user_subs_basket_count/--> - 정기배송 사용여부 : <!--/use_subs/--> 3. 예제소스 - 정기배송 사용시, 정기배송 장바구니를 추가하는 소스 (일반상품 장바구니와 정기배송 장바구니를 탭으로 구분) [ 디자인 편집탭 ] <!--/if_use_subs/--> <div class="carttabWrap"> <ul class="cart-tab"> <li class="now"><a href="<!--/link_normal_basket/-->">일반구매 (<!--/number/user_normal_basket_count/-->)</a></li> <li><a href="<!--/link_subs_basket/-->">정기배송 (<!--/number/user_subs_basket_count/-->)</a></li> </ul> </div> <!--/end_if/--> [ CSS 탭 ] /* 정기배송 탭 */ #cartWrap .cart-tab:after { clear: both; content: ""; display: block; } #cartWrap .cart-tab { height:68px; margin:50px 0 0 3px; border-bottom:2px solid #000; } #cartWrap .cart-tab li { float:left; width:50%; height:67px; margin-left:-6px; *margin-left:-7px; border:1px solid #d5d5d5; border-bottom:none; background:#f9f9f9; } #cartWrap .cart-tab li:first-child { margin-left:0; } #cartWrap .cart-tab li a { display:block; line-height:70px; font-weight:bold; color:#898989; font-size:18px; text-align:center; text-decoration:none; background:none; } #cartWrap .cart-tab li.now { position:relative; z-index:1; height:68px; border:2px solid #000; border-bottom:none; background:#fff; } #cartWrap .cart-tab li.now a { line-height:68px; color:#000; } << 마이페이지 >> * 마이페이지 > shopping info 에 정기배송 관리 페이지로 이동하는 링크 추가하는 소스 1. 작업위치 상단/측면/하단 디자인 > 측면 > 마이페이지 측면 2. 가상태그 - 마이페이지 > 정기배송 관리(LINK) : <!--/link_mypage_subs/--> 3. 예제소스 [ 디자인 편집탭 ] <!--/if_link_mypage_subs/--> <li><a href="<!--/link_mypage_subs/-->">정기배송 관리</a></li> <!--/end_if/--> * 마이페이지 > 최근 주문정보 > 정기배송 주문건에 정기배송 아이콘 추가하는 소스 1. 작업위치 중앙디자인 > 마이페이지 > 마이페이지 메인 2. 가상태그 - 정기배송 링크 : <!--/link_subs/--> - 정기배송 결제 여부 : <!--/order_list@is_subs_order/--> 3. 예제소스 [ 디자인 편집탭 ] <td><div class="tb-left"><!--/order_list@brand_name/--><!--/if_order_list@is_subs_order/--> <img src="/images/common/btn_subs_order.jpg" alt="정기배송 결제" title="정기배송 결제" /><!--/end_if/--></div></td>
[ 모바일버전 ] << 상단 메뉴 >> 1. 작업위치 상단/하단 디자인 > 상단 2. 가상태그 - 정기배송 링크 : <!--/link_subs/--> 3. 예제소스 * 모바일샵 상단에서 정기배송 관리 페이지로 이동하는 링크 추가하는 소스 [ 디자인 편집탭 ] <!--/if_link_subs/--> <li><a href="<!--/link_subs/-->">정기배송 관리</a></li> <!--/end_if/--> << 메인 페이지 >> 1. 작업위치 중앙 디자인 > 메인 > 메인 2.. 가상태그 - 신규 상품 정기배송 아이콘 : <!--/new_product@subs_icon/--> - 추천 상품 정기배송 아이콘 : <!--/recmd_product@subs_icon/--> - 특별 상품 정기배송 아이콘 : <!--/special_product@subs_icon/--> - 추가상품 정기배송 아이콘 : <!--/add[CODE]_product@subs_icon/--> - 베스트 상품 정기배송 아이콘 : <!--/best_product@subs_icon/--> 3. 예제소스 [ 디자인 편집탭 ] 1) 신규 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/new_product@icons/--><!--/new_product@subs_icon/--></li> 2) 추천 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/recmd_product@icons/--><!--/recmd_product@subs_icon/--></li> << 상품 분류페이지 >> 1. 작업위치 중앙 디자인 > 상품관련 > 상품 분류 페이지 2. 가상태그 - 베스트 상품 > 정기배송 아이콘 : <!--/best_product@subs_icon/--> - 상품 > 정기배송 아이콘 : <!--/product@subs_icon/--> - 프로모션 상품 > 정기배송 아이콘 : <!--/promotion_product@subs_icon/--> - 추천 상품 > 정기배송 아이콘 : <!--/recmd_product@subs_icon/--> 3. 예제소스 [ 디자인 편집탭 ] 1) 베스트 상품에 정기배송 아이콘 노출 <li class="prd-ico"><!--/best_product@icons/--> <!--/best_product@subs_icon/--></li> 2) 일반 상품에 정기배송 아이콘 노출 <p><!--/product_list@mobile_icons/--><!--/product_list@subs_icon/--></p> << 상품 상세페이지 >> 1. 작업위치 중앙 디자인 > 상품관련 > 상품 상세 페이지 2. 가상태그 - 정기배송 링크 : <!--/link_subs/--> - 정기배송 할인율 : <!--/subs_discount_percent/--> - 정기배송 상품 아이콘 : <!--/subs_icon/--> - 정기배송 가격 : <!--/subs_price/--> 3. 예제소스 (베이직 심플 스킨 기준) [ 디자인 편집탭 ] 1) 정기배송 가격 노출 <!--/if_link_subs/--> <tr> <th scope="row"><div class="tb-left">정기배송 가격</div></th> <td class="price"> <div class="tb-left"> <!--/number/subs_price/-->원 </div> </td> </tr> <!--/end_if/--> 2) 정기배송 신청 버튼 <!--/if_link_subs/--> <a href="<!--/link_subs/-->" class="btn_subs">정기배송 신청</a> <!--/end_if/--> [ CSS 탭 ] /* 정기배송 */ #productDetail .thumb-info .info .prd-btns .btn_subs { display:block; width:448px; height:48px; font-size:12px; color:#fff; text-align:center; line-height:50px; border:1px solid #f1191f; background:#f1191f; } #productDetail .thumb-info .info .prd-btns .btn_subs:hover { color:#000; background:#fff } #productDetail .thumb-info .info .prd-btns .btn_subs:active { position: relative; top: 1px; } << 장바구니 >> 1. 작업위치 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 장바구니 중앙디자인 > 주문관련 > 주문조회/후기 팝업 > 통합장바구니2 2. 가상태그 - 정기배송 이동 링크 : <!--/link_subs_basket/--> - 정기배송 장바구니 개수 : <!--/user_subs_basket_count/--> - 정기배송 사용여부 : <!--/use_subs/--> 3. 예제소스 - 정기배송 사용시, 정기배송 장바구니를 추가하는 소스 (일반상품 장바구니와 정기배송 장바구니를 탭으로 구분) [ 디자인 편집탭 ] <!--/if_use_subs/--> <div class="carttabWrap"> <ul class="cart-tab"> <li class="now"><a href="<!--/link_normal_basket/-->"><span>일반구매 (<!--/number/user_normal_basket_count/-->)</span></a></li> <li><a href="<!--/link_subs_basket/-->"><span>정기배송 (<!--/number/user_subs_basket_count/-->)</span></a></li> </ul> </div> <!--/else/--> <div class="h_title"> <h3>장바구니<!--/if_user_basket_count(+1)/--><span>(<!--/user_basket_count/-->)</span><!--/end_if/--></h3> </div> <!--/end_if/--> [ CSS 탭 ] /* 정기배송 탭 */ #basket .cart-tab { width:100%; height:32px; border-top:1px solid #464646; } #basket .cart-tab:after { clear: both; content: ""; display: block; } #basket .cart-tab li { float:left; width:50%; height:31px; border-bottom:1px solid #cecece; } #basket .cart-tab li a { display:inline-block; width:100%; height:100%; color:#3b3b3b; font-size:12px; text-align:center; text-decoration:none; background:none; } #basket .cart-tab li a span { display:block; height:18px; line-height:18px; margin-top:6px; } #basket .cart-tab li:first-child a span { border-right:2px solid #e2e2e2; } #basket .cart-tab li.now { border-bottom:1px solid #f1191f; } #basket .cart-tab li.now a { font-weight:bold; color:#f1191f; } << 마이페이지 >> - 마이페이지 메인에 정기배송 관리 페이지로 이동하는 링크 추가하는 소스 1. 작업위치 중앙디자인 > 마이페이지 > 마이페이지 메인 2. 가상태그 - 정기배송 링크 : <!--/link_subs/--> - 정기배송 결제 여부 : <!--/order_list@is_subs_order/--> 3. 예제소스 [ 디자인 편집탭 ] <!--/if_link_subs/--> <li> <a href="<!--/link_subs/-->"> <div> <span class="fa fa-truck fa-3x"></span> </div> <p>정기배송 관리</p> </a> </li> <!--/end_if/--> * 햄버거 메뉴 > 마이페이지에 정기배송 관리 메뉴명 노출 및 마이페이지로 이동하는 소스 1. 작업위치 상단/하단 디자인 > 상단 2. 가상태그 - 정기배송 링크 : <!--/link_subs/--> 3. 예제소스 [ 디자인 편집탭 ] <!--/if_link_subs/--> <li><a href="<!--/link_subs/-->">정기배송 관리</a></li> <!--/end_if/-->
목록 1:1 문의