자주 묻는 질문

무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

주문관련

주문서 작성 화면에 당일(퀵)배송 선택 노출 방법

글번호 : 1123

<< 기능 설정 >> 쇼핑몰구축 > 쇼핑몰 운영기능 설정 > 상품 당일배송 설정 > 당일배송 설정 ‘사용함’ 설정 후 해당 기능을 사용 하실 수 있습니다. *기본소스에도 아래 가상태그가 적용되어 있으니 참고해주시기 바랍니다. [관련 가상태그] - 당일배송 배송비  - 당일배송 설정시 총 결제금액(할인 및 이벤트 적용 전 금액)  - 당일배송 실제 사용여부(메세지 타입이 아닐경우) 조건문(IF)  - 당일배송 사용여부 조건문(IF)  - 당일배송 시간별 설정시 시간대선택 (RADIO)  - 일반배송/당일배송 선택 (RADIO)  [D4 / 파워팩 지원 가상태그] - 당일배송 노출 지역 팝업 열기  - 당일배송 노출 지역 팝업 닫기

[ PC버전 ] 1. 작업위치 중앙 디자인 > 주문관련 > 고급형 주문서 작성 2. 예제소스

[베이직 심플] [디자인 편집탭] – 아래 빨간색 소스를 추가해 주시면 됩니다.

<tr> <th scope="row"><div class="txt-l">배송설정</div></th> <td colspan="3">

<a href="#none" id="deliquick_finder" onclick="">배송가능지역</a>

<br />  </td> </tr>   [CSS탭] - 아래 빨간색 소스를 추가해 주시면 됩니다.

/* 당일 배송 노출 지역 리스트 팝업 */ .fs-13 { font-size: 13px; } .deli_quick_list_cont { padding:0 30px 30px; letter-spacing: -1px; } .deli_quick_list_tit { padding:26px 0 20px; font-size: 26px;color: #000;font-weight: bold;letter-spacing: -2px; } .deli_quick_list_close { position: absolute; top: -2px; right: -2px; background: none; } #deli_quick_list_layer{ z-index:100; position:fixed; top:50%; left:65%; width:auto; border:2px solid #2a61dd; background: #fff; font-size: 14px; display:block; font-weight: normal; color:#000; text-align:left; line-height:1; box-shadow:3px 3px 10px grey; max-height:763px; margin-left:-230px; margin-top:-365px; } #deliquick_finder { display: inline-block; height: 23px; line-height: 25px; padding: 0px 5px; border: 1px solid rgb(221, 221, 221); color: rgb(0, 0, 0); font-weight: bold; letter-spacing: -1px; border-radius: 3px; }

[모던심플] [디자인 편집탭] – 아래 빨간색 소스를 추가해 주시면 됩니다.

<tr> <th scope="row"><div class="txt-l">배송설정</div></th> <td colspan="3">

<a href="#none" id="deliquick_finder" onclick="" class="btn-white">배송가능지역</a>

</td> </tr>

3. 예제이미지

[ 모바일 버전 ] 1. 작업위치 중앙 디자인 > 주문관련 > 고급형 주문서 작성 2. 예제소스

[모바일 4.0] [디자인 편집탭] ① 당일배송 태그 – 아래 빨간색 소스를 추가해 주시면 됩니다.

<tr> <th scope="row">배송선택</th> <td>

<a href="#" class="btn_White btn-delivery-area" style="width:81px; display:inline-block; height:25px; line-height:25px;">배송가능지역</a>

</td> </tr>   ② 당일배송 가능지역 검색 팝업 태그 – 전체 소스를 추가해주시면 됩니다.

<div id="delivery-area" style="display:none;"> <div class="layer"> <div class="layer-pop"> <h3>당일배송 가능지역 찾기</h3> <div class="txt"> <div id="searchStep01" class="step-comm" style="display: block;"> <p class="addr_type"> <label><input type="radio" name="posttype_quick" value="" title="도로명 주소 검색" form="addr_search_quick" checked="checked"> 도로명 검색</label> </p> <div id="MS_addr_type_load" class="" style="display: none;"> <div class="msg-wrap"> <p class="msg01 bold"><span class="msg01-highlight">도로명(건물명)</span>을 2글자 이상 입력하세요.</p> <p class="msg02">예)강남대로100길, 가산디지털1로</p> <p class="msg03">국내 주소만 입력이 가능합니다.</p> </div> </div> <div class="search-form"> <form name="addr_search_quick" id="addr_search_quick" method="post" action="order.info.html" onsubmit="return false;"> <input type="hidden" name="mode_quick" value="SearchPost"> <fieldset> <legend>우편번호 검색 폼</legend> <span class="keyword"><input type="text" name="address_search_quick" id="addr_search_quick" value="" form="addr_search" title="주소를 입력하세요"></span><button class="btn_Grey" type="submit" onclick="javascript:mo_pop_quickdeli();">검색</button> </fieldset> </form> </div> <div id="searchStep02"> <h4>주소 선택</h4> <select class="addr-list-quick MS_input_select" name="addr_search_select" form="addr_search_quick" style="width:320px;"> </select> <div class="delivery-area-txt"> <p id="btm-txt">지역을 선택해주세요.</p> </div> </div> </div> <a href="#this" class="close"><span class="fa fa-times fa-2x"></span></a> </div> </div> </div>

[CSS탭] – 전체 소스를 추가해주시면 됩니다.

/* 당일배송가능 지역 레이어 */ #delivery-area {display:none;} #delivery-area .addr_type {text-align:left; font-weight: bold;} #delivery-area .addr_type label {margin:0;} #delivery-area .keyword input {width:45%;} #delivery-area .msg01 {text-align: center;} #delivery-area .MS_addr_type_area {text-align: center; margin:10px 0;} #delivery-area .search-form .btn_Grey {width:105px; display:inline; margin-left: 10px;} #delivery-area .addr-list {width:100%;} #delivery-area .msg-wrap {background-color: #fbfbfb; padding:10px 0; text-align: center;} #delivery-area .msg-wrap .msg01-highlight {color:#1984f1;} #delivery-area #searchStep01 {margin-top:10px;} #delivery-area #searchStep02 {margin-top:20px;} #delivery-area #searchStep02 h4 {font-weight: bold;} #delivery-area #searchStep02 .btn_Black {margin-top:10px;} #delivery-area #searchStep03 table {width:100%;} #delivery-area #searchStep03 table th {width:20%; text-align: left;} #delivery-area #searchStep03 table td {padding:10px 0;} #delivery-area #searchStep03 table .detail-addrPost input {width:50px;} #delivery-area #searchStep03 table .detail-addrAddress input {width:90%; margin-bottom: 5px;} #delivery-area .delivery-area-txt {margin: 40px 0px; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; text-align: center;} #delivery-area .delivery-area-txt p {line-height: 60px;}

[JS탭] – 전체 소스를 추가해주시면 됩니다.

// 당일배송가능지역찾기 팝업 열기 닫기 $('.btn-delivery-area').click(function(){ $('#delivery-area').show(); }); $('#delivery-area .close').click(function(){ $('#delivery-area').hide(); });

[모바일 2.0] [디자인 편집탭] ① 당일배송 태그 – 아래 빨간색 소스를 추가해 주시면 됩니다.

<tr> <th scope="row">배송선택</th> <td>

<a href="#" class="btn-type-01 box-gradient-01 box-shadow-01 btn-delivery-area">배송가능지역</a>

</td> </tr>   ② 당일배송 가능지역 검색 팝업 태그 – 전체 소스를 추가해주시면 됩니다.

<div id="delivery-area" class="step-comm" style="display: none;"> <div class="search-container"> <div class="search-header"> <h2 class="bg-stit post-tit">당일배송 가능지역 찾기</h2> </div> <div id="searchStep01" class="step-comm" style="display: block;"> <h3 class="hidden">주소 찾기</h3> <p class="msg01 r-btn" style="margin-left:0px;"> <label><input type="radio" name="posttype_quick" value="" title="도로명 주소 검색" form="addr_search_quick" checked="checked"> 도로명 검색</label> </p> <div id="MS_addr_type_load" class=""> <div class="msg-wrap"> <p class="msg01"> <span class="msg01-highlight">도로명(건물명)</span>을 2글자 이상 입력하세요. </p> <p class="msg02"> 예)강남대로100길, 가산디지털1로 </p> <p class="msg03"> 국내 주소만 입력이 가능합니다. </p> </div> </div> <div class="search-form"> <form name="addr_search_quick" id="addr_search_quick" method="post" action="order.info.html" onsubmit="return false;"> <input type="hidden" name="mode_quick" value="SearchPost"> <fieldset> <legend>우편번호 검색 폼</legend> <span class="keyword"><input type="text" name="address_search_quick" value="" form="addr_search" title="주소를 입력하세요"></span> <button class="btn-submit" type="submit" onclick="javascript:mo_pop_quickdeli();">검색</button> </fieldset> </form> </div> <div id="searchStep02"> <h3 class="hidden">주소 선택</h3> <select class="addr-list-quick MS_input_select" name="addr_search_select" form="addr_search_quick" style="margin-left:2px; width:95%"> </select> </div> </div> <hr> <div class="delivery-area-txt"> <p id="btm-txt">지역을 선택해주세요.</p> </div> <div class="btn-type01 btn-close"> <a href="#this">닫기</a> </div> </div> </div>

[CSS탭] – 전체 소스를 추가해주시면 됩니다.

/* 당일배송가능지역 찾기 레이어 s */ #delivery-area { z-index: 3; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; } #delivery-area p { margin: 0; } #delivery-area .search-container { background: #f6f6f6; padding-bottom: 25px; } #delivery-area .search-header { background-color: #fff; } #delivery-area .search-header h2 { padding-left: 40px; padding-bottom: 5px; color: #222; text-shadow: 1px 1px 0 #fff; font-size: .875em; margin-top: 25px; font-weight: bold; } #delivery-area .search-header h2:after { left: 5px; bottom: 8px; width: 31px; height: 19px; background-position: 0 -77px; } #delivery-area .msg-wrap { background: #D9D9D9; margin-top: 15px; border: 1px solid #9C9C9C; } #delivery-area p.msg01, #delivery-area p.msg02, #delivery-area p.msg03 { text-align: center; font-size: .75em; } #delivery-area p.msg01 { margin-left: 10px; color: #3d3d3d; font-weight: bold; } #delivery-area p.msg02 { font-size: smaller; color: #7F7F7F; } #delivery-area p.msg03 { font-size: smaller; color: #000000; margin-top: 15px; } #delivery-area p.msg01.r-btn { text-align: left; color: #3d3d3d; font-weight: bold; } #delivery-area .msg01-highlight { color: #0070C0; } #delivery-area .btn-close { padding: 0 10px; } #delivery-area .btn-close a { display: inline-block; text-align: center; line-height: 1.25em; width: 100%; padding: 6px 0; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #delivery-area .step-comm { display: none; border-top: 2px solid #cacaca; padding: 20px 20px 30px; } /* step01 */ #delivery-area #searchStep01 { display: none; } #delivery-area #searchStep01 .msg02 { margin-top: 5px; } #delivery-area #searchStep01 .search-form { position: relative; padding-right: 65px; margin-top: 10px; } #delivery-area #searchStep01 .search-form .keyword { display: block; margin-right: 15px; } #delivery-area #searchStep01 .search-form .keyword input { padding: 3px 5px; width: 100%; outline: none; vertical-align: top; border: 0 none; -webkit-appearance: none; border: 1px solid #a1a1a1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #delivery-area #searchStep01 .search-form .btn-submit { position: absolute; right: 0; top: 0; width: 60px; height: 26px; color: #ffffff; font-size: 12px; font-weight: bold; font-family: sans-serif, Dotum; border: 0 none; text-shadow: 1px 1px 0 #5a5a5a; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #848584; background: -webkit-gradient(linear, left top, left bottom, from(#a0a09f), to(#848584)); background: -moz-linear-gradient(top, #a0a09f, #848584); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0a09f', endColorstr='#848584'); } /* step02 */ #delivery-area #searchStep02 { margin-top: 20px; } #delivery-area #searchStep02 .addr-list { margin-top: 10px; width: 100%; border: 1px solid #a1a1a1; } #delivery-area #searchStep02 .btn-next button { padding: 3px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #delivery-area .delivery-area-txt {margin-bottom: 10px; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; text-align: center;} #delivery-area .delivery-area-txt p {line-height: 50px; font-size: .75em;} /* 당일배송가능지역 찾기 레이어 e */

[JS탭] – 전체 소스를 추가해주시면 됩니다.

// 당일배송가능지역찾기 팝업 열기 닫기 $('.btn-delivery-area').click(function(){ $('#delivery-area').show(); }); $('#delivery-area .btn-close').click(function(){ $('#delivery-area').hide(); });

* 파워팩 설정방법 [주문관련] > [고급형 주문서 작성] > 주문/결제정보 블럭 선택 > 당일배송 '노출함' 설정 후 저장 3. 예제이미지

이전 글

상품 목록 이미지에 마우스 오버 시 투명 효과주기
다음 글

주문서 작성 화면에 입금자 입력 노출 방법

목록 1:1 문의

Make Shop, Make Signature

시작하기

인기 검색어

무엇을 도와드릴까요?

개별디자인 TIP

(주)커넥트웨이브