style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
							<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!-- 옵션변경 팝업 -->
<div id="cartOptionModal" class="modal-dialog cartOptionModal" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="optModifyLabel">옵션변경</h5>
			<div class="prod_title">
				<span class="name" th:text="${cart.goodsNm}"></span>
			</div>
		</div>
		<div class="modal-body">
			<div class="pop_cont">
				<div class="area_pic">
					<ul class="pic_list">
						<th:block th:if="${setType.equals(cart.goodsType) or cart.selfGoodsYn.equals('N')}">
							<li th:each="img, index : ${cart.cartImgList}">
								<span class="thumb">
									<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=180'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${img.sysImgNm}" alt="" />
								</span>
							</li>
						</th:block>
						<th:block th:if="${!setType.equals(cart.goodsType) and cart.selfGoodsYn.equals('Y')}">
							<th:block th:each="comp, status : ${cart.cartCompsList}">
								<th:block th:each="color, index : ${comp.cartColorList}">
									<th:block th:if="${color.cartOptCd1 != null and color.cartOptCd1.equals(color.optCd1)}">
										<li th:each="img, index : ${color.cartImgList}" th:if="${img.colorCd == color.cartOptCd1}">
											<span class="thumb">
												<img th:src="${cart.imgPath + '/' + img.sysImgNm} + '?RS=180'" src="/" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${img.sysImgNm}" alt="" />
											</span>
										</li>
									</th:block>
								</th:block>
							</th:block>
						</th:block>
					</ul>
				</div>
				<div class="area_order">
					<th:block th:each="comp, status : ${cart.cartCompsList}">
						<!-- 세트상품 옵션 -->
						<th:block th:if="${setType.equals(cart.goodsType)}">
							<span class="hiddenData">
								<input type="hidden" class="cartDtlSq" th:value="${comp.cartDtlSq}" />
								<input type="hidden" class="itemCd" th:value="${comp.goodsCd}" />
								<input type="hidden" class="optCd" th:classappend="|option_${comp.goodsCd}|" th:value="${comp.optCd}"/>
								<input type="hidden" class="optCd1" th:classappend="|option1_${comp.goodsCd}|" th:value="${comp.optCd1}"/>
								<input type="hidden" class="optCd2" th:classappend="|option2_${comp.goodsCd}|" th:value="${comp.optCd2}"/>
							</span>

							<div class="opt_select">
								<div class="opt_header">
									<span class="title" th:text="${comp.goodsNm}"></span>
								</div>
								<div class="opt_header">
									<span class="title">옵션1</span>
									<span class="text" th:classappend="|chooseColorNm_${comp.goodsCd}|" th:text="${comp.colorNm}"></span>
								</div>
								<form class="form_wrap">
									<div class="form_field">
										<div class="select_custom item_opt1 colorList">
											<div class="combo">
												<div class="select" th:text="${comp.colorNm}"></div>
												<ul class="list" th:data="${comp.goodsCd}">
													<th:block th:each="color, index : ${comp.cartColorList}">
														<li th:classappend="${color.cartColorNm != null} ? 'selected'" th:data="${color.optCd1}" th:text="${color.colorNm}" th:aria-disabled="${color.soldoutYn.equals('Y') ? true : false}"></li>
													</th:block>
												</ul>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="opt_select">
								<div class="opt_header">
									<span class="title">옵션2</span>
									<span class="text" th:classappend="|chooseSizeNm_${comp.goodsCd}|" th:text="${comp.optCd2}"></span>
								</div>
								<form class="form_wrap">
									<div class="form_field">
										<th:block th:each="color, index : ${comp.cartColorList}">
											<div class="select_custom item_opt2 sizeList" th:classappend="|${comp.goodsCd}_${color.optCd1} sizeList${comp.goodsCd}|" th:style="${color.cartColorNm != null ? 'display:block' : 'display:none'}">
												<div class="combo">
													<div class="select" th:classappend="|size_${comp.goodsCd}_size_nm|" th:text="${comp.optCd2}" th:data="${color.goodsCd}"></div>
													<ul class="list setSizeSelect" th:classappend="|size_${comp.goodsCd}|" th:data="${comp.goodsCd}">
														<th:block th:each="size, i : ${color.cartSizeList}" th:if="${color.optCd1.equals(size.optCd1)}">
															<li th:classappend="${size.cartOptCd != null} ? selected" th:optCd="${size.optCd}" th:value="${size.optCd}" th:text="${size.optCd2}" th:aria-disabled="${color.soldoutYn.equals('Y') or size.soldoutYn.equals('Y') ? true : false}"></li>
														</th:block>
													</ul>
												</div>
											</div>
										</th:block>
									</div>
								</form>
							</div>
						</th:block>

						<!-- 자사 일반 상품 옵션 -->
						<th:block th:if="${!setType.equals(cart.goodsType) and 'Y'.equals(cart.selfGoodsYn)}">
							<div class="opt_color">
								<div class="opt_header">
									<span class="title">컬러</span>
									<th:block th:each="color, index : ${comp.cartColorList}">
										<th:block th:if="${color.cartColorNm != null}">
											<span class="color" th:text="${color.cartColorNm}"></span>
										</th:block>
									</th:block>
								</div>
								<ul>
									<li th:each="color, index : ${comp.cartColorList}" class="selfGoodsColor">
										<a href="javascript:void(0);" th:cartDtlSq="${color.cartDtlSq}" th:classappend="${color.cartColorNm != null} ? 'on'" class="selfGoodsColorSelect" th:data="${color.optCd1}">
											<img th:src="${cart.imgPath + '/' + color.sysImgNm} + '?RS=70'" src="#" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" th:alt="${color.colorNm}" alt="" />
										</a>
									</li>
								</ul>
							</div>
							<div class="opt_size">
								<div class="opt_header">
									<span class="title">사이즈</span>
								</div>
								<div class="form_field selfGoodsSize">
									<th:block th:each="color, index : ${comp.cartColorList}">
										<th:block th:if="${color.cartColorNm != null}">
											<th:block th:each="size, index : ${color.cartSizeList}">
												<div>
													<input type="radio" name="rdi-optsize" th:id="|${'rdi-optsize' + size.goodsCd + '-' + size.optCd}|" th:value="${size.optCd}" th:checked="${size.cartOptCd != null}" th:disabled="${size.soldoutYn == 'Y' or cart.goodsQty > size.currStockQty}">
													<label th:for="|${'rdi-optsize' + size.goodsCd + '-' + size.optCd}|"><span th:text="${size.optCd2}"></span></label>
												</div>
											</th:block>
										</th:block>
									</th:block>
								</div>
							</div>
						</th:block>

						<!-- 입점업체 -->
						<th:block th:if="${!setType.equals(cart.goodsType) and 'N'.equals(cart.selfGoodsYn)}">
							<span class="hiddenData">
								<input type="hidden" class="cartDtlSq" th:value="${comp.cartDtlSq}" />
								<input type="hidden" class="itemCd" th:value="${comp.goodsCd}" />
								<input type="hidden" class="optCd" th:classappend="|option_${comp.goodsCd}|" th:value="${comp.optCd}"/>
								<input type="hidden" class="optCd1" th:classappend="|option1_${comp.goodsCd}|" th:value="${comp.optCd1}"/>
								<input type="hidden" class="optCd2" th:classappend="|option2_${comp.goodsCd}|" th:value="${comp.optCd2}"/>
							</span>

							<div class="opt_select">
								<div class="opt_header">
									<span class="title">옵션1</span>
									<span class="text" th:classappend="|chooseColorNm_${comp.goodsCd}|" th:text="${comp.colorNm}"></span>
								</div>
								<form class="form_wrap">
									<div class="form_field">
										<div class="select_custom item_opt1 colorList">
											<div class="combo">
												<div class="select" th:text="${comp.colorNm}"></div>
												<ul class="list" th:data="${comp.goodsCd}">
													<th:block th:each="color, index : ${comp.cartColorList}">
														<li th:classappend="${color.cartColorNm != null} ? 'selected'" th:data="${color.optCd1}" th:text="${color.colorNm}" th:aria-disabled="${color.soldoutYn.equals('Y') ? true : false}"></li>
													</th:block>
												</ul>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="opt_select">
								<div class="opt_header">
									<span class="title">옵션2</span>
									<span class="text" th:classappend="|chooseSizeNm_${comp.goodsCd}|" th:text="${comp.optCd2}"></span>
								</div>
								<form class="form_wrap">
									<div class="form_field">
										<th:block th:each="color, index : ${comp.cartColorList}">
											<div class="select_custom item_opt2 sizeList" th:classappend="|${comp.goodsCd}_${color.optCd1} sizeList${comp.goodsCd}|" th:style="${color.cartColorNm != null ? 'display:block' : 'display:none'}">
												<div class="combo">
													<div class="select" th:classappend="|size_${comp.goodsCd}_size_nm|" th:text="${comp.optCd2}" th:data="${color.goodsCd}"></div>
													<ul class="list setSizeSelect" th:classappend="|size_${comp.goodsCd}|" th:data="${comp.goodsCd}">
														<th:block th:each="size, i : ${color.cartSizeList}" th:if="${color.optCd1.equals(size.optCd1)}">
															<li th:classappend="${size.cartOptCd != null} ? selected" th:optCd="${size.optCd}" th:value="${size.optCd}" th:text="${size.optCd2}" th:aria-disabled="${color.soldoutYn.equals('Y') or size.soldoutYn.equals('Y') ? true : false}"></li>
														</th:block>
													</ul>
												</div>
											</div>
										</th:block>
									</div>
								</form>
							</div>
						</th:block>
					</th:block>
					<div class="opt_count">
						<div class="opt_header">
							<span class="title">수량</span>
						</div>
						<div class="number_count">
							<span class="minus"><em class="sr-only">감소</em></span>
							<input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="${cart.goodsQty}" readonly/>
							<span class="plus"><em class="sr-only">추가</em></span>
						</div>
					</div>
					<div class="btn_group_block">
						<button class="btn btn_dark btn_block" th:onclick="|fnChangeCartOption(${cart.cartSq})|"><span>옵션변경</span></button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script th:inline="javascript">
		$(document).ready(function() {
			$(".select_custom").each(function() {
				new sCombo($(this));
			});
		});

		// 세트상품, 입점업체 상품 컬러 변경시
		$("#cartOptionModal .colorList > .combo > .list li").on("click", function(e) {
			let goodsCd = $(this).parent().attr("data");
			let optCd1 = $(this).attr("data");
			let firstSize = "";
			if(optCd1 != $(".option1_" + goodsCd).val()) {
				let firstOptCd = $("#cartOptionModal ." + goodsCd + "_" + optCd1 + " li:first").attr("optcd");
				let firstOptCd2 = $("#cartOptionModal ." + goodsCd + "_" + optCd1 + " li:first").text();

				$("#cartOptionModal .chooseColorNm_" + goodsCd).text($(this).text());
				$("#cartOptionModal .option_" + goodsCd).val(firstOptCd);
				$("#cartOptionModal .option1_" + goodsCd).val(optCd1);
				$("#cartOptionModal .option2_" + goodsCd).val(firstOptCd2);

				$("#cartOptionModal .sizeList" + goodsCd).hide();
				$("#cartOptionModal ." + goodsCd + "_" + optCd1).show();
				$("#cartOptionModal ." + goodsCd + "_" + optCd1 + " .select").text(firstOptCd2);
				$("#cartOptionModal .chooseSizeNm_" + goodsCd).text(firstOptCd2);
			}
		});

		// 세트상품, 입점업체 상품 사이즈 변경시
		$(".sizeList > .combo > .list li").on("click", function() {
			$(this).parent().parent().parent().parent().parent().parent().find(".opt_header .text").text($(this).text());
			$("#cartOptionModal .option_" + $(this).parent().attr("data")).val($(this).attr("optcd"));
			$("#cartOptionModal .option2_" + $(this).parent().attr("data")).val($(this).text());
		});

		/* 옵션변경 > 수량조절 */
		//수량1개 이하 감소버튼 비활성화
		var valItemCount = $('.optModify_pop .number_count input').val();
		if ( valItemCount == 1 ) {
			$('.optModify_pop .number_count .minus').addClass('min_val');
		}

		// 자사 일반 상품 컬러 선택시
		$(".selfGoodsColorSelect").on("click", function(e) {
			let sizeHtml = "";
			let imgHtml = "";
			let cart = [[${cart}]];
			let color =  [[${cart.cartCompsList[0].cartColorList}]];
			let optCd1 = $(this).attr("data");

			for(let i = 0 ; i < color.length ; i++) {
				let size = color[i].cartSizeList;
				for(let j = 0 ; j < size.length ; j++) {
					if(optCd1 == size[j].optCd1) {
						sizeHtml += "<div>";
						sizeHtml += "<input type='radio' name='rdi-optsize' id='" + size[j].goodsCd + "-" + size[j].optCd + "' value='" + size[j].optCd + "' ";
						if(size[j].soldoutYn == "Y" || cart.goodsQty > size[j].currStockQty) {
							sizeHtml += "disabled = 'disabled'";
						}
						sizeHtml += " />\n";
						sizeHtml += "<label for='" + size[j].goodsCd + "-" + size[j].optCd + "'><span>" + size[j].optCd2 + "</span></label>\n"
						sizeHtml += "</div>\n";
					}
				}

				if(optCd1 == color[i].optCd1) {
					for (let j = 0; j < color[i].cartImgList.length; j++) {
						let img = color[i].cartImgList[j];
						if(optCd1 == img.colorCd) {
							imgHtml += "<li>\n<span class='thumb'>\n";
							imgHtml += "<img src='" + cart.imgPath + "/" + img.sysImgNm + "' onerror='this.src='" + [[${@environment.getProperty('domain.uximage')}]] + "/images/pc/thumb/bg_item_none.png' alt='" + img.sysImgNm + "' />\n";
							imgHtml += "</span>\n</li>\n";
						}
					}
				}
			}

			$(".cartOptionModal .pic_list").html(imgHtml);
			$(".cartOptionModal .selfGoodsSize").html(sizeHtml);
		});

		function fnChangeCartOption(cartSq) {
			let cart = [[${cart}]];
			var cartDtlSqArr = [], itemCds = [], optCds = [];
			var data;

			if(cart.goodsType == "G056_S") {
				$("#cartOptionModal .cartDtlSq").each(function() {
					optCds.push($(this).parent().find(".optCd").val());
					cartDtlSqArr.push($(this).parent().find(".cartDtlSq").val());
					itemCds.push($(this).parent().find(".itemCd").val());
				});

				data = {
					  cartSq : cart.cartSq
					, goodsCd : cart.goodsCd
					, goodsType : cart.goodsType
					, cartDtlSqArr : cartDtlSqArr
					, itemCds : itemCds
					, optCds : optCds
					, goodsQty : $("input[name=goodsQty]").val()
				}
			} else if(cart.goodsType != "G056_S" && cart.selfGoodsYn == "Y") {
				if($(".selfGoodsSize").find("input[name=rdi-optsize]:checked").length < 1) {
					mcxDialog.alert("옵션을 선택해 주세요.");
					return false;
				}

				optCds.push($(".selfGoodsSize").find("input[name=rdi-optsize]:checked").val());
				itemCds.push(cart.goodsCd);
				$(".selfGoodsColorSelect").each(function() {
					if($(this).attr("cartDtlSq") > 0) {
						cartDtlSqArr.push($(this).attr("cartDtlSq"));
					}
				});

				data = {
					  cartSq : cart.cartSq
					, goodsCd : cart.goodsCd
					, goodsType : cart.goodsType
					, cartDtlSqArr : cartDtlSqArr
					, itemCds : itemCds
					, optCds : optCds
					, goodsQty : $("input[name=goodsQty]").val()
				}
			} else {
				$("#cartOptionModal .cartDtlSq").each(function() {
					optCds.push($(this).parent().find(".optCd").val());
					cartDtlSqArr.push($(this).parent().find(".cartDtlSq").val());
					itemCds.push($(this).parent().find(".itemCd").val());
				});

				data = {
					cartSq : cart.cartSq
					, goodsCd : cart.goodsCd
					, goodsType : cart.goodsType
					, cartDtlSqArr : cartDtlSqArr
					, itemCds : itemCds
					, optCds : optCds
					, goodsQty : $("input[name=goodsQty]").val()
				}
			}

			$.ajax( {
				type: "POST",
				url : '/cart/change/option',
				contentType: 'application/json',
				dataType : 'json',
				data : JSON.stringify(data),
				error : function(e) {
					mcxDialog.alert(e.message);
				},
				success : function(result) {
					mcxDialog.alert(result.message);
					$(".closeCartOptionModal").trigger("click");
					if(result.status == "SUCCESS") {
						let data = {shotDelvUseYn : $("input[name=shotDelvUseYn]:checked").val()};
						getCartList(data);
					}
				}
			});
		}
	</script>
	<a href="#close-modal" rel="modal:close" id="optModifyPop_close" class="close-modal closeCartOptionModal">Close</a>
</div>
<!-- //옵션변경 팝업 -->
</html>