|
@@ -18,7 +18,7 @@
|
|
|
-->
|
|
-->
|
|
|
<body>
|
|
<body>
|
|
|
<th:block layout:fragment="content">
|
|
<th:block layout:fragment="content">
|
|
|
-<!-- container -->
|
|
|
|
|
|
|
+ <!-- // container -->
|
|
|
<div id="container" class="container dp">
|
|
<div id="container" class="container dp">
|
|
|
<div class="breadcrumb">
|
|
<div class="breadcrumb">
|
|
|
<ul>
|
|
<ul>
|
|
@@ -33,99 +33,195 @@
|
|
|
<h3>총알배송</h3>
|
|
<h3>총알배송</h3>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="cont_body">
|
|
|
|
|
- <div class="Bulletship" th:utext="${#strings.replace(#strings.replace(shotHtml.fsrcPc,'&lt;','<'),'&gt;','>')}">
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="Bulletship_list">
|
|
|
|
|
- <div class="cont_head">
|
|
|
|
|
- <div class="bullet_sticky_nav">
|
|
|
|
|
- <ul>
|
|
|
|
|
- <li><a href="#brand01">모이몰른</a></li> <!-- 섹션이동 -->
|
|
|
|
|
- <li><a href="#brand02">컬리수</a></li>
|
|
|
|
|
- </ul>
|
|
|
|
|
|
|
+ <div class="cont_body" th:utext="${#strings.replace(#strings.replace(shotHtml.fsrcPc,'&lt;','<'),'&gt;','>')}">
|
|
|
|
|
+ <div class="bulletship">
|
|
|
|
|
+ <div class="bulletship_head">
|
|
|
|
|
+ <img src="/images/pc/thumb/bullet_bg1.png" alt="10시까지 주문하면 당일도착">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="bulletship_body" id="shotHtml">
|
|
|
|
|
+ <!-- 비로그인 상태 or 로그인을 했지만 주소정보를 못 가져오는 경우 -->
|
|
|
|
|
+ <div class="txt_result">
|
|
|
|
|
+ <p>오전10시 이전 주문 당일도착</p>
|
|
|
|
|
+ <p><span>총알배송이 가능한 지역</span>인지<br>확인해보세요!</p>
|
|
|
|
|
+ <div class="bulletshop_btn">
|
|
|
|
|
+ <button type="button" class="btn btn_default btn_block"><span>내 배송지 확인하기</span></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p>서울·경기·인천 중 일부지역은 총알배송이 불가합니다.</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <!-- 비로그인 상태 or 로그인을 했지만 주소정보를 못 가져오는 경우 -->
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="cont_body">
|
|
|
|
|
- <div class="list_content">
|
|
|
|
|
- <div id="brand01">
|
|
|
|
|
- <div class="item_header"> <!-- 섹션이동 -->
|
|
|
|
|
- <h4>모이몰른</h4>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="itemsGrp">
|
|
|
|
|
- <div class="item_prod">
|
|
|
|
|
- <div class="item_state">
|
|
|
|
|
- <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
|
|
- <a href="#none" class="itemLink">
|
|
|
|
|
- <div class="rank ranker"><span>1</span></div>
|
|
|
|
|
- <div class="itemPic">
|
|
|
|
|
- <img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
|
|
|
|
|
- </div>
|
|
|
|
|
- <p class="itemBrand">BRAND NAME</p>
|
|
|
|
|
- <div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
|
|
|
|
|
- <p class="itemPrice">80,100
|
|
|
|
|
- <span class="itemPrice_original">89,000</span>
|
|
|
|
|
- <span class=" itemPercent">10%</span>
|
|
|
|
|
- </p>
|
|
|
|
|
- <div class="itemcolorchip">
|
|
|
|
|
- <span class="chip_color35" value="ABM">BEIGE</span>
|
|
|
|
|
- <span class="chip_color54" value="BDS">BLACK</span>
|
|
|
|
|
- <span class="chip_color40" value="YBR">WHITE</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <p class="itemBadge">
|
|
|
|
|
- <span class="badge13">베스트 </span>
|
|
|
|
|
- </p>
|
|
|
|
|
- <div class="itemComment">#주문 폭주 상품</div>
|
|
|
|
|
- </a>
|
|
|
|
|
|
|
+ <div class="bulletship_foot">
|
|
|
|
|
+ <img src="/images/pc/thumb/bullet_bg2.png" alt="주문/도착, 배송일, 대상상품">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- 총알배송 가능 상품 리스트 -->
|
|
|
|
|
+ <div class="content sticky_nav_list">
|
|
|
|
|
+ <div class="cont_head">
|
|
|
|
|
+ <div class="sticky_nav">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li><a href="#brand01">모이몰른</a></li> <!-- 섹션이동 -->
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="cont_body">
|
|
|
|
|
+ <div class="list_content">
|
|
|
|
|
+ <div id="brand01">
|
|
|
|
|
+ <div class="item_header"> <!-- 섹션이동 -->
|
|
|
|
|
+ <h4>모이몰른</h4>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="itemsGrp"> <!-- itemsGrp rank hot deal -->
|
|
|
|
|
+ <div class="item_prod">
|
|
|
|
|
+ <div class="item_state">
|
|
|
|
|
+ <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
|
|
+ <div class="rank ranker"><span>1</span></div>
|
|
|
|
|
+ <div class="itemPic">
|
|
|
|
|
+ <img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div id="brand02">
|
|
|
|
|
- <div class="item_header" > <!-- 섹션이동 -->
|
|
|
|
|
- <h4>컬리수</h4>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="itemsGrp">
|
|
|
|
|
- <div class="item_prod">
|
|
|
|
|
- <div class="item_state">
|
|
|
|
|
- <button type="button" class="itemLike">관심상품 추가</button>
|
|
|
|
|
- <a href="#none" class="itemLink">
|
|
|
|
|
- <div class="rank ranker"><span>1</span></div>
|
|
|
|
|
- <div class="itemPic">
|
|
|
|
|
- <img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
|
|
|
|
|
- </div>
|
|
|
|
|
- <p class="itemBrand">BRAND NAME</p>
|
|
|
|
|
- <div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
|
|
|
|
|
- <p class="itemPrice">80,100
|
|
|
|
|
- <span class="itemPrice_original">89,000</span>
|
|
|
|
|
- <span class=" itemPercent">10%</span>
|
|
|
|
|
- </p>
|
|
|
|
|
- <div class="itemcolorchip">
|
|
|
|
|
- <span class="chip_color35" value="ABM">BEIGE</span>
|
|
|
|
|
- <span class="chip_color54" value="BDS">BLACK</span>
|
|
|
|
|
- <span class="chip_color40" value="YBR">WHITE</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <p class="itemBadge">
|
|
|
|
|
- <span class="badge13">베스트 </span>
|
|
|
|
|
- </p>
|
|
|
|
|
- <div class="itemComment">#주문 폭주 상품</div>
|
|
|
|
|
- </a>
|
|
|
|
|
|
|
+ <p class="itemBrand">BRAND NAME</p>
|
|
|
|
|
+ <div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
|
|
|
|
|
+ <p class="itemPrice">80,100
|
|
|
|
|
+ <span class="itemPrice_original">89,000</span>
|
|
|
|
|
+ <span class=" itemPercent">10%</span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <div class="itemcolorchip">
|
|
|
|
|
+ <span class="chip_color35" value="ABM">BEIGE</span>
|
|
|
|
|
+ <span class="chip_color54" value="BDS">BLACK</span>
|
|
|
|
|
+ <span class="chip_color40" value="YBR">WHITE</span>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ <p class="itemBadge">
|
|
|
|
|
+ <span class="badge13">베스트 </span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <div class="itemComment">#주문 폭주 상품</div>
|
|
|
|
|
+ </a>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <!-- //총알배송 가능 상품 리스트 -->
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- // container -->
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 총알배송 가능여부 결과 팝업 -->
|
|
|
|
|
+ <div class="modal fade bulletShip_pop" id="bulletShipPop" tabindex="-1" role="dialog" aria-labelledby="bulletShipPopLabel" aria-hidden="true">
|
|
|
|
|
+ <div class="modal-dialog" role="document">
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
|
+ <div class="modal-header">
|
|
|
|
|
+ <h5 class="modal-title" id="bulletShipLabel"><span class="sr-only">총알배송 가능여부 결과</span></h5>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-body">
|
|
|
|
|
+ <div class="pop_cont">
|
|
|
|
|
+ <div class="txt_result">
|
|
|
|
|
+ <p>고객님이 찾으시는 지역은</p>
|
|
|
|
|
+ <p><span id="shotAdr"></span> 가능 지역</p>
|
|
|
|
|
+ <div class="address">
|
|
|
|
|
+ <p id="addr"></p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="info">
|
|
|
|
|
+ <p id="infoTxt"></p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
|
+ <button type="button" id="" class="btn btn_dark" onclick="$.modal.close();"><span>계속 쇼핑하기</span></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <a href="#close-modal" rel="modal:close" id="bulletShipPop_close" class="close-modal">Close</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- //총알배송 가능여부 결과 팝업 -->
|
|
|
|
|
+
|
|
|
<script th:inline="javascript">
|
|
<script th:inline="javascript">
|
|
|
/*<![CDATA[*/
|
|
/*<![CDATA[*/
|
|
|
|
|
+let custAddr = [[${custAddr}]];
|
|
|
|
|
+let customerInfo = [[${customerInfo}]];
|
|
|
|
|
+
|
|
|
|
|
+// 로그인 확인
|
|
|
|
|
+var shotBody = function () {
|
|
|
|
|
+ if (!cfCheckLogin() || (custAddr == null && custAddr == '')) {
|
|
|
|
|
+ html = '';
|
|
|
|
|
+ html += '<div class="txt_result"> ';
|
|
|
|
|
+ html += ' <p>오전10시 이전 주문 당일도착</p> ';
|
|
|
|
|
+ html += ' <p><span>총알배송이 가능한 지역</span>인지<br>확인해보세요!</p> ';
|
|
|
|
|
+ html += ' <div class="bulletshop_btn"> ';
|
|
|
|
|
+ html += ' <button type="button" class="btn btn_default btn_block" onclick="fnOpenDaumAddr();"><span>내 배송지 확인하기</span></button> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += ' <p>서울·경기·인천 중 일부지역은 총알배송이 불가합니다.</p> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+
|
|
|
|
|
+ $("#shotHtml").append(html);
|
|
|
|
|
+ }else{
|
|
|
|
|
+ html = '';
|
|
|
|
|
+ html += ' <div class="txt_result">';
|
|
|
|
|
+ html += ' <p><span>'+customerInfo.custNm+'</span>님의 배송지는</p>';
|
|
|
|
|
+ if (custAddr.shotDelvUseYn === 'Y') {
|
|
|
|
|
+ html += ' <p><span>총알배송</span> 가능 지역</p>';
|
|
|
|
|
+ }else{
|
|
|
|
|
+ html += ' <p><span>일반배송</span> 지역</p>';
|
|
|
|
|
+ }
|
|
|
|
|
+ html += ' <div class="bullet_able">';
|
|
|
|
|
+ html += ' <p>'+custAddr.recipBaseAddr+' '+custAddr.recipDtlAddr+'</p>';
|
|
|
|
|
+ html += ' </div>';
|
|
|
|
|
+ html += ' <div class="bulletshop_btn">';
|
|
|
|
|
+ html += ' <button class="btn btn_default btn_block" onclick="fnOpenDaumAddr();"><span>다른 배송지 확인하기</span></button>';
|
|
|
|
|
+ html += ' </div>';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ $("#shotHtml").append(html);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+//우편번호 DAUM을 이용한 우편번호 팝업 레이어
|
|
|
|
|
+var fnOpenDaumAddr = function() {
|
|
|
|
|
+ let daumZip = new daum.Postcode({
|
|
|
|
|
+ oncomplete: function(data) {
|
|
|
|
|
+ // data.zonecode
|
|
|
|
|
+
|
|
|
|
|
+ $.ajax( {
|
|
|
|
|
+ type : "GET",
|
|
|
|
|
+ url : '/planning/shot/delivery/confirm?recipZipcode='+data.zonecode,
|
|
|
|
|
+ dataType : 'json',
|
|
|
|
|
+ success : function(result) {
|
|
|
|
|
+ if (result != null) {
|
|
|
|
|
+ $('#addr').text(cfnGetDaumRoadAddr(data));
|
|
|
|
|
+ if(result.shotDelvUseYn == "Y"){
|
|
|
|
|
+ $('#shotAdr').text("총알배송");
|
|
|
|
|
+ $("#infoTxt").text("오늘 오전 10시까지 주문하시면 오늘 도착합니다. (토, 일, 공휴일 휴무)")
|
|
|
|
|
+
|
|
|
|
|
+ }else{
|
|
|
|
|
+ $('#shotAdr').text("일반배송");
|
|
|
|
|
+ $("#infoTxt").text("주문시간/배송지에 따라 2~3일 이내 도착합니다. (일, 공휴일 휴무)")
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ $("#bulletShipPop").modal("show");
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ cfnCloseDaumAddr();
|
|
|
|
|
+ },
|
|
|
|
|
+ width: '100%'
|
|
|
|
|
+ });
|
|
|
|
|
+ cfnOpenDaumAddr(daumZip);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
|
|
|
-/*]]>*/
|
|
|
|
|
-</script>
|
|
|
|
|
|
|
+$(document).ready(function() {
|
|
|
|
|
+ shotBody();
|
|
|
|
|
+ $("#bulletShipPop_close").click(function() {
|
|
|
|
|
+ $.modal.close();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+});
|
|
|
|
|
+ /*]]>*/
|
|
|
|
|
+</script>
|
|
|
|
|
|
|
|
</th:block>
|
|
</th:block>
|
|
|
|
|
|