style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
							<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!-- 옵션변경 팝업 -->
<div class="modal-dialog cartOptionModal" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="optModifyLabel">옵션변경</h5>
			<div class="prod_title">
				<span class="brand" th:text="|${cart.brandEnm + ' ' + cart.brandKnm}|"></span>
				<span class="name" th:text="${cart.goodsNm}"></span>
			</div>
		</div>

		<div class="modal-body">
			<div class="pop_cont">
				<div class="prod_info">
					<div class="prod_preview">
						<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}" src="#" 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}">
													<span class="thumb"><img th:src="${cart.imgPath + '/' + img.sysImgNm}" src="#" 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)}">
									<div class="opt_select setOption">
										<div class="opt_header">
											<span class="title" th:text="${comp.goodsNm}"></span>
										</div>

										<!-- 컬러 변경시 만들어줄 size option -->
										<th:block th:each="color, index : ${comp.cartColorList}">
											<span style="display:none;">
												<select th:classappend="|color_${color.goodsCd}_${color.optCd1}|">
													<th:block th:each="size, i : ${color.cartSizeList}">
														<th:block th:if="${color.optCd1.equals(size.optCd1)}">
															<option th:value="${size.optCd}" th:text="${size.optCd2}"></option>
														</th:block>
													</th:block>
												</select>
											</span>
										</th:block>

										<div class="form_field">
											<select class="setColorSelect">
												<th:block th:each="color, index : ${comp.cartColorList}">
													<option th:data="${comp.goodsCd}" th:value="${color.optCd1}" rel="icon-temperature" th:text="${color.colorNm}" th:selected="${color.cartColorNm != null}"></option>
												</th:block>
											</select>
										</div>
										<div class="form_field">
											<th:block th:each="color, index : ${comp.cartColorList}">
											<select th:data="${color.goodsCd}" th:class="|size_${comp.goodsCd} setSizeSelect|">
												<th:block th:each="size, i : ${color.cartSizeList}">
													<th:block th:if="${color.optCd1.equals(size.optCd1)}">
														<option th:data="${comp.cartDtlSq}" th:value="${size.optCd}" th:text="${size.optCd2}" th:selected="${size.cartOptCd != null}"></option>
													</th:block>
												</th:block>
											</select>
											</th:block>
										</div>
									</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="" th:cartDtlSq="${color.cartDtlSq}" th:classappend="${color.cartColorNm != null} ? 'on'" class="selfGoodsColorSelect" th:data="${color.optCd1}">
													<img th:src="${cart.imgPath + '/' + color.sysImgNm}" src="#" 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 !'Y'.equals(cart.selfGoodsYn)}">
									<div class="opt_select">
										<div class="opt_header">
											<span class="title">옵션선택</span>
										</div>
										<div class="form_field">
											<select class="selfGoodsColor">
												<th:block th:each="color, index : ${comp.cartColorList}">
												<option th:data="${color.cartDtlSq}" th:value="${color.optCd}" th:text="${color.optCd1 + '/' + color.optCd2}" th:selected="${color.cartOptCd != null}"></option>
												</th:block>
											</select>
										</div>
									</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"><span class="sr-only">감소</span></span>
									<input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="${cart.goodsQty}" />
									<!-- <input type="text" name="goodsQty" maxlength="3" style='ime-mode:disabled' th:value="2" /> -->
									<span class="plus"><span class="sr-only">추가</span></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>
		</div>
	</div>
<!-- //옵션변경 팝업 -->


<script th:inline="javascript">
	// 세트상품 컬러 변경시
	$(".setColorSelect").on("change", function(e) {
		let goodsCd = $(this).find("option:checked").attr("data");
		$(".setOption .size_" + goodsCd).html("");
		$(".setOption .size_" + goodsCd).html($(".color_" + goodsCd + "_" + $(this).val()).html());
	});

	// 자사 일반 상품 컬러 선택시
	$(".selfGoodsColorSelect").on("click", function(e) {
		let html = "";
		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) {
					html += "<div>";
					html += "<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) {
						html += "disabled = 'disabled'";
					}
					html += " />\n";
					html += "<label for='" + size[j].goodsCd + "-" + size[j].optCd + "'><span>" + size[j].optCd2 + "</span></label>\n"
					html += "</div>\n";
				}
			}
		}

		$(".selfGoodsSize").html(html);
	});

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

		if(cart.goodsType == "G056_S") {
			$(".setSizeSelect").each(function() {
				optCds.push($(this).val());
				itemCds.push($(this).attr("data"));
				cartDtlSqArr.push($(this).find("option:checked").attr("data"));
			});

			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") {
			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 {
			optCds.push($(".selfGoodsColor").val());
			itemCds.push(cart.goodsCd);
			$(".selfGoodsColor option").each(function() {
				if($(this).attr("data") > 0) {
					cartDtlSqArr.push($(this).attr("data"));
				}
			});

			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),
			success : function(result) {
				alert(result.message);
				$(".closeCartOptionModal").trigger("click");
				getCartList();
			}
		});
	}
</script>

</div>
<a href="#close-modal" rel="modal:close" class="close-modal closeCartOptionModal">Close</a>
</html>