이태영 - 20210208 장바구니 화면 생성 중

src/main/java/com/style24/front/biz/service/TsfCartService.java

@@ -321,7 +321,6 @@ public class TsfCartService {
 
 		// 자사 / 입점업체 리스트 분리
 		order = getCartDelvGoodsCntList(cartGoodsList);
-		order.setCartGoodsList(cartGoodsList);
 
 		// 총계 금액 계산
 		setCartListTotAmtInfo(cartGoodsList, order);

src/main/java/com/style24/front/biz/web/TsfCartController.java

@@ -1,8 +1,10 @@
 package com.style24.front.biz.web;
 
 import java.text.SimpleDateFormat;
+import java.util.ArrayList;
 import java.util.Collection;
 import java.util.Date;
+import java.util.List;
 
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.env.Environment;
@@ -121,7 +123,6 @@ public class TsfCartController extends TsfBaseController {
 
 		model.addAttribute("param", param);
 		model.addAttribute("order", order);
-		model.addAttribute("cartGoodsList", order.getCartGoodsList());
 		model.addAttribute("wmsCartList", order.getWmsCartList());
 		model.addAttribute("delvCartList", order.getDelvCartList());
 		model.addAttribute("IMG_PATH", env.getProperty("upload.goods.view"));

src/main/java/com/style24/persistence/mybatis/shop/TsfCart.xml

@@ -261,7 +261,7 @@
 					 ON     TAG.GOODS_CD = C.GOODS_CD
 					 WHERE  TAG.DEL_YN = 'N'
 					<if test="cartSqArr != null and cartSqArr.length > 0">
-					AND     C.CART_SQ IN
+					 AND    C.CART_SQ IN
 						<foreach collection="cartSqArr" item="item" index="index"  open="(" close=")" separator=",">
 								#{item}
 						</foreach>

src/main/webapp/WEB-INF/views/web/cart/cartListAjaxFormWeb.html

@@ -53,7 +53,15 @@
                     <tbody>
                     <th:block th:each="cart, status : ${wmsCartList}">
                     <tr>
-                        <td>
+                        <input type="hidden" name="applyQtySectionYn" th:value="${cart.applyQtySectionYn}" />
+                        <input type="hidden" name="applyAmtSectionYn" th:value="${cart.applyAmtSectionYn}" />
+                        <input type="hidden" name="qtyTmtbSq" th:value="${cart.qtyTmtbSq}" />
+                        <input type="hidden" name="qtyTmtbNm" th:value="${cart.qtyTmtbNm}" />
+                        <input type="hidden" name="amtTmtbSq" th:value="${cart.amtTmtbSq}" />
+                        <input type="hidden" name="amtTmtbNm" th:value="${cart.amtTmtbNm}" />
+                        <input type="hidden" name="currPrice" th:value="${cart.currPrice}" />
+
+                        <td style="border-left:none;">
                             <!-- 주문가능 상품 -->
                             <div class="info_item" th:classappend="${cart.soldoutYn.equals('Y')} ? unable"> <!-- 주문불가시 class="unable" 추가 / 인풋, 버튼 disable 처리 -->
                                 <div class="form_box">
@@ -82,7 +90,7 @@
                                         <span class="count">수량:<em th:text="${cart.itemQtyArr[index.index]} * ${cart.goodsQty}"></em>개</span>
                                     </p>
                                     <p class="od_modify">
-                                        <button type="button"><span>옵션/수량변경</span></button>
+                                        <button type="button" class="btn_opt_pop"><span>옵션/수량변경</span></button>
                                     </p>
                                     <!-- 다다익선 적용 -->
                                     <div class="od_moresale" th:if="${cart.applyQtySectionYn == 'Y' or cart.applyAmtSectionYn == 'Y'}">
@@ -103,8 +111,8 @@
                                         </a>
                                         <div class="li_moresale">
                                             <ul>
-                                                <li th:if="${cart.applyQtySectionYn == 'N'}" th:text="${cart.qtyTmtbNm}"><a href="">대상 상품 보기</a></li>
-                                                <li th:if="${cart.applyAmtSectionYn == 'N'}" th:text="${cart.amtTmtbNm}"><a href="">대상 상품 보기</a></li>
+                                                <li th:if="${cart.applyQtySectionYn == 'N'}" th:inline="text">[[${cart.qtyTmtbNm}]]<a href=''>대상 상품 보기</a></li>
+                                                <li th:if="${cart.applyAmtSectionYn == 'N'}" th:inline="text">[[${cart.amtTmtbNm}]]<a href=''>대상 상품 보기</a></li>
                                             </ul>
                                         </div>
                                     </div>
@@ -172,7 +180,14 @@
                     <tbody>
                     <th:block th:each="cart, status : ${delvCartList}">
                     <tr>
-                        <td>
+                        <input type="hidden" name="applyQtySectionYn" th:value="${cart.applyQtySectionYn}" />
+                        <input type="hidden" name="applyAmtSectionYn" th:value="${cart.applyAmtSectionYn}" />
+                        <input type="hidden" name="qtyTmtbSq" th:value="${cart.qtyTmtbSq}" />
+                        <input type="hidden" name="qtyTmtbNm" th:value="${cart.qtyTmtbNm}" />
+                        <input type="hidden" name="amtTmtbSq" th:value="${cart.amtTmtbSq}" />
+                        <input type="hidden" name="amtTmtbNm" th:value="${cart.amtTmtbNm}" />
+                        <input type="hidden" name="currPrice" th:value="${cart.currPrice}" />
+                        <td style="border-left:none;">
                             <div class="info_item">
                                 <div class="form_box">
                                     <p class="form_field">
@@ -199,7 +214,7 @@
                                         <span class="count">수량:<em th:text="${cart.itemQtyArr[index.index]} * ${cart.goodsQty}"></em>개</span>
                                     </p>
                                     <p class="od_modify">
-                                        <button type="button" id="btn_opt_pop"><span>옵션/수량변경</span></button>
+                                        <button type="button" class="btn_opt_pop"><span>옵션/수량변경</span></button>
                                     </p>
                                     <!-- 다다익선 적용 -->
                                     <div class="od_moresale" th:if="${cart.applyQtySectionYn == 'Y' or cart.applyAmtSectionYn == 'Y'}">
@@ -351,58 +366,7 @@
         </div>
     </div>
     <div class="area_saleitem">
-        <h4>다다익선 할인 대상이 있습니다.</h4>
-        <div class="more_sale">
-            <div class="item_gd">
-                <figure>
-                    <a href="">
-                        <span class="thumb"><img src="/images/pc/thumb/tmp_odSide2.jpg" alt=""></span>
-                    </a>
-                    <figcaption>
-                        <a href="">
-                            <div class="brand">CURLYSUE 컬리수</div>
-                            <div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51 [겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
-                            <div class="price">
-                                <del>7,000,000</del>
-                                <span class="selling_price">1,000,000</span>
-                                <span class="discount">30%</span>
-                            </div>
-                        </a>
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="item_gd">
-                <figure>
-                    <a href="">
-                        <span class="thumb"><img src="/images/pc/thumb/tmp_odSide2.jpg" alt=""></span>
-                    </a>
-                    <figcaption>
-                        <a href="">
-                            <div class="brand">CURLYSUE 컬리수</div>
-                            <div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51 [겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
-                            <div class="price">
-                                <span class="selling_price">1,000,000</span>
-                            </div>
-                        </a>
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="txt">
-                <a href="">
-                    <i class="ico ico_saletag"></i>
-                    <span>TBJ 브랜드 구매시 30,000원 할인</span>
-                </a>
-            </div>
-        </div>
-        <div class="more_sale">
-            <div class="txt">
-                <a href="">
-                    <i class="ico ico_saletag"></i>
-                    <span>300,000이상 구매시 30% 할인</span>
-                    <span>500,000이상 구매시 추가 10% 할인</span>
-                </a>
-            </div>
-        </div>
+
     </div>
 </div>
 <div class="clear"></div>
@@ -412,7 +376,17 @@
 <script th:inline="javascript">
     let sumRealPayAmt = [[${order.sumRealPayAmt}]];
     let totDcAmt = [[${order.totDcAmt}]];
-    let cartGoodsList = [[${order.cartGoodsList}]];
+
+    function NotApplyTmtbCartList() {
+        let tmtbSq = 0;
+        let tmtbNm = "";
+        let goodsList = {
+            brandNm : "",
+            goodsNm : "",
+            currPrice : 0,
+            imgPath : ""
+        }
+    }
 
     $(document).ready(function() {
         $(".area_salecoupon .coupon_box").hide();
@@ -421,60 +395,147 @@
         // 다다익선 할인 대상(미적용) 리스트
         notApplyTmtbAreaList();
 
-
         /*$("#sumRealPayAmt").text(Number(sumRealPayAmt).toLocaleString());
         $("#totDcAmt").text(Number(totDcAmt).toLocaleString());*/
 
-        //$("#cartListForm").submit();
-       /* $.ajax( {
-            type: "POST",
-            url : '/cart/goods/list',
-            dataType : 'html',
-            success : function(result) {
-                if (result != null) {
-                    $("#cartAjaxList").html(result);
-                }
-            }
-        });*/
     });
 
     function notApplyTmtbAreaList() {
-        let NotApplyQtyTmtbList = {tmtbSq : 0, tmtbNm : "", goodsList : new Array()};
-        let NotApplyAmtTmtbList = {tmtbSq : 0, tmtbNm : ""};
+        let notApplyQtyTmtbList = new Array();
+        let notApplyAmtTmtbList = new Array();
 
-        for(let i = 0 ; i < cartGoodsList.length ; i++) {
-            let cart = cartGoodsList[i];
-            let tmtbInfo = new Object;
-            let chk = false;
-            if(cart.applyQtySectionYn == "N") {     // 미적용된 다다익선
-                for (let j = 0; j < notApplyTmtbList.length; j++) {
-                    if(cart.qtyTmtbSq == notApplyTmtbList[j].tmtbSq) {
-                        chk = true;
-                        tmtbInfo = notApplyTmtbList[j];
-                    }
+        // 수량 다다익선 조회
+        $("#cartListForm input[name=qtyTmtbSq]").each(function (index) {
+            if($(this).val() != "0" && $(this).parent().find("input[name=applyQtySectionYn]").val() != "Y") {
+                let obj = new Object();
+                obj.tmtbSq = $(this).val();
+                obj.tmtbNm = $(this).parent().find("input[name=qtyTmtbNm]").val();
+                obj.currPrice = $(this).parent().find("input[name=currPrice]").val();
+                obj.goodsNm = $(this).parent().find(".info_box").find(".name").text();
+                obj.brandNm = $(this).parent().find(".info_box").find(".brand").text();
+                obj.imgPath = $(this).parent().find(".info_item").find(".thumb_box img").attr("src");
+
+                notApplyQtyTmtbList.push(obj);
+            }
+
+            if($(this).parent().find("input[name=applyAmtSectionYn]").val() == "N") {       // 다다익선 금액은 기본상품만 가져오면됨 (N은 기본상품에 걸려있음)
+                let obj = new Object();
+                obj.tmtbSq = $(this).parent().find("input[name=amtTmtbSq]").val();
+                obj.tmtbNm = $(this).parent().find("input[name=amtTmtbNm]").val();
+
+                notApplyAmtTmtbList.push(obj);
+            }
+        });
+
+        // 수량 다다익선 정렬
+        var t = new Object();
+        for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
+            for (let j = 0; j < notApplyQtyTmtbList.length - i - 1; j++) {
+                if (notApplyQtyTmtbList[j].tmtbSq > notApplyQtyTmtbList[j + 1].tmtbSq) {
+                    t = notApplyQtyTmtbList[j];
+                    notApplyQtyTmtbList[j] = notApplyQtyTmtbList[j + 1];
+                    notApplyQtyTmtbList[j + 1] = t;
                 }
+            }
+        }
 
-                if(chk) {
-                    let goods = new Object();
-                    goods.brandNm = cart.brandNm;
-                    goods.goodsNm = cart.goodsNm;
-                    goods.sysImgNm = cart.sysImgNm;
-                    goods.currPrice = cart.currPrice;
-                    tmtbInfo.goodsList.push(goods);
-                } else {
-                    let aaa = {
-                        tmtbSq : cart.tmtbSq,
-                        tmtbNm : cart.tmtbNm,
-                        goodsList : new Array()
-                    };
+        // 정렬 후 같은 다다익선 상품은 한 배열로 묶음
+        let tmtbQtyList = new Array();
+        for (let i = 0; i < notApplyQtyTmtbList.length; i++) {
+            let goods = notApplyQtyTmtbList[i];
+            let tmtbInfo = new Object();
+            let chk = false;
+            for (let j = 0; j < tmtbQtyList.length; j++) {
+                let tmtb = tmtbQtyList[j];
+                if (goods.tmtbSq == tmtb.tmtbSq) {
+                    tmtbInfo = tmtbQtyList[j];
+                    chk = true;
                 }
+            }
+
+            // 현재 상품 정보
+            let goodsInfo = new Object();
+            goodsInfo.brandNm = goods.brandNm;
+            goodsInfo.goodsNm = goods.goodsNm;
+            goodsInfo.imgPath = goods.imgPath;
+            goodsInfo.currPrice = goods.currPrice;
 
+            // 현재 상품 정보 다다익선 정보에 세팅
+            if (chk) {
+                tmtbInfo.goodsList.push(goodsInfo);
+            } else {
+                let obj = new Object();
+                obj.tmtbSq = goods.tmtbSq;
+                obj.tmtbNm = goods.tmtbNm;
+                obj.goodsList = new Array();
+                obj.goodsList.push(goodsInfo);
+                tmtbQtyList.push(obj);
             }
         }
 
+        // 수량 다다익선 HTML 작성
+        let tmtbHtml = "<h4>다다익선 할인 대상이 있습니다.</h4>";
+        for(let i = 0 ; i < tmtbQtyList.length ; i++) {
+            let tmtb = tmtbQtyList[i];
+            tmtbHtml += '<div class="more_sale qtyNotApplyTmtbList">';
+            for(let j = 0 ; j < tmtb.goodsList.length ; j++) {
+                let goods = tmtb.goodsList[j];
+                tmtbHtml += '<div class="item_gd">\n' +
+                        '                <figure>\n' +
+                        '                    <a href="">\n' +
+                        '                        <span class="thumb"><img src="';
+                tmtbHtml += goods.imgPath;
+                tmtbHtml += '" alt=""></span>\n' +
+                        '                    </a>\n' +
+                        '                    <figcaption>\n' +
+                        '                        <a href="">\n' +
+                        '                            <div class="brand">';
+                tmtbHtml += goods.brandNm;
+                tmtbHtml += '</div>\n' +
+                        '                            <div class="name">';
+                tmtbHtml += goods.goodsNm;
+                tmtbHtml += '</div>\n' +
+                        '                            <div class="price">\n' +
+                        '                                <span class="selling_price">';
+                tmtbHtml += Number(goods.currPrice).toLocaleString();
+                tmtbHtml += '</span>\n' +
+                        '                            </div>\n' +
+                        '                        </a>\n' +
+                        '                    </figcaption>\n' +
+                        '                </figure>\n' +
+                        '            </div>';
+            }
+
+            tmtbHtml += '<div class="txt">\n' +
+                    '                <a href="">\n' +
+                    '                    <i class="ico ico_saletag"></i>\n' +
+                    '                    <input type="hidden" name="tmtbSq" value="' + tmtb.tmtbSq + '" />' +
+                    '                    <span>\n';
+            tmtbHtml += tmtb.tmtbNm;
+            tmtbHtml += '</span>\n' +
+                    '                </a>\n' +
+                    '            </div>\n' +
+                    '        </div>';
+        }
+
+        // 금액 다다익선 정보 HTML 작성
+        for(let i = 0 ; i < notApplyAmtTmtbList.length ; i++) {
+            let tmtb = notApplyAmtTmtbList[i];
+            tmtbHtml += '<div class="more_sale amtNotApplyTmtbList">\n' +
+                    '            <div class="txt">\n' +
+                    '                <a href="">\n' +
+                    '                    <i class="ico ico_saletag"></i>\n' +
+                    '                    <input type="hidden" name="tmtbSq" value="' + tmtb.tmtbSq + '" />' +
+                    '                    <span>';
+            tmtbHtml += tmtb.tmtbNm;
+            tmtbHtml += '</span>\n' +
+                    '                </a>\n' +
+                    '            </div>\n' +
+                    '        </div>';
+        }
+
+        $(".area_saleitem").html(tmtbHtml);
 
-        /*[# th:each="order : ${order.cartGoodsList}"]*/
-        /*[/]*/
     }
 
     function cancelCartCpn() {
@@ -522,5 +583,54 @@
             }
         });
     };
+
+    //다다익선 적용내역 보기
+    $(document).on('click','.shopping_bag .part_deliver .btn_moresale',function(e){
+        $(this).toggleClass('active');
+        $(this).parents('.od_moresale').find('.li_moresale').toggle();
+        return false;
+    });
+
+    //관심상품 등록
+    $(document).on('click','.shopping_bag .part_deliver .btn_favorite',function(e){
+        $(this).toggleClass('active');
+        return false;
+    });
+
+    //쿠폰사용안내 팝업열기
+    $(document).on('click','#btn_cpinfo_pop',function(e){
+        $("#cpinfoPop").modal("show");
+        return false;
+    });
+
+    //옵션변경 팝업열기
+    $(document).on('click','.btn_opt_pop',function(e){
+        $("#optModifyPop").modal("show");
+        return false;
+    });
+
+    //상품옵션변경 팝업 > 수량조절
+    $(document).on('click','.opt_modify_pop .number_count .minus',function(e){
+        var $input = $(this).parent().find('input');
+        var count = parseInt($input.val()) - 1;
+        count = count < 1 ? 1 : count;
+        $input.val(count);
+        $input.change();
+        return false;
+    }).on('click','.opt_modify_pop .number_count .plus',function(e){
+        var $input = $(this).parent().find('input');
+        $input.val(parseInt($input.val()) + 1);
+        $input.change();
+        return false;
+    });
+
+    //상품옵션변경 팝업 > 컬러선택 표기
+    $(document).on('click','.opt_modify_pop .opt_color ul li a',function(e){
+        $(this).parents('.opt_color').find('li a').removeClass('on');
+        $(this).addClass('on');
+        var optColor = $('.opt_modify_pop .opt_color ul li a.on img').attr('alt');
+        $('.opt_modify_pop .opt_color .opt_header .color').text(optColor);
+        return false;
+    });
 </script>
 </html>

src/main/webapp/WEB-INF/views/web/cart/cartListFormWeb.html

@@ -437,25 +437,18 @@
 
 
     $(function(){
-        // 추천상품 슬라이드
-        $('.od_recommend .item_slide').slick({
-            dots: true,
-            infinite: true,
-            speed: 300,
-            slidesToShow: 5,
-            slidesToScroll: 5,
-            adaptiveHeight: true
-        });
-
-        $('.part_dlvr').on('click','.btn_moresale',function(e){
-            //다다익선 적용내역 보기
-            e.preventDefault();
-            $(this).toggleClass('active');
-            $(this).parents('.od_moresale').find('.li_moresale').toggle();
-        }).on('click','.btn_favorite',function(e){
-            //관심상품 등록
-            e.preventDefault();
-            $(this).toggleClass('active');
+        //추천상품 슬라이드
+        var rcmdItemSwiper = new Swiper('.od_recommend .swiper-container', {
+            slidesPerView: 5,
+            spaceBetween: 0,
+            navigation: {
+                nextEl: '.od_recommend .swiper-button-next',
+                prevEl: '.od_recommend .swiper-button-prev',
+            },
+            pagination: {
+                el: '.od_recommend .swiper-pagination',
+                clickable: true,
+            },
         });
     });
 </script>