무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 주문관련

[정기배송] 마이페이지- 정기배송관리 페이지 작업 방법

글번호 : 1345

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1345
정기배송 관련하여 지정일배송, 휴무일 설정, 회차별 할인 관련 소스가 추가되었습니다. ★기본 적용소스에는 모두 적용된 내용이니 해당 페이지를 별도 수정하신 내역이 없으시다면 기본값을 적용하여 확인해보시기 바라며 기존 소스를 수정하여 이용하신 상태라고 하더라도 우선 기존소스 백업 후 기본값 적용하여 다시 원하시는 부분 수정하시는 것을 권장합니다.★ << 지원범위 >> - 통합옵션
[ PC 버전 ] 1. 작업위치 중앙디자인 > 마이페이지 > 정기배송 관리 2. 가상태그 - 이번에 배송 받을 상품 업체 목록 > 배송주기타입 : <!--/if_subs_provider@subs_product@cycle_type/--> - 함께 신청한 배송 상품 업체 목록 > 배송주기타입 : <!--/if_subs_together@subs_product@cycle_type/--> - 이번에 배송 받을 상품 업체 목록 > 정기배송 예상 회차 : <!--/subs_provider@subs_product@subs_next_turn/--> - 함께 신청한 배송 상품 업체 목록 > 정기배송 예상 회차 : <!--/subs_together@subs_product@subs_next_turn/--> - 정기배송 휴무일 문구 노출 여부 : <!--/if_is_holiday_notice/--> - 배송 주기 변경 > 배송 주기 타입 (WEEK : 요일 주기, MONTH : 날짜 주기, FIX : 지정일) : <!--/subs_cycle_type/--> - 배송 주기 확인 > 지정일 배송 리스트 : <!--/subs_fix_list/--> - 배송 주기 변경 > 주기(SELECT) : <!--/select_subs_month_cycle/--> - 배송주기 변경 > 날짜(INPUT) : <!--/input_subs_day/--> - 요일 주기 사용 여부 : <!--/if_is_use_week/--> - 월별 주기 사용 여부 : <!--/if_is_use_month/--> 3. 예제소스 [베이직심플] * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. * 아래 빨간색 소스는 추가, 초록색 소스는 삭제해주세요. [ 디자인 편집탭] <div id="mySubs"> <div class="page-body"> <!-- 정기배송 탭 --> <div class="tab-menu"> <ul> <li class="<!--/if_is_view_schedule/-->now<!--/end_if/-->"><a href="<!--/link_view_schedule/-->">정기배송 관리</a></li> <li class="<!--/if_is_view_billing/-->now<!--/end_if/-->"><a href="<!--/link_view_billing/-->">정기배송 설정</a></li> </ul> </div> <!-- // 정기배송 탭 --> <div class="tabWrap"> <div id="tab1Wrap"> <!--/block_subs_schedule/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * 아래 소스는 삭제해주세요 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!-- 지정일 추가 --> <!--/if_is_holiday_notice/--> <ul class="table-txt"> <li>· 휴무일은 정기배송이 불가합니다. 휴무일 이후 배송가능한 날짜에 정상적으로 정기배송이 진행됩니다.</li> <li>· 휴무일로 인해 2회 이상 정기배송 예정건이 겹치는 경우, 1회에 대한 정기배송만 처리됩니다.</li> </ul> <!--/end_if/--> <!-- 지정일 끝 --> <!--/else/--> <div class="subs-calendar"> <div class="tit-page-2"> <h2>정기배송 스케줄 관리</h2> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </div><!-- #subs_calendarPopup --> </div> <!--/end_block/--><!-- //block_subs_calendar --> </div> <!-- //정기배송 상품 목록 --> <!--/block_subs_detail/--> <!--/if_subs_fail_comment/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_link_order/--> <a href="<!--/link_order/-->" class="CSSbuttonWhite CSSbuttonMin btn_option">주문상세조회</a> <!--/else_if_link_jump/--> <a href="<!--/link_jump/-->" class="CSSbuttonWhite CSSbuttonMin">이번 배송 건너뛰기</a> <!--/end_if/--> <!--/if_link_jump_cancel/--> <a href="<!--/link_jump_cancel/-->" id="subs_is_jump" class="CSSbuttonWhite CSSbuttonMin">건너뛰기 취소</a> <!--/end_if/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="tb-center tb-subs"> <!-- 지정일 추가 /--> <!--/if_subs_provider@subs_product@cycle_type(WEEK)/--> <div class="tb-subs-txt fc-blue"><!--/subs_provider@subs_product@cycle/-->주 간격<span class="bar">|</span><!--/subs_provider@subs_product@week/--></div> <a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option">배송주기 변경</a> <!--/end_if/--> <!--/if_subs_provider@subs_product@cycle_type(MONTH)/--> <div class="tb-subs-txt fc-blue"><!--/subs_provider@subs_product@cycle/-->개월 간격</div> <a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option">배송주기 변경</a> <!--/end_if/--> <!--/if_subs_provider@subs_product@cycle_type(FIX)/--> <a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option">배송주기 확인</a> <!--/end_if/--> <!-- 지정일 끝 /--> </div> </td> <td> <div class="tb-center tb-option"> <!--/if_subs_provider@subs_product@subs_next_turn/--> <span>정기배송 <!--/subs_provider@subs_product@subs_next_turn/-->회차 예정</span> <!--/end_if/--> <!--/if_subs_provider@subs_product@is_jump/--> <span class="d-block"><a class="CSSbuttonGray2 btn_option" href="<!--/subs_provider@subs_product@link_subs_jump_cancel/-->">건너뛰기 취소</a></span> <!--/else/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="tb-center tb-subs"> <!-- 지정일 추가 /--> <!--/if_subs_together@subs_product@cycle_type(WEEK)/--> <div class="tb-subs-txt fc-blue"><!--/subs_together@subs_product@cycle/-->주 간격<span class="bar">|</span><!--/subs_together@subs_product@week/--> <br/>정기배송 예정일 : <!--/date(%Y.%M.%D)/subs_together@subs_product@subs_next_date/--> (<!--/subs_together@subs_product@subs_next_week/-->) </div> <a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option">배송주기 변경</a> <!--/end_if/--> <!--/if_subs_together@subs_product@cycle_type(MONTH)/--> <div class="tb-subs-txt fc-blue"><!--/subs_together@subs_product@cycle/-->개월 간격 <br/>정기배송 예정일 : <!--/date(%Y.%M.%D)/subs_together@subs_product@subs_next_date/-->(<!--/subs_together@subs_product@subs_next_week/-->) </div> <a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option">배송주기 변경</a> <!--/end_if/--> <!--/if_subs_together@subs_product@cycle_type(FIX)/--> <div class="tb-subs-txt fc-blue"> <br/>정기배송 예정일 : <!--/if_subs_together@subs_product@subs_next_date/--> <!--/date(%Y.%M.%D)/subs_together@subs_product@subs_next_date/-->(<!--/subs_together@subs_product@subs_next_week/-->) <!--/else/--> 종료예정 <!--/end_if/--> </div> <a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option">배송주기 확인</a> <!--/end_if/--> <!-- 지정일 끝 /--> </div> </td> <td> <div class="tb-center tb-option"> <!--/if_subs_together@subs_product@subs_next_turn/--> <span>정기배송 <!--/subs_together@subs_product@subs_next_turn/-->회차 예정</span> <!--/end_if/--> <span class="d-block"><a href="<!--/subs_together@subs_product@link_subs_detail/-->" class="CSSbuttonGray2 btn_option">스케줄 관리</a></span> <span class="d-block"><a href= "<!--/subs_together@subs_product@link_subs_cancel/-->" class="CSSbuttonWhite btn_option">정기배송 취소</a></span> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="mysubs-btn"> <!--/if_link_jump_cancel/--> <a href="<!--/link_jump_cancel/-->" id="subs_is_jump" class="CSSbuttonWhite CSSbuttonMin ">건너뛰기 취소</a> <!--/end_if/--> <!--/if_link_jump/--> <a href="<!--/link_jump/-->" class="CSSbuttonWhite CSSbuttonMin">이번 배송 건너뛰기</a> <!--/end_if/--> <a href="<!--/link_subs_cancel/-->" class="CSSbuttonBlack">정기배송 취소</a> </div> </div> <!--/end_if/--> </div> <!--/end_block/--> <!-- // block_subs_detail --> </div> <!--#SubsCalendar--> <!--/end_block/--> <!-- // block_subs_schedule --> </div> <!-- // 탭1. 정기배송 관리 --> <!-- 탭2. 정기배송 설정 --> <div id="tab2Wrap"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * 아래 소스를 전체 추가해주세요. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!-- 배송주기 변경 --> <!--/block_subs_edit/--> <div id="subsedit"> <!--/form_subs_edit/--> <div class="subs-cnts"> <!--/if_subs_cycle_type(FIX)/--> <div class="cnts01"> <dl class="date-txt"> <dt>배송주기 : </dt> <!-- 지정일 추가--> <!--/if_subs_fix_list/--> <dd><!--/subs_fix_list/--> 순으로 정기 배송됩니다.</dd> <!--/else/--> <dd>배송 가능한 다음 예정일이 없습니다.</dd> <!--/end_if/--> <!-- 지정일 추가 끝--> </dl> </div> <!--/else/--> <!--/if_is_use_week/--> <div class="cnts01"> <!--/if_subs_cycle_type(WEEK,MONTH)/-->요일선택 <!--/else/-->배송주기 변경 <!--/end_if/--> 배송주기 변경 <!--/select_subs_cycle/--> <ul id="list-week" class="day-btns clearfix"> <!--/loop_subs_week/--> <li><a href="<!--/subs_week@link/-->" class="<!--/if_subs_week@is_select/-->on<!--/end_if/-->"><!--/subs_week@week/--></a></li> <!--/end_loop/--> </ul>에 배송됩니다. </div> <!--/end_if/--> <!--/if_is_use_month/--> <div class="cnts01"> <!--/if_subs_cycle_type(WEEK,MONTH)/-->날짜선택 <!--/else/-->배송주기 변경 <!--/end_if/--> <!--/select_subs_month_cycle/--> <!--/input_subs_day/--> </div> <!--/end_if/--> <!--/end_if/--> <div class="cnts02"><img src="/images/common/ico_calendar2.gif" alt="" /> 다음 정기배송일: <!-- 지정일 배송예정일 없을 경우--> <!--/if_subs_next_date/--> <strong><!--/subs_next_date/-->(<!--/subs_next_week/-->)</strong> <!--/else/--> <strong>종료예정</strong> <!--/end_if/--> </div> </div> <div class="subs-btns"> <ul> <li>· 정기배송이 공휴일 및 휴무일인 경우 배송가능한 날짜에 정상적으로 정기배송이 진행됩니다.</li> <!--/if_subs_cycle_type(FIX)/--> <!--/else/--> <li>· '다음 정기배송일'은 배송주기 변경 후 처음 배송되는 정기배송예정일입니다.</li> <!--/end_if/--> </ul> <!--/if_subs_cycle_type(FIX)/--> <a href="#subsedit" class="subs-layer-close btn-cancel">확인</a> <!--/else/--> <a href="#subsedit" class="subs-layer-close btn-cancel">취소</a> <a href="<!--/link_subs_edit_save/-->" class="btn-apply">저장</a> <!--/end_if/--> </div> <!--/end_form/--> </div><!-- #subsedit --> <!--/end_block/--> [CSS] ① 아래 소스를 추가해주세요. #mySubs .tab-menu {margin-top:60px;} #mySubs .tab-menu ul:after {clear:both; content:""; display:block;} #mySubs .tab-menu ul {height:66px; border-bottom:2px solid #000;} #mySubs .tab-menu ul li {float:left; width:50%; height:66px; border-right:1px solid #d5d5d5; border-top:1px solid #d5d5d5; background:#f9f9f9; box-sizing:border-box;} #mySubs .tab-menu ul li:first-child {margin-left:0; border-left:1px solid #d5d5d5; border-right:0;} #mySubs .tab-menu ul li a {display:block; line-height:66px; color:#898989; font-weight:bold; font-size:18px; text-align:center;} #mySubs .tab-menu ul li.now {height:68px; border:2px solid #000; border-bottom:none; background:#fff;} #mySubs .tab-menu ul li.now a {line-height:66px; color:#000;} /* 배송주기변경팝업 */ /* 지정일 추가*/ #subsedit .subs-cnts { padding:30px 30px 20px; text-align:left; } /* 지정일 끝*/ /* 지정일 추가*/ #subsedit .subs-cnts .cnts01 .date-input {height:24px; line-height:24px; margin-left:3px; padding:0 5px; border:1px solid #000; vertical-align:middle; background:url('/images/common/icon_calendar.png') no-repeat 95% center / 18px auto; cursor:pointer;} #subsedit .subs-cnts .cnts01 .date-txt {overflow:hidden;} #subsedit .subs-cnts .cnts01 .date-txt dt, #subsedit .subs-cnts .cnts01 .date-txt dd {float:left; padding:0 3px;} /* 지정일 끝*/ ② 아래 [기존] 소스에 [신규] 소스 내 빨간 텍스트를 추가해주세요. [기존] #mySubs .CSSbuttonWhite { display:inline-block; color:#231f20; text-align:center; border:1px solid #231f20; background:#fff; -webkit-transition:all 0.3s ease; transition:all 0.3s ease } [신규] #mySubs .CSSbuttonWhite { display:inline-block; color:#231f20; text-align:center; border:1px solid #231f20; background:#fff; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; padding:0; } ③ 아래 CSS는 삭제해주세요 #subsedit .subs-cnts { padding:30px 30px 20px; height:60px; text-align:left; } [JS] // 페이지 탭 on/off $(document).on('click', '.tab-menu a', function(e) { $(this).parent().addClass('now').siblings().removeClass('now'); }); [모던심플] * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. * 아래 빨간색 소스는 추가, 초록색 소스는 삭제해주세요. [ 디자인 편집탭] <span class="dsc">정기배송 스케줄, 상품, 결제정보를 확인 및 변경하실 수 있습니다.</span> </h2> <div class="page-body"> <!-- 정기배송 탭 --> <div class="tab-menu"> <ul> <li class="<!--/if_is_view_schedule/-->now<!--/end_if/-->"><a href="<!--/link_view_schedule/-->">정기배송 관리</a></li> <li class="<!--/if_is_view_billing/-->now<!--/end_if/-->"><a href="<!--/link_view_billing/-->">정기배송 설정</a></li> </ul> </div> <!-- // 정기배송 탭 --> <div class="tabWrap"> <!--/block_subs_schedule/--> <!-- 탭1. 정기배송 관리 --> <div id="tab1Wrap"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * 아래 소스는 삭제해주세요 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_subs_calendar@num(7)/--> </tr> <!--/end_if/--> <!--/end_loop/--> </tbody> </table> </div> <!-- 지정일 추가 --> <!--/if_is_holiday_notice/--> <ul class="table-txt"> <li>· 휴무일은 정기배송이 불가합니다. 휴무일 이후 배송가능한 날짜에 정상적으로 정기배송이 진행됩니다.</li> <li>· 휴무일로 인해 2회 이상 정기배송 예정건이 겹치는 경우, 1회에 대한 정기배송만 처리됩니다.</li> </ul> <!--/end_if/--> <!-- 지정일 끝 --> <!--/else/--> <div class="subs-calendar"> <div class="tit-page-2"> <h2>정기배송 스케줄 관리</h2> </div> <div class="table-att"> <table summary=""> <caption>정기배송 스케줄 관리</caption> <colgroup> <col width="*" /> </colgroup> <tbody> <tr> <td> <div class="tb-center tb-schedule"> <img src="/images/common/h16_excl2.gif" alt="!" /> 정기배송 서비스를 이용하지 않고 있습니다. <strong><img src="/images/common/h66_mysubs_schedule.gif" alt="" /><span>나만의 배송일에 맞춰 필요한 상품을 편하게 배송 받으세요~</span></strong> </div> </td> </tr> </tbody> </table> </div><!-- .table-att --> </div> <!--/end_if/--> </div> <!-- //.subs-calendar--> <!--/end_block/--> <!-- //subs_calendar--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!-- //정기배송 상품 목록 --> </div> <!-- //subs-calendar --> <!--/block_subs_detail/--> <!--/if_subs_fail_comment/--> <div class="sc-page-fail" id="spj_info_view" > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/if_link_order/--> <a href="<!--/link_order/-->" class="CSSbuttonWhite CSSbuttonMin btn_order_info"><img src="/images/d3/modern_simple/btn/btn_h20_orderdetail.gif" alt="주문상세조회" /></a> <!--/else_if_link_jump/--> <a href="<!--/link_jump/-->" id="subs_is_jump" class="CSSbuttonWhite CSSbuttonMin btn_jump"><img src="/images/d3/modern_simple/btn/btn_w103_h20_once.gif" alt="이번 배송 건너뛰기" /></a> <!--/end_if/--> <!--/if_link_jump_cancel/--> <a href="<!--/link_jump_cancel/-->" class="CSSbuttonWhite btn_jump_cancel"><img src="/images/d3/modern_simple/btn/btn_w103_h20_once_cancel.gif" alt="건너뛰기 취소" /></a> <!--/end_if/--> </div> </td> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="tb-center tb-subs"> <!-- 지정일 추가 /--> <!--/if_subs_provider@subs_product@cycle_type(WEEK)/--> <div class="tb-subs-txt fc-blue"><!--/subs_provider@subs_product@cycle/-->주 간격<span class="bar">|</span><!--/subs_provider@subs_product@week/--></div> <a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option btn_subsedit"><img src="/images/d3/modern_simple/btn/btn_w103_h20_subsedit.gif" alt="배송주기 변경" /></a> <!--/end_if/--> <!--/if_subs_provider@subs_product@cycle_type(MONTH)/--> <div class="tb-subs-txt fc-blue"><!--/subs_provider@subs_product@cycle/-->개월 간격</div> <a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option btn_subsedit"><img src="/images/d3/modern_simple/btn/btn_w103_h20_subsedit.gif" alt="배송주기 변경" /></a> <!--/end_if/--> <!--/if_subs_provider@subs_product@cycle_type(FIX)/--> <a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option btn_subsedit"><img src="/images/d3/modern_simple/btn/btn_w103_h20_subsedit_1.gif" alt="배송주기 확인" /></a> <!--/end_if/--> <!-- 지정일 끝 /--> </div> </td> <td> <div class="tb-right tb-option"> <!--/if_subs_provider@subs_product@subs_next_turn/--> <span style="font-size:11px; color:#000;">정기배송 <!--/subs_provider@subs_product@subs_next_turn/-->회차 예정</span> <!--/end_if/--> <!--/if_subs_provider@subs_product@is_jump/--> <span class="d-block"><a class="CSSbuttonGray2 btn_option" href="<!--/subs_provider@subs_product@link_subs_jump_cancel/-->"> <img src="/images/d3/modern_simple/btn/btn_w103_h20_once_cancel.gif"></a></span> <!--/else/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="tb-center tb-subs"> <!-- 지정일 추가 /--> <!--/if_subs_together@subs_product@cycle_type(WEEK)/--> <div class="tb-subs-txt fc-blue"><!--/subs_together@subs_product@cycle/-->주 간격<span class="bar">|</span><!--/subs_together@subs_product@week/--> <br />정기배송 예정일 : <!--/date(%Y.%M.%D)/subs_together@subs_product@subs_next_date/-->(<!--/subs_together@subs_product@subs_next_week/-->) </div> <a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option btn_subsedit"><img src="/images/d3/modern_simple/btn/btn_w103_h20_subsedit.gif" alt="배송주기 변경" /></a> <!--/end_if/--> <!--/if_subs_together@subs_product@cycle_type(MONTH)/--> <div class="tb-subs-txt fc-blue"><!--/subs_together@subs_product@cycle/-->개월 간격 <br />정기배송 예정일 : <!--/date(%Y.%M.%D)/subs_together@subs_product@subs_next_date/-->(<!--/subs_together@subs_product@subs_next_week/-->) </div> <a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option btn_subsedit"><img src="/images/d3/modern_simple/btn/btn_w103_h20_subsedit.gif" alt="배송주기 변경" /></a> <!--/end_if/--> <!--/if_subs_together@subs_product@cycle_type(FIX)/--> <div class="tb-subs-txt fc-blue"> <br/>정기배송 예정일 : <!-- 지정일 배송예정일 없을 경우--> <!--/if_subs_together@subs_product@subs_next_date/--> <!--/date(%Y.%M.%D)/subs_together@subs_product@subs_next_date/-->(<!--/subs_together@subs_product@subs_next_week/-->) <!--/else/--> 종료예정 <!--/end_if/--> <!-- 지정일 배송예정일 없을 경우 end--> </div> <a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="CSSbuttonWhite btn_option btn_subsedit"><img src="/images/d3/modern_simple/btn/btn_w103_h20_subsedit_1.gif" alt="배송주기 확인" /></a> <!--/end_if/--> <!-- 지정일 끝 /--> </div> </td> <td> <div class="tb-right tb-option"> <!--/if_subs_together@subs_product@subs_next_turn/--> <span style="font-size:11px; color:#000;">정기배송 <!--/subs_together@subs_product@subs_next_turn/-->회차 예정</span> <!--/end_if/--> <span class="d-block"><a href= "<!--/subs_together@subs_product@link_subs_detail/-->" class="CSSbuttonWhite btn_option"><img src="/images/d3/modern_simple/btn/btn_w103_h20_schedule.gif" alt="스케줄 관리" /></a></span> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="subs-btns"> <a href="#delivery-msg-edit" class="btn-cancel subs-layer-close">취소</a> <a href="<!--/link_delivery_msg_update/-->" class="btn-apply">저장</a> </div> </div><!-- #msg-edit --> </div> </td> </tr> </tbody> </table> </div> <!-- .table-att --> <!-- .table-d2-view --> <!-- //배송지 정보 --> </div> </div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <a href="<!--/link_card_update/-->" class="btn-apply">확인</a> </div> </div><!-- #subs-cardedit-layer --> </div> </td> </tr> </tbody> </table> </div><!-- .table-att --><!-- .table-d2-view --> <ul class="table-txt"> <li>· 배송일 4일 전 결제예정일, 금액을 알려드리고, 배송일 2일전 알려드린 금액으로 자동 결제됩니다.</li> </ul> <!-- //결제카드 정보 --> </div> <div class="mysubs-btn"> <!--/if_link_jump/--> <a href="<!--/link_jump/-->" class="ml-5"><img src="/images/d3/modern_simple/btn/btn_h32_subs_jump.gif" alt="이번 배송 건너뛰기" /></a> <!--/end_if/--> <!--/if_link_jump_cancel/--> <a href="<!--/link_jump_cancel/-->" class="ml-5"><img src="/images/d3/modern_simple/btn/btn_h32_subs_jump_cancel.gif" alt="건너뛰기 취소" /></a> <!--/end_if/--> <a href="<!--/link_subs_cancel/-->" class="CSSbuttonBlack"> class="ml-5"><img src="/images/d3/modern_simple/btn/btn_h32_subs_cancel.gif" alt="정기배송 취소" /></a> </div> <!--/end_if/--> <!-- //subs_receiver --> </div> </div> <!--/end_if/--> <!--/end_block/--> <!-- // 탭1. 정기배송 관리 --> </div> <!-- //SubsCalendar --> <!--/end_block/--> </div> <!-- //tab1Wrap --> <!-- 탭2. 정기배송 설정 --> <div id="tab2Wrap"> * 아래 소스를 전체 추가해주세요. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!-- 배송주기 변경 --> <!--/block_subs_edit/--> <div id="subsedit"> <!--/form_subs_edit/--> <div class="subs-cnts"> <!-- 지정일 추가 --> <!--/if_subs_cycle_type(FIX)/--> <div class="cnts01"> 배송주기변경 <dl class="date-txt"> <dt>배송주기 : </dt> <!-- 지정일 추가--> <!--/if_subs_fix_list/--> <dd><!--/subs_fix_list/--> 순으로 정기 배송됩니다.</dd> <!--/else/--> <dd>배송 가능한 다음 예정일이 없습니다.</dd> <!--/end_if/--> <!-- 지정일 추가 끝--> </dl> </div> <!--/else/--> <!--/if_is_use_week/--> <div class="cnts01"> <!--/if_subs_cycle_type(WEEK,MONTH)/-->요일선택 <!--/else/-->배송주기 변경 <!--/end_if/--> <!--/select_subs_cycle/--> <ul id="list-week" class="day-btns clearfix"> <!--/loop_subs_week/--> <li><a href="<!--/subs_week@link/-->" class="<!--/if_subs_week@is_select/-->on<!--/end_if/-->"><!--/subs_week@week/--></a></li> <!--/end_loop/--> </ul>에 배송됩니다. </div> <!--/end_if/--> <!--/if_is_use_month/--> <div class="cnts01"> <!--/if_subs_cycle_type(WEEK,MONTH)/-->날짜선택 <!--/else/-->배송주기 변경 <!--/end_if/--> <!--/select_subs_month_cycle/--> <!--/input_subs_day/--> </div> <!--/end_if/--> <!--/end_if/--> <!-- 지정일 끝 --> <div class="cnts02"><img src="/images/common/ico_calendar2.gif" alt="" /> 다음 정기배송일: <span class="fc-red"> <!-- 지정일 배송예정일 없을 경우--> <!--/if_subs_next_date/--> <strong><!--/subs_next_date/-->(<!--/subs_next_week/-->)</strong> <!--/else/--> <strong>종료예정</strong> <!--/end_if/--> <!-- 지정일 배송예정일 없을 경우 end--> </span> </div> </div> <div class="subs-btns"> <ul> <li>· 정기배송이 공휴일 및 휴무일인 경우 배송가능한 날짜에 정상적으로 정기배송이 진행됩니다.</li> <!--/if_subs_cycle_type(FIX)/--> <!--/else/--> <li>· '다음 정기배송일'은 배송주기 변경 후 처음 배송되는 정기배송예정일입니다.</li> <!--/end_if/--> </ul> <!--/if_subs_cycle_type(FIX)/--> <a href="#subsedit" class="subs-layer-close btn-cancel">확인</a> <!--/else/--> <a href="#subsedit" class="subs-layer-close btn-cancel">취소</a> <a href="<!--/link_subs_edit_save/-->" class="btn-apply">저장</a> <!--/end_if/--> </div> <!--/end_form/--> [CSS] ① 아래 소스를 추가해주세요. #mySubs .tab-menu {margin-top:60px;} #mySubs .tab-menu ul:after {clear:both; content:""; display:block;} #mySubs .tab-menu ul {height:66px; border-bottom:2px solid #000;} #mySubs .tab-menu ul li {float:left; width:50%; height:66px; border-right:1px solid #d5d5d5; border-top:1px solid #d5d5d5; background:#f9f9f9; box-sizing:border-box;} #mySubs .tab-menu ul li:first-child {margin-left:0; border-left:1px solid #d5d5d5; border-right:0;} #mySubs .tab-menu ul li a {display:block; line-height:66px; color:#898989; font-weight:bold; font-size:18px; text-align:center;} #mySubs .tab-menu ul li.now {height:68px; border:2px solid #000; border-bottom:none; background:#fff;} #mySubs .tab-menu ul li.now a {line-height:66px; color:#000;} /* 지정일 추가 */ #mySubs #subsedit .subs-cnts { padding:30px 30px 20px; text-align:left; } /* 지정일 끝 */ /* 지정일 추가 */ #mySubs #subsedit .subs-cnts .cnts01 .date-input {height:24px; line-height:24px; margin-left:3px; padding:0 5px; border:1px solid #000; vertical-align:middle; background:url('/images/common/icon_calendar.png') no-repeat 95% center / 18px auto; cursor:pointer;} #mySubs #subsedit .subs-cnts .cnts01 .date-txt {overflow:hidden;} #mySubs #subsedit .subs-cnts .cnts01 .date-txt dt, #mySubs #subsedit .subs-cnts .cnts01 .date-txt dd {float:left; padding:0 3px;} /* 지정일 끝 */ ② 아래 CSS는 삭제해주세요 #mySubs #subsedit .subs-cnts { padding:30px 30px 20px; height:60px; text-align:left; } [JS] // 페이지 탭 on/off $(document).on('click', '.tab-menu a', function(e) { $(this).parent().addClass('now').siblings().removeClass('now'); });
[MO 버전 4.0] 1. 작업위치 중앙디자인 > 마이페이지 > 정기배송 관리 2. 가상태그 - 이번에 배송 받을 상품 업체 목록 > 배송주기타입 : <!--/if_subs_provider@subs_product@cycle_type/--> - 함께 신청한 배송 상품 업체 목록 > 배송주기타입 : <!--/if_subs_together@subs_product@cycle_type/--> - 이번에 배송 받을 상품 업체 목록 > 정기배송 예상 회차 : <!--/subs_provider@subs_product@subs_next_turn/--> - 함께 신청한 배송 상품 업체 목록 > 정기배송 예상 회차 : <!--/subs_together@subs_product@subs_next_turn/--> - 정기배송 휴무일 문구 노출 여부 : <!--/if_is_holiday_notice/--> - 배송 주기 변경 > 배송 주기 타입 (WEEK : 요일 주기, MONTH : 날짜 주기, FIX : 지정일) : <!--/subs_cycle_type/--> - 배송 주기 확인 > 지정일 배송 리스트 : <!--/subs_fix_list/--> - 배송 주기 변경 > 주기(SELECT) : <!--/select_subs_month_cycle/--> - 배송주기 변경 > 날짜(INPUT) : <!--/input_subs_day/--> - 요일 주기 사용 여부 : <!--/if_is_use_week/--> - 월별 주기 사용 여부 : <!--/if_is_use_month/--> 3. 예제소스 * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. * 아래 빨간색 소스는 추가, 초록색 소스는 삭제해주세요. [ 디자인 편집탭 ] <!--/if_is_holiday_notice/--> <div class="total-guide"> <p><span>*</span>휴무일은 정기배송이 불가합니다. 휴무일 이후 배송가능한 날짜에 정상적으로 정기배송이 진행됩니다.</p> <p><span>*</span>휴무일로 인해 2회 이상 정기배송 예정건이 겹치는 경우, 1회에 대한 정기배송만 처리됩니다.</p> </div> <!--/end_if/--> <!--/else/--> <!-- 정기배송 신청 내역 없음 --> <div class="tabWrap"> <div id="subs1Wrap"> <div class="schedule-none"> <div class="none-txt"><span class="fa fa-exclamation-circle"></span> 정기배송 서비스를 이용하지 않고 있습니다.</div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <td colspan="2" class="subs-btm-btn"> <!--/if_link_order/--> <a href="<!--/link_order/-->" id="subs_is_jump" class="btn_Black">주문상세조회</a> <!--/else_if_link_jump/--> <a href="<!--/link_jump/-->" id="subs_is_jump" class="btn_Black">이번 배송 건너뛰기</a> <!--/end_if/--> <!--/if_link_jump_cancel/--> <a href="<!--/link_jump_cancel/-->" id="subs_is_jump" class="btn_White">건너뛰기 취소</a> <!--/end_if/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="subs-period"> <span><em class="fa fa-sliders"></em>배송주기</span> <!--/if_subs_provider@subs_product@cycle_type(WEEK)/--> <strong><a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="btn_subsedit"> <!--/subs_provider@subs_product@cycle/--> 주 간격 / <!--/subs_provider@subs_product@week/-->요일 배송 <em class="fa fa-angle-right"></em></a></strong> <!--/end_if/--> <!--/if_subs_provider@subs_product@cycle_type(MONTH)/--> <strong><a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="btn_subsedit"> <!--/subs_provider@subs_product@cycle/-->개월 간격 <em class="fa fa-angle-right"></em></a></strong> <!--/end_if/--> <!--/if_subs_provider@subs_product@cycle_type(FIX)/--> <strong><a href="<!--/subs_provider@subs_product@link_subs_edit/-->" class="btn_subsedit"> 지정일 배송 <em class="fa fa-angle-right"></em></a></strong> <!--/end_if/--> <!--/if_subs_provider@subs_product@subs_next_turn/--> <span><img src="/images/d3/m_04/icon_x2.png" style="width:12px; height:auto;"> 예정회차</span> <strong style="color:#000;"><!--/subs_provider@subs_product@subs_next_turn/--> 회차 예정</strong> <!--/end_if/--> </div> <div class="subs-btns"> <!--/if_subs_provider@subs_product@is_jump/--> <a href="<!--/subs_provider@subs_product@link_subs_jump_cancel/-->" class="btn_White">건너뛰기 취소</a> <!--/else/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="subs-period"> <span><em class="fa fa-sliders"></em>배송주기</span> <!--/if_subs_together@subs_product@cycle_type(WEEK)/--> <strong><a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="btn_subsedit" ><!--/subs_together@subs_product@cycle/-->주 간격 / <!--/subs_together@subs_product@week/-->요일 배송 <em class="fa fa-angle-right"></em></a></strong> <!--/end_if/--> <!--/if_subs_together@subs_product@cycle_type(MONTH)/--> <strong><a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="btn_subsedit" ><!--/subs_together@subs_product@cycle/-->개월 간격 <em class="fa fa-angle-right"></em></a></strong> <!--/end_if/--> <!--/if_subs_together@subs_product@cycle_type(FIX)/--> <strong><a href="<!--/subs_together@subs_product@link_subs_edit/-->" class="btn_subsedit" >지정일 배송<em class="fa fa-angle-right"></em></a></strong> <!--/end_if/--> </div> <div class="subs-date"> <span><em class="fa fa-calendar"></em>정기배송 예정일</span> <!--/if_subs_together@subs_product@subs_next_date/--> <strong><!--/subs_together@subs_product@subs_next_date/-->(<!--/subs_together@subs_product@subs_next_week/-->)</strong> <!--/else/--> <strong>종료예정</strong> <!--/end_if/--> </div> <!--/if_subs_together@subs_product@subs_next_turn/--> <span><img src="/images/d3/m_04/icon_x2.png" style="width:12px; height:auto;"> 예정회차</span> <strong style="color:#000;"><!--/subs_together@subs_product@subs_next_turn/--> 회차 예정</strong> <!--/end_if/--> <div class="subs-btns"> <a href="<!--/subs_together@subs_product@link_subs_detail/-->" class="btn_Black">스케줄 관리</a> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <div class="subs-cnts"> <!--/if_subs_cycle_type(FIX)/--> <div class="cnts01"> <dl class="date-txt"> <dt>배송주기 : </dt> <!-- 지정일 배송예정일 없을 경우 --> <!--/if_subs_fix_list/--> <dd><!--/subs_fix_list/--> 순으로 정기 배송됩니다.</dd> <!--/else/--> <dd>배송 가능한 다음 예정일이 없습니다.</dd> <!--/end_if/--> <!-- 지정일 배송예정일 없을 경우 end --> </dl> </div> <!--/else/--> <!--/if_is_use_week/--> <div class="cnts01"> <!--/select_subs_cycle/--> <ul class="day-btns clearfix"> <!--/loop_subs_week/--> <li><a href="<!--/subs_week@link/-->" class="<!--/if_subs_week@is_select/-->on<!--/end_if/-->"><!--/subs_week@week/--></a></li> <!--/end_loop/--> </ul> </div> <!--/end_if/--> <!--/if_is_use_month/--> <div class="cnts01"> <!--/select_subs_month_cycle/--> <!--/input_subs_day/--> </div> <!--/end_if/--> <!--/end_if/--> <div class="cnts02"><img src="/images/common/ico_calendar2.gif" alt=""> 다음 정기배송일: <!--/if_subs_next_date/--> <strong id="subs_order_date"><!--/subs_next_date/-->(<!--/subs_next_week/-->)</strong> <!--/else/--> <strong id="subs_order_date">종료예정</strong> <!--/end_if/--> </div> </div> <div class="subs-cnts02"> <p><span>*</span>'다음 정기배송일'은 배송주기 변경 후 처음 배송되는 정기배송예정일입니다.</p> <p><span>*</span>정기배송일이 공휴일 및 휴무일인 경우 정기배송일 다음날 배송됩니다.</p> <p><span>*</span>정기배송이 공휴일 및 휴무일인 경우 배송가능한 날짜에 정상적으로 정기배송이 진행됩니다.</p> <!--/if_subs_cycle_type(FIX)/--> <!--/else/--> <p><span>*</span>'다음 정기배송일'은 배송주기 변경 후 처음 배송되는 정기배송예정일입니다.</p> <!--/end_if/--> </div> <div class="subs-btns"> <!--/if_subs_cycle_type(FIX)/--> <a href="#subsedit" class="btn_Grey subs-open-close"><span>확인</span></a> <!--/else/--> <a href="#subsedit" class="btn_Grey subs-open-close"><span>취소</span></a> <a href="<!--/link_subs_edit_save/-->" class="btn_Black"><span>저장</span></a> <!--/end_if/--> </div> </div> <!--/end_form/--> [CSS] [신규추가] .subsedit .txt .subs-cnts .date-input {width:100%; height:27px; line-height:27px; margin-top:5px; padding:0 10px; border:1px solid #bbb; vertical-align:middle; background:url('/images/common/icon_calendar.png') no-repeat 99% center / 15px auto; cursor: pointer;} .subsedit .txt .subs-cnts .cnts01 .date-txt {overflow:hidden;} .subsedit .txt .subs-cnts .cnts01 .date-txt dt, .subsedit .txt .subs-cnts .cnts01 .date-txt dd {float:left; padding:0 3px;}
* 파워팩의 경우 별도 설정 없이 적용됩니다. (모바일 2.0 미지원)
목록 1:1 문의