무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 주문관련

[정기배송]상세페이지 내 정기배송일 설정화면 작업 방법

글번호 : 1346

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1346
* 기본소스에는 아래 내용이 모두 적용되어 있으니 참고해주세요. << 지원범위 >> - 통합옵션
[ PC 버전 ] << 정기배송일 설정 화면>> 1. 작업위치 중앙디자인 > 상품관련 > 정기배송일 설정 화면 2. 가상태그 - 정기배송일 설정화면 : <subs_select> - 배송 주기 타입 (S : 주기 , F : 지정일) : <!--/subs_cycle_type/--> - 날짜 주기 : <!--/subs_cycle_month/--> - 날짜 설정 : <!--/subs_day/--> 날짜 설정 - 기존 신청한 정기배송 주기 타입 (WEEK : 요일 주기, MONTH : 날짜 주기, FIX : 지정일) : <!--/subs_list_data@cycle_type/--> - 기존 신청한 정기배송 날짜 : <!--/subs_list_data@day/--> 3. 예제소스 * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. * 아래 빨간색 소스를 추가해주세요 [ 디자인 편집탭 ] <div class="subs-tit">정기배송일 설정</div> <!--/if_subs_cycle_type(S)/--> <div class="subs-cnts"> <!--/if_subs_cycle/--> <!--/if_subs_week/--> <div class="cnts01"> <span class="tit-txt">요일 선택</span> <!--/subs_cycle/--> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 에 배송됩니다. </div> <!--/if_subs_cycle_month/--><hr /><!--/end_if/--> <!--/end_if/--> <!--/end_if/--> <!--/if_subs_cycle_month/--> <div class="cnts01"> <span class="tit-txt">날짜 선택</span> <!--/subs_cycle_month/--> <!--/subs_day/--> 에 배송됩니다. </div> <!--/end_if/--> <!--/block_subs_delivery_date/--><img src="/images/common/ico_calendar2.gif" alt="" /> 첫 정기배송 예정일: <strong><!--/subs_delivery_date/--></strong><!--/end_block/--> </div> <!--/end_if/--> <!--/if_subs_cycle_type(F)/--> <div class="subs-cnts"> <p class="date-txt"><strong><!--/subs_delivery_date/--></strong>에 첫 배송됩니다.</p> <div> [상세 배송예정일]<br /> <!--/subs_select_days/--> </div> </div> <!--/end_if/--> <!--/if_subs_list_data/--> <div class="subs-cnts02"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <span class="first"><strong>·</strong> 상품명 : <strong><!--/subs_list_data@product_name/--></strong></span> <!--/if_subs_list_data@cycle_type(S)/--> <span><strong>·</strong> 배송주기 : <!--/subs_list_data@cycle/-->주 간격 / <!--/subs_list_data@week/--></span> <!--/end_if/--> <!--/if_subs_list_data@cycle_type(MONTH)/--> <span><strong>·</strong> 배송주기 : <!--/subs_list_data@cycle/-->개월 간격 / <!--/subs_list_data@day/--></span> <!--/end_if/--> <!--/if_subs_list_data@cycle_type(FIX)/--> <span><strong>·</strong> 배송주기 : 지정 배송일</span> <!--/end_if/--> <span><strong>·</strong> 자동 결제카드 : <!--/subs_list_data@bill_card_name/--></span> [CSS - 베이직심플] ① [기존] 소스를 [변경] 소스로 수정해주세요. ② [신규추가] 소스를 추가해주세요. [기존] #subs-apply { z-index:10000; position:fixed; top:50%; left:50%; display:block; width:710px; margin-left:-355px; margin-top:-290px; border:1px solid #838897; background:#fff; } #subs-apply .subs-cnts { padding:30px 50px 15px; height:56px; } #subs-apply .subs-cnts .cnts01 { padding-bottom:15px; } [변경] #subs-apply { z-index:10000; position:fixed; top:50%; left:50%; display:block; width:710px; margin-left:-355px; margin-top:-290px; border:1px solid #838897; background:#fff; overflow:auto; max-height: 90%; } #subs-apply .subs-cnts { padding:30px 50px; } #subs-apply .subs-cnts .cnts01 { position:relative; padding-bottom:15px; } [신규추가] #subs-apply .subs-cnts hr {display:block; margin:15px 0; border:0; border-bottom:1px dashed #dfdfdf;} #subs-apply .subs-cnts .date-txt {padding-bottom:15px; font-size:14px; font-weight:700;} #subs-apply .subs-cnts .date-txt strong {color:#ff0000;} #subs-apply .subs-cnts .cnts01 .tit-txt {display:inline-block; padding-right:20px;} #block-subs-delivery-date {margin-top:30px;} .datepickers-container {z-index:99999;} [CSS - 모던심플] ① [기존] 소스를 [변경] 소스로 수정해주세요. ② [신규추가] 소스를 추가해주세요. [기존] #subs-apply { z-index:10000; position:fixed; top:50%; left:50%; display:block; width:660px; margin-left:-330px; margin-top:-300px; border:3px solid #93a5b3; background:#fff; color:#000; } #subs-apply .subs-cnts { padding:30px 50px 15px; height:56px; } #subs-apply .subs-cnts .cnts01 { padding-bottom:15px; } [변경] #subs-apply { z-index:10000; position:fixed; top:50%; left:50%; display:block; width:660px; margin-left:-330px; margin-top:-300px; border:3px solid #93a5b3; background:#fff; color:#000; overflow:auto; max-height: 90%; } #subs-apply .subs-cnts { padding:30px 50px; } #subs-apply .subs-cnts .cnts01 {position:relative; padding-bottom:15px;} [신규추가] #subs-apply .subs-cnts hr {display:block; margin:15px 0; border:0; border-bottom:1px dashed #dfdfdf;} #subs-apply .subs-cnts .date-txt {padding-bottom:15px; font-size:14px; font-weight:700;} #subs-apply .subs-cnts .date-txt strong {color:#ff0000;} #subs-apply .subs-cnts .cnts01 .tit-txt {display:inline-block; padding-right:20px;} #subs-apply .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;} #block-subs-delivery-date {margin-top:30px;} .datepickers-container {z-index:99999;} [예시이미지1 – 정기배송 방식 > 배송주기 설정] [예시이미지2 – 정기배송 방식 > 지정일 직접 설정]
[ MO 버전 4.0 ] 1. 작업위치 중앙디자인 > 상품관련 > 정기배송일 설정 화면 2. 가상태그 - 정기배송일 설정화면 : <subs_select> - 배송 주기 타입 (S : 주기 , F : 지정일) : <!--/subs_cycle_type/--> - 날짜 주기 : <!--/subs_cycle_month/--> - 날짜 설정 : <!--/subs_day/--> 날짜 설정 - 기존 신청한 정기배송 주기 타입 (WEEK : 요일 주기, MONTH : 날짜 주기, FIX : 지정일) : <!--/subs_list_data@cycle_type/--> - 기존 신청한 정기배송 날짜 : <!--/subs_list_data@day/--> 3. 예제소스 * 기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. * 아래 빨간색 소스를 추가해주세요. [ 디자인 편집탭 ] <h3>정기배송일 설정</h3> <div class="txt"> <!--/if_subs_cycle_type(S)/--> <div class="subs-cnts"> <!--/if_subs_cycle/--> <!--/if_subs_week/--> <div class="cnts01"> <span class="tit-txt">요일 선택</span> <!--/subs_cycle/--> <ul id="subs-week" class="day-btns clearfix"> <!--/loop_subs_week/--> <li><!--/subs_week@week/--></li> <!--/end_loop/--> </ul> </div> <!--/if_subs_cycle_month/--><hr /><!--/end_if/--> <!--/end_if/--> <!--/end_if/--> <!--/if_subs_cycle_month/--> <div class="cnts01"> <span class="tit-txt">날짜 선택</span> <!--/subs_cycle_month/--> <!--/subs_day/--> </div> <!--/end_if/--> <!--/block_subs_delivery_date/--><img src="/images/common/ico_calendar2.gif" alt=""> 첫 정기배송 예정일: <strong><!--/subs_delivery_date/--></strong><!--/end_block/--> </div> <!--/end_if/--> <!--/if_subs_cycle_type(F)/--> <div class="subs-cnts"> <p class="date-txt"><strong><!--/subs_delivery_date/--></strong>에 첫 배송됩니다.</p> <div> [상세 배송예정일]<br /> <!--/subs_select_days/--> </div> </div> <!--/end_if/--> <!--/if_subs_list_data/--> <div class="subs-cnts02"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!--/subs_list_data@radio_subs_choice/--> <span><em>상품명</em><strong><!--/subs_list_data@product_name/--></strong></span> <!--/if_subs_list_data@cycle_type(WEEK)/--> <span><em>배송주기</em><!--/subs_list_data@cycle/-->주 간격 / <!--/subs_list_data@week/--></span> <!--/end_if/--> <!--/if_subs_list_data@cycle_type(MONTH)/--> <span><em>배송주기</em><!--/subs_list_data@cycle/-->개월 간격 / <!--/subs_list_data@day/--></span> <!--/end_if/--> <!--/if_subs_list_data@cycle_type(FIX)/--> <span><em>배송주기</em> 지정배송일</span> <!--/end_if/--> <span><em>자동 결제카드</em><!--/subs_list_data@bill_card_name/--></span> [CSS] ① [기존] 소스를 [변경] 소스로 수정해주세요. ② [신규추가] 소스를 추가해주세요. [기존] #subs-apply .layer .layer-pop .txt .subs-cnts .cnts01 { padding-bottom:12px; } [변경] #subs-apply .layer .layer-pop .txt .subs-cnts .cnts01 {position:relative; padding-bottom:12px;} [신규추가] #subs-apply .layer .layer-pop .txt .subs-cnts hr {display:block; margin:15px 0; border:0; border-bottom:1px dashed #dfdfdf;} #subs-apply .layer .layer-pop .txt .subs-cnts .date-txt {padding-bottom:15px; font-size:14px; font-weight:700;} #subs-apply .layer .layer-pop .txt .subs-cnts .date-txt strong {color:#ff0000;} #subs-apply .layer .layer-pop .txt .subs-cnts .cnts01 .tit-txt {display:inline-block; padding-right:20px;} #subs-apply .layer .layer-pop .txt .subs-cnts .cnts01 .date-input {width:100%; height:27px; line-height:27px; margin-top:5px; padding:0 10px; border:1px solid #bbb; font-size:12px; vertical-align:middle; background:url('/images/common/icon_calendar.png') no-repeat 99% center / 15px auto; cursor: pointer;} #block-subs-delivery-date {margin-top:30px;} .datepickers-container {z-index:99999;} * 파워팩의 경우 아래 설정 후 사용해주시기 바랍니다. (모바일 2.0 미지원)
<< 기본 상세 페이지 >> 상품관련 > 상품상세페이지 > 기본상세페이지 > 구매/장바구니버튼 블록 > 기능설정 > 정기배송 신청 [노출] 설정 후 사용 해주시면 됩니다.
목록 1:1 문의