style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
							<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : OrderCompleteWeb.html
 * @desc    : 주문완료 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.16   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<!--  container -->
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<div id="container" class="container od">
	<div class="wrap">
		<div class="content completed">
			<div class="cont_head">
				<h2>주문완료</h2>
				<div class="oder_steps">
					<ul>
						<li><span>01</span>&nbsp;쇼핑백</li>
						<li><span>02</span>&nbsp;주문/결제</li>
						<li class="on"><span>03</span>&nbsp;주문완료</li>
					</ul>
				</div>
			</div>
			<div class="cont_body">
				<!-- CONT-BODY -->
				<div class="od_cont">
					<div class="sec_head">
						<div class="info_complete">
							<p class="txt_box">감사합니다. <span th:text="${orderInfo.ordNm}"></span> 고객님의 주문이 완료되었습니다.</p>
							<dl class="report_box">
								<div>
									<dt>주문번호</dt>
									<dd><span th:text="${orderInfo.ordNo}"></span></dd>
								</div>
								<!-- 무통장입금 결제시 -->
								<th:block th:if="${orderInfo.payMeans} == 'G014_20'">
									<div>
										<dt>무통장입금정보</dt>
										<dd><span th:text="${orderInfo.cardNm}"></span>(<span th:text="${orderInfo.vaNm}"></span>)&nbsp;/&nbsp;<span th:text="${orderInfo.vaNo}"></span></dd>
									</div>
									<div class="closedate">
										<dt>입금마감</dt>
										<dd><span th:text="|${orderInfo.vaDeadline} 23:59:59|"> 23:59:59</span>까지</dd>
									</div>
								</th:block>
								<!-- //무통장 입금 결제시 -->
							</dl>
						</div>
					</div>
					<div class="sec_body">
						<div class="area_payinfo">
							<h3>주문자 정보</h3>
							<div class="tbl type1">
								<table>
									<colgroup>
										<col width="210">
										<col width="*">
									</colgroup>   
									<tbody>
										<tr>
											<th>주문 고객</th>
											<td>
												<div class="single_line">
													<ul>
														<li><span th:text="${orderInfo.ordNm}"></span></li>
														<li><span th:text="${orderInfo.ordEmail}"></span></li>
														<li><span th:text="${orderInfo.ordPhnno}"></span></li>
													</ul>
												</div>
											</td>
										</tr>
										<tr>
											<th>배송지 정보</th>
											<td>
												<div class="block_line">
													<ul>
														<li>
															<span id="recipNm" th:text="${orderInfo.recipNm}"></span>
														</li>
														<li>
															<span id="recipPhnno" th:text="${orderInfo.recipPhnno}"></span>
														</li>
														<li>
															<span id="recipAddr" th:text="${orderInfo.recipBaseAddr} + '    ' + ${orderInfo.recipDtlAddr}"></span>
															<button type="button" id="btn_adrsChange_pop" class="btn btn_default btn_sm"><span>배송지 변경</span></button>
														</li>
														<li>
															배송요청 사항&nbsp;:&nbsp;<span id="delvMemo" th:text="${orderInfo.delvMemo}"></span>
															<button type="button" id="btn_rqstModify_pop" class="btn_underline"><span>변경하기</span></button>
														</li>
													</ul>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="area_payinfo">
							<h3>결제정보</h3>
							<div class="tbl type6">
								<table>
									<colgroup>
										<col width="50%">
										<col width="50%">
									</colgroup>
									<tr>
										<td>
											<dl>
												<div>
													<dt>상품금액</dt>
													<dd><em th:text="${#numbers.formatInteger(listSumAmt, 1, 'COMMA')}"></em>원</dd>	
												</div>
												<div>
													<dt>배송비</dt>
													<dd><em th:text="${#numbers.formatInteger(realDelvSumAmt, 1, 'COMMA')}"></em>원</dd>	
												</div>
												<div>
													<dt>상품할인</dt>
													<th:block th:if="${goodsDcSumAmt}>0">
														<dd><em th:text="|- ${#numbers.formatInteger(goodsDcSumAmt, 1, 'COMMA')}|"></em>원</dd>
													</th:block>
													<th:block th:if="${goodsDcSumAmt}<1">
														<dd><em>0</em>원</dd>
													</th:block>
												</div>
												<div>
													<dt>즉시할인</dt>
													<th:block th:if="${cpn1DcSumAmt}>0">
														<dd><em th:text="|- ${#numbers.formatInteger(cpn1DcSumAmt, 1, 'COMMA')}|"></em>원</dd>
													</th:block>
													<th:block th:if="${cpn1DcSumAmt}<1">
														<dd><em>0</em>원</dd>
													</th:block>
												</div>
												<!-- 회원인경우노출 -->
												<th:block th:if="${isLogin}">
													<div>
														<dt>다다익선 할인</dt>
														<th:block th:if="${tmtbSumAmt}>0">
															<dd><em th:text="|- ${#numbers.formatInteger(tmtbSumAmt, 1, 'COMMA')}|"></em>원</dd>
														</th:block>
														<th:block th:if="${tmtbSumAmt}<1">
															<dd><em>0</em>원</dd>
														</th:block>
													</div>
													<div>
														<dt>쿠폰할인</dt>
														<th:block th:if="${cpnDcSumAmt}>0">
															<dd><em th:text="|- ${#numbers.formatInteger(cpnDcSumAmt, 1, 'COMMA')}|"></em>원</dd>
														</th:block>
														<th:block th:if="${cpnDcSumAmt}<1">
															<dd><em>0</em>원</dd>
														</th:block>
													</div>
													<div>
														<dt>선포인트 할인</dt>
														<th:block th:if="${prePntDcSumAmt}>0">
															<dd><em th:text="|- ${#numbers.formatInteger(prePntDcSumAmt, 1, 'COMMA')}|"></em>원</dd>
														</th:block>
														<th:block th:if="${prePntDcSumAmt}<1">
															<dd><em>0</em>원</dd>
														</th:block>
													</div>
													<div>
														<dt>포인트 사용</dt>
														<th:block th:if="${pntDcSumAmt}>0">
															<dd><em th:text="|- ${#numbers.formatInteger(pntDcSumAmt, 1, 'COMMA')}|"></em>원</dd>
														</th:block>
														<th:block th:if="${pntDcSumAmt}<1">
															<dd><em>0</em>원</dd>
														</th:block>
													</div>
													<div>
														<dt>상품권 사용</dt>
														<th:block th:if="${gfcdUseSumAmt}>0">
															<dd><em th:text="|- ${#numbers.formatInteger(gfcdUseSumAmt, 1, 'COMMA')}|"></em>원</dd>
														</th:block>
														<th:block th:if="${gfcdUseSumAmt}<1">
															<dd><em>0</em>원</dd>
														</th:block>
													</div>
												</th:block>
												<!-- //회원인경우노출 -->
												<div>
													<dt>마일리지 사용</dt>
													<th:block th:if="${mileageDcAmt}>0">
														<dd><em th:text="|- ${#numbers.formatInteger(mileageDcAmt, 1, 'COMMA')}|"></em>원</dd>
													</th:block>
													<th:block th:if="${mileageDcAmt}<1">
														<dd><em>0</em>원</dd>
													</th:block>
												</div>
												<div>
													<dt>제휴할인</dt>
													<th:block th:if="${allianceDcAmt}>0">
														<dd><em th:text="|- ${#numbers.formatInteger(allianceDcAmt, 1, 'COMMA')}|"></em>원</dd>
													</th:block>
													<th:block th:if="${allianceDcAmt}<1">
														<dd><em>0</em>원</dd>
													</th:block>
												</div>
												
											</dl>
										</td>
										<td>
											<dl>
												<div>
													<dt>결제 금액</dt>
													<dd>
														<div class="price">
															<span class="pay_total_price"><em th:text="${#numbers.formatInteger(realOrdSumAmt, 1, 'COMMA')}"></em>원</span>
														</div>
													</dd>
												</div>
												<!-- 신용카드 일때 -->
												<div>
													<dt class="sr-only">결제방법</dt>
													<dd th:if="${orderInfo.pgGb == 'NAVER'}">네이버 페이</dd>
													<dd th:if="${orderInfo.pgGb == 'KAKAO'}">카카오 페이</dd>
													<dd th:if="${orderInfo.pgGb == 'PAYCO'}">PAYCO</dd>
													<dd th:if="${orderInfo.pgGb == 'KCP' and orderInfo.payMeans == 'G014_10'}">
														실시간계좌이체
														<th:blcok th:if="${orderInfo.cashAuthNo} != null and ${orderInfo.cashAuthNo} != ''">
														(현금영수증신청)
														</th:blcok>
													</dd>
													<dd th:if="${orderInfo.pgGb == 'KCP' and orderInfo.payMeans == 'G014_20'}">
														무통장입금
														<th:blcok th:if="${orderInfo.cashAuthNo} != null and ${orderInfo.cashAuthNo} != ''">
														(현금영수증신청)
														</th:blcok>
													</dd>
													<dd th:if="${orderInfo.pgGb == 'KCP' and orderInfo.payMeans == 'G014_30'}" th:text="|${orderInfo.cardNm}/${orderInfo.cardMips}|"></dd>
													<dd th:if="${orderInfo.pgGb == 'KCP' and orderInfo.payMeans == 'G014_60'}">휴대폰결제</dd>
												</div>
												<!-- //신용카드 일때 -->
											</dl>
											<!-- 회원인경우노출 -->
											<th:block th:if="${isLogin}">
												<dl>
													<div>
														<dt>적립 예정 포인트</dt>
														<dd>
															<span class="save_point"><em th:text="|${#numbers.formatInteger(savePntSumAmt, 1, 'COMMA')}P|"></em></span>
														</dd>
													</div>
												</dl>
											</th:block>
											<!-- //회원인경우노출 -->
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="sec_foot">
						<div class="btn_group_md">
							<th:block th:if="${isLogin} == true">
								<button type="button" class="btn btn_default btn_md" th:ordno="${orderInfo.ordNo}" onclick="fnGoToOrderDetail(this);"><span>주문 상세보기</span></button>
							</th:block>
							<th:block th:if="${isLogin} == false">
								<button type="button" class="btn btn_default btn_md" th:ordno="${orderInfo.ordNo}" onclick="cfnGoToPage(_PAGE_NON_CUSTOMER_ORDER_CONFIRM);"><span>주문 상세보기</span></button>
							</th:block>
							<button type="button" class="btn btn_dark btn_md" onclick="location.href='/'"><span>쇼핑 계속하기</span></button>
						</div>
					</div>
				</div>
				<!-- //CONT-BODY -->
			</div>
		</div>
	</div>
</div>
<!-- // container -->

<script th:inline="javascript">
// 배송관련정보 변수선언
var ordNo			= [[${orderInfo.ordNo}]]		// 배송목록
var isLogin			= [[${isLogin}]];				// 로그인여부
var delvAddrSq		= [[${delvAddrSq}]];			// 배송지번호
let jsonObj			= {};

// 2.1 회원 배송지변경 팝업열기
$('#btn_adrsChange_pop').on("click", function(){
	// 회원인경우
	if (isLogin == true) {
		$.ajax( {
			type		: "POST",
			url 		: '/common/delvAddrChangePop',
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				$("#adrsChangePop .modal-dialog .modal-content").html(result);
				$("#adrsChangePop").modal("show");
			}
		});
	}
	// 비회원인경우
	else {
		$.ajax( {
			type		: "POST",
			url 		: '/common/delvAddrAddPop',
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				$("#adrsAddPop .modal-dialog .modal-content").html(result);
				$("#adrsAddPop").modal("show");
			}
		});	
	}
});

// 2.2 배송요청사항 팝업열기
$("#btn_rqstModify_pop").on("click", function(e){
	var jsonObj = new Object();
	jsonObj.delvMemo = $("#delvMemo").text();
	
	$.ajax({
		type		: "POST",
		url 		: "/common/delvMemoChangePop",
		data		: JSON.stringify(jsonObj),
		dataType 	: "html",
		beforeSend 	: function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
		},
		success 	: function(result) {
			if (result != null) {
				$("#rqstModifyPop .modal-dialog .modal-content").html(result);
				$("#rqstModifyPop").modal("show");
			}
		}
	});
	
	return false;
});

// 1.18 배송지정보 설정
var delvAddrSet = function(delvObj) {
	
	var rtnStr = "";
	rtnStr += "| recipNm 			::: " + delvObj.recipNm;
	rtnStr += "| recipPhnno 		::: " + delvObj.recipPhnno;
	rtnStr += "| recipZipcode 		::: " + delvObj.recipZipcode;
	rtnStr += "| recipBaseAddr 		::: " + delvObj.recipBaseAddr;
	rtnStr += "| recipDtlAddr 		::: " + delvObj.recipDtlAddr;
	rtnStr += "| delvMemo 			::: " + delvObj.delvMemo;

	let data = {};
	data.ordNo = ordNo;
	data.delvAddrSq = delvAddrSq;
	data.recipNm = delvObj.recipNm;
	data.recipPhnno = delvObj.recipPhnno;
	data.recipZipcode = delvObj.recipZipcode;
	data.recipBaseAddr = delvObj.recipBaseAddr;
	data.recipDtlAddr = delvObj.recipDtlAddr;
	data.delvMemo = delvObj.delvMemo;

	let jsonData = JSON.stringify(data);

	gagajf.ajaxJsonSubmit('/order/delivery/ban', jsonData, function(result) {
		if (!gagajf.isNull(result.banZipcode) && result.banZipcode > 0) {
			mcxDialog.alert('죄송합니다. 해당 지역은 주문/배송이 불가한 지역입니다. 다른 배송지로 수정 해주세요.');
			return false;
		} else {
			// 2021.05.16 비회원구분처리
			let url = '';
			// 변수값 설정
			if (isLogin == true) {
				url = '/mypage/change/delvery/addr';
			} else {
				url = '/noMember/change/delvery/addr';
			}
			
			gagajf.ajaxJsonSubmit(url, jsonData, function (result) {
				$("#recipNm").text(delvObj.recipNm);
				$("#recipPhnno").text(delvObj.recipPhnno);
				$("#recipAddr").text(delvObj.recipBaseAddr + '    ' + delvObj.recipDtlAddr);
				$("#delvMemo").text(delvObj.delvMemo);
			});
		}
	});
}

// 1.19 배송메모설정
var delvMemoSet = function(delvMemoObj) {
	let url = '/mypage/change/delvery/memo';
	let delvMemo = delvMemoObj.delvMemo;
	var rtnStr = "";
	rtnStr += "| delvMemo 			::: " + delvMemo;

	// 변수값 설정
	let data = {};
	data.delvAddrSq = delvAddrSq;
	data.ordNo = ordNo;
	data.delvMemo = delvMemo;
	
	let jsonData = JSON.stringify(data);
	
	gagajf.ajaxJsonSubmit(url, jsonData, function(result) {
	})
	
	$("#delvMemo").text(delvMemo);
}

// 주문상세보기 버튼 클릭 이벤트 처리
var fnGoToOrderDetail = function(param) {
	let ordNo = $(param).attr('ordNo');
	cfnGoToPage(_PAGE_MYPAGE_ORDER_DETAIL + ordNo);
}
</script>

<!-- 2021.05.27 주문완료 로그스크립트 삽입 -->
<script th:inline="javascript">
var orderDetailList 	= [[${orderDetailList}]]; // 주문상세목록
var criteoItems			= [];
var fbqItems			= [];
var enlipleItems		= [];
var totalCnt			= 0;

window._eglqueue = window._eglqueue || [];

/* STAR LOOP: 구매한 모든 상품에 대해 */
for (i=0 ; i<orderDetailList.length ; i++) {
	var goodsCd 		= orderDetailList[i].goodsCd;
	var currPrice 		= orderDetailList[i].currPrice;
	var ordQty 			= orderDetailList[i].ordQty;
	var itemkindNm		= orderDetailList[i].itemkindNm;
	var brandGroupNm	= orderDetailList[i].brandGroupNm;
	var goodsNm			= orderDetailList[i].goodsNm;

	_eglqueue.push(['addVar', 'orderItems', {itemId:goodsCd, price:currPrice, quantity:ordQty}]);
	criteoItems.push({id: goodsCd, price: currPrice+'', quantity: ordQty+''});
	fbqItems.push({id: goodsCd, quantity: ordQty+''});
	enlipleItems.push({productCode: goodsCd, productName: orderDetailList[i].goodsNm, price: orderDetailList[i].listPrice+'', dcPrice: currPrice+'', qty: ordQty+''});
	
	totalCnt += ordQty;
	
	// 코마스 광고 스크립트
	setTimeout( function() {
		cosemConvert([[${orderInfo.ordNo}]], (currPrice * ordQty), goodsCd, ordQty, currPrice, itemkindNm, brandGroupNm + "_" + goodsNm);
	}, 10);
}
/* END LOOP */
// https://ldfront.style24.com/order/complete?ordNo=19856397
window._eglqueue = window._eglqueue || [];

_eglqueue.push(['setVar'	, 'cuid'		, eglqueueCuid]);
_eglqueue.push(['setVar'	, 'orderId'		, [[${orderInfo.ordNo}]]]);
_eglqueue.push(['setVar'	, 'orderPrice'	, [[${realOrdSumAmt}]]]);
_eglqueue.push(['setVar'	, 'userId'		, hCustId]); // optional
_eglqueue.push(['track'		, 'order']);

(function (s, x) {
s = document.createElement('script'); s.type = 'text/javascript';
s.async = true; s.defer = true; s.src = (('https:' == document.location.protocol) ? 'https' : 'http') + '://logger.eigene.io/js/logger.min.js';
x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<!-- //2021.05.27 주문완료 로그스크립트 삽입 -->


<!--네이버페이 전환스크립트를 이용하여 전환값 설정-->
<script th:inline="javascript">
	var _nasa={};
	if (window.wcs) _nasa["cnv"] = wcs.cnv("1", [[${realOrdSumAmt}]]);
</script>
<!--위 스크립트를 통해 설정된 전환값과 본 페이지의 로그를 서버에 전송-->
<script th:inline="javascript">
	if (!wcs_add) var wcs_add = {};
	wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
	if (!_nasa) var _nasa = {};
	if (window.wcs) {
		wcs.inflow("style24.com");
		wcs_do(_nasa); //서버로 로그 전송
	}
</script>

<!-- Criteo 세일즈 태그 -->
<script th:inline="javascript">
	window.criteo_q = window.criteo_q || [];
	var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
	window.criteo_q.push(
		{ event: "setAccount", account: 6762}, // 이 라인은 업데이트하면 안됩니다
		{ event: "setEmail", email: criteoEmail }, // 유저가 로그인이 안되 있는 경우 빈 문자열을 전달
		{ event: "setSiteType", type: deviceType},
		{ event: "trackTransaction", id: [[${orderInfo.ordNo}]], item: criteoItems}
	);
</script>
<!-- END Criteo 세일즈 태그 -->

<!-- 픽셀 -->
<script th:inline="javascript">
	fbq('track', 'Purchase', {
		value: [[${realOrdSumAmt}]],
		currency: 'KRW',
		contents: fbqItems,
		content_type: 'product'
	});
</script>

<!-- Enliple Tracker Start -->
<script type="text/javascript">
	var ENP_VAR = { conversion: { product: [] } };
	
	// 주문한 각 제품들을 배열에 저장
	ENP_VAR.conversion.product.push(enlipleItems);
	
	ENP_VAR.conversion.ordCode= [[${orderInfo.ordNo}]];
	ENP_VAR.conversion.totalPrice = [[${realOrdSumAmt}]];
	ENP_VAR.conversion.totalQty = totalCnt;
	
	(function(a,g,e,n,t){a.enp=a.enp||function(){(a.enp.q=a.enp.q||[]).push(arguments)};n=g.createElement(e);n.async=!0;n.defer=!0;n.src="https://cdn.megadata.co.kr/dist/prod/enp_tracker_self_hosted.min.js";t=g.getElementsByTagName(e)[0];t.parentNode.insertBefore(n,t)})(window,document,"script");
	enp('create', 'conversion', 'is24', { device: 'W' }); // W:웹, M: 모바일, B: 반응형
	enp('send', 'conversion', 'is24');
</script>
<!-- Enliple Tracker End -->
<!-- 카카오 픽셀 스크립트 (주문완료) -->
<script type="text/javascript">
	kakaoPixel('183786066102896').purchase('purchase');
</script>
</th:block>
</body>
</html>