|
|
@@ -1,7 +1,7 @@
|
|
|
<html lang="ko"
|
|
|
xmlns:th="http://www.thymeleaf.org">
|
|
|
<!-- 옵션변경 팝업 -->
|
|
|
-<div class="modal-dialog" role="document">
|
|
|
+<div class="modal-dialog cartOptionModal" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="optModifyLabel">옵션변경</h5>
|
|
|
@@ -39,35 +39,38 @@
|
|
|
<th:block th:each="comp, status : ${cart.cartCompsList}">
|
|
|
<!-- 세트상품 옵션 -->
|
|
|
<th:block th:if="${setType.equals(cart.goodsType)}">
|
|
|
- <div class="opt_select">
|
|
|
+ <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 th:classappend="|color_${color.goodsCd}_${color.optCd1}|" style="display:none;">
|
|
|
- <select id="">
|
|
|
+ <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}" th:selected="${color.cartColorNm != null}"></option>
|
|
|
+ <option th:value="${size.optCd}" th:text="${size.optCd2}"></option>
|
|
|
</th:block>
|
|
|
</th:block>
|
|
|
</select>
|
|
|
</span>
|
|
|
</th:block>
|
|
|
+
|
|
|
<div class="form_field">
|
|
|
- <select id="">
|
|
|
+ <select class="setColorSelect">
|
|
|
+ <option th:data="${comp.goodsCd}" value="aa">TEST</option>
|
|
|
<th:block th:each="color, index : ${comp.cartColorList}">
|
|
|
- <option th:value="${color.optCd1}" rel="icon-temperature" th:text="${color.colorNm}" th:selected="${color.cartColorNm != null}"></option>
|
|
|
+ <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 id="">
|
|
|
+ <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:value="${size.optCd}" th:text="${size.optCd2}" th:selected="${size.cartOptCd != null}"></option>
|
|
|
+ <option th:data="${comp.cartDtlSq}" th:value="${size.optCd}" th:text="${size.optCd2}" th:selected="${size.cartOptCd != null}"></option>
|
|
|
</th:block>
|
|
|
</th:block>
|
|
|
</select>
|
|
|
@@ -83,23 +86,24 @@
|
|
|
<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>
|
|
|
+ <span class="color" th:text="${color.cartColorNm}"></span>
|
|
|
</th:block>
|
|
|
</th:block>
|
|
|
</div>
|
|
|
<ul>
|
|
|
- <li th:each="color, index : ${comp.cartColorList}">
|
|
|
- <a href="" th:classappend="${color.cartColorNm != null} ? 'on'">
|
|
|
+ <li th:each="color, index : ${comp.cartColorList}" class="selfGoodsColor">
|
|
|
+ <a href="" 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">
|
|
|
+ <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}">
|
|
|
@@ -110,10 +114,6 @@
|
|
|
</th:block>
|
|
|
</th:block>
|
|
|
</th:block>
|
|
|
- <!--<div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize2" value="" disabled>
|
|
|
- <label for="rdi-optsize2"><span>95</span></label>
|
|
|
- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</th:block>
|
|
|
@@ -140,7 +140,8 @@
|
|
|
</div>
|
|
|
<div class="number_count">
|
|
|
<span class="minus"><span class="sr-only">감소</span></span>
|
|
|
- <input type="text" name="" maxlength="3" style='ime-mode:disabled' th:value="${cart.goodsQty}" />
|
|
|
+ <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>
|
|
|
@@ -152,135 +153,94 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!--<th:block th:if="${cart.selfGoodsYn.equals('N')}">
|
|
|
- <div class="modal-body">
|
|
|
- <div class="pop_cont">
|
|
|
- <div class="prod_info">
|
|
|
- <div class="prod_preview">
|
|
|
- <div class="area_pic">
|
|
|
- <ul class="pic_list">
|
|
|
- <li><span class="thumb"><img src="/images/pc/thumb/tmp_pdDetail1.jpg" alt=""></span></li>
|
|
|
- <li><span class="thumb"><img src="/images/pc/thumb/tmp_pdDetail2.jpg" alt=""></span></li>
|
|
|
- <li><span class="thumb"><img src="/images/pc/thumb/tmp_pdDetail3.jpg" alt=""></span></li>
|
|
|
- <li><span class="thumb"><img src="/images/pc/thumb/tmp_pdDetail4.jpg" alt=""></span></li>
|
|
|
- <li><span class="thumb"><img src="/images/pc/thumb/tmp_pdDetail5.jpg" alt=""></span></li>
|
|
|
- <li><span class="thumb"><img src="/images/pc/thumb/tmp_pdDetail6.jpg" alt=""></span></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="area_order">
|
|
|
- <div class="opt_color">
|
|
|
- <div class="opt_header">
|
|
|
- <span class="title">컬러</span>
|
|
|
- <span class="color">그레이</span>
|
|
|
- </div>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <a href="" class="on">
|
|
|
- <img src="/images/pc/thumb/tmp_cartColor1.jpg" alt="그레이">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="">
|
|
|
- <img src="/images/pc/thumb/tmp_cartColor1.jpg" alt="베이지">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="">
|
|
|
- <img src="/images/pc/thumb/tmp_cartColor1.jpg" alt="그린">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="">
|
|
|
- <img src="/images/pc/thumb/tmp_cartColor1.jpg" alt="핑크">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="">
|
|
|
- <img src="/images/pc/thumb/tmp_cartColor1.jpg" alt="민트">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="">
|
|
|
- <img src="/images/pc/thumb/tmp_cartColor1.jpg" alt="블랙">
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="opt_size">
|
|
|
- <div class="opt_header">
|
|
|
- <span class="title">사이즈</span>
|
|
|
- </div>
|
|
|
- <div class="form_field">
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize1" value="" checked="">
|
|
|
- <label for="rdi-optsize1"><span>90</span></label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize2" value="" disabled>
|
|
|
- <label for="rdi-optsize2"><span>95</span></label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize3" value="">
|
|
|
- <label for="rdi-optsize3"><span>100</span></label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize4" value="">
|
|
|
- <label for="rdi-optsize4"><span>105</span></label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize5" value="">
|
|
|
- <label for="rdi-optsize5"><span>110</span></label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize6" value="">
|
|
|
- <label for="rdi-optsize6"><span>115</span></label>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input type="radio" name="rdi-optsize" id="rdi-optsize7" value="">
|
|
|
- <label for="rdi-optsize7"><span>free</span></label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="opt_select">
|
|
|
- <div class="opt_header">
|
|
|
- <span class="title">옵션선택</span>
|
|
|
- </div>
|
|
|
- <div class="form_field">
|
|
|
- <select id="">
|
|
|
- <option value="" rel="icon-temperature">카키/95</option>
|
|
|
- <option value="">카키/100</option>
|
|
|
- <option value="">카키/105</option>
|
|
|
- <option value="">카키/110</option>
|
|
|
- <option value="">옐로우/95</option>
|
|
|
- <option value="">옐로우/100</option>
|
|
|
- <option value="">옐로우/105</option>
|
|
|
- <option value="">옐로우/110</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <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="" maxlength="3" style='ime-mode:disabled' value="1" />
|
|
|
- <span class="plus"><span class="sr-only">추가</span></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn_group_block">
|
|
|
- <button class="btn btn_dark btn_block" id=""><span>옵션변경</span></button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </th:block>-->
|
|
|
+ </div>
|
|
|
+<!-- //옵션변경 팝업 -->
|
|
|
|
|
|
|
|
|
- </div>
|
|
|
+<script th:inline="javascript">
|
|
|
+ $(document).ready(function() {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ // 세트상품 컬러 변경시
|
|
|
+ $(".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") {
|
|
|
+ alert("자사 일반");
|
|
|
+ } else {
|
|
|
+ alert("입점업체");
|
|
|
+ }
|
|
|
+
|
|
|
+ $.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();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ $(".closeCartOptionModal").on("click", function() {
|
|
|
+ $(".cartOptionModal").html("");
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
</div>
|
|
|
-<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>
|
|
|
-<!-- //옵션변경 팝업 -->
|
|
|
+<a href="#close-modal" rel="modal:close" class="close-modal closeCartOptionModal">Close</a>
|
|
|
</html>
|