|
@@ -38,130 +38,145 @@
|
|
|
<input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
|
|
<input type="hidden" name="goodsType" th:value="${goodsInfo.goodsType}"/>
|
|
|
<input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
|
|
<input type="hidden" name="selfGoodsYn" th:value="${goodsInfo.selfGoodsYn}"/>
|
|
|
<section class="pd_detail">
|
|
<section class="pd_detail">
|
|
|
- <div class="inner wide">
|
|
|
|
|
- <!-- 제품사진영역 -->
|
|
|
|
|
- <div class="thumb_box" th:if="${goodsImgList != null and !goodsImgList.empty}">
|
|
|
|
|
- <div class="area_slider">
|
|
|
|
|
- <div class="swiper-container thumb_list">
|
|
|
|
|
- <div class="swiper-wrapper">
|
|
|
|
|
- <!-- <div class="swiper-slide"><div class="thumb mov"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div> -->
|
|
|
|
|
- <th:block th:each="goodsImg, status : ${goodsImgList}">
|
|
|
|
|
- <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
|
|
|
|
|
- or #strings.contains(goodsImg.sysImgNm,'_L1.')
|
|
|
|
|
- or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
|
|
|
|
|
- <div class="thumb"><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div>
|
|
|
|
|
- </th:block>
|
|
|
|
|
|
|
+ <!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가 -->
|
|
|
|
|
+ <div class="pd_info">
|
|
|
|
|
+ <div class="pd_info1" data-speed="10">
|
|
|
|
|
+
|
|
|
|
|
+ <div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">
|
|
|
|
|
+ <!-- 제품사진영역 -->
|
|
|
|
|
+ <div class="thumb_box">
|
|
|
|
|
+ <div class="area_slider">
|
|
|
|
|
+ <div class="swiper-container thumb_list">
|
|
|
|
|
+ <div class="swiper-wrapper">
|
|
|
|
|
+ <th:block th:each="goodsImg, status : ${goodsImgList}">
|
|
|
|
|
+ <div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
|
|
|
|
|
+ or #strings.contains(goodsImg.sysImgNm,'_L1.')
|
|
|
|
|
+ or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
|
|
|
|
|
+ <div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div> <!-- mov -->
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- Add Pagination -->
|
|
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- Add Pagination -->
|
|
|
|
|
- <div class="swiper-pagination"></div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <!-- //제품사진영역 -->
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- //제품사진영역 -->
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="inner">
|
|
|
|
|
- <div class="timer_box" style="display:none;">
|
|
|
|
|
- <p>
|
|
|
|
|
- <span class="tt">남은시간</span>
|
|
|
|
|
- <span class="timer">
|
|
|
|
|
- <em id="d-days">0</em>
|
|
|
|
|
- <em id="d-hours">0</em>
|
|
|
|
|
- <em id="d-minutes">0</em>
|
|
|
|
|
- <em id="d-seconds">0</em>
|
|
|
|
|
- </span>
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="descript_box">
|
|
|
|
|
- <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
|
|
|
|
|
- <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
|
|
|
|
|
- <p class="price_blk">
|
|
|
|
|
- <span class="sale_price"><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원</span>
|
|
|
|
|
- <span class="org_price" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" ><del><em th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</em>원</del></span>
|
|
|
|
|
- <span class="sale_percent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
|
|
- </p>
|
|
|
|
|
- <p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>
|
|
|
|
|
- <div class="btn_group_flex">
|
|
|
|
|
- <div><button class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <div class="inner">
|
|
|
|
|
+ <!-- 210409_ 구조변경 : .covered 추가 -->
|
|
|
|
|
+ <div class="covered">
|
|
|
|
|
+ <div class="timer_box" style="display:none;">
|
|
|
|
|
+ <p>
|
|
|
|
|
+ <span class="tt">남은시간</span>
|
|
|
|
|
+ <span class="timer">
|
|
|
|
|
+ <em id="d-days">0</em>
|
|
|
|
|
+ <em id="d-hours">0</em>
|
|
|
|
|
+ <em id="d-minutes">0</em>
|
|
|
|
|
+ <em id="d-seconds">0</em>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="descript_box">
|
|
|
|
|
+ <p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>
|
|
|
|
|
+ <p class="comment" th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>
|
|
|
|
|
+ <p class="price_blk">
|
|
|
|
|
+ <span class="sale_price"><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원</span>
|
|
|
|
|
+ <span class="org_price" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" ><del><em th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</em>원</del></span>
|
|
|
|
|
+ <span class="sale_percent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>
|
|
|
|
|
+ <div class="btn_group_flex">
|
|
|
|
|
+ <div><button class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
|
|
|
- <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
|
|
|
|
|
- <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">
|
|
|
|
|
+ <div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="inner">
|
|
|
|
|
- <div class="option_box">
|
|
|
|
|
- <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
|
|
|
|
|
- <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
|
|
|
|
|
- <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
|
|
|
|
|
- <div class="opt_header">
|
|
|
|
|
- <span class="title">컬러</span>
|
|
|
|
|
- <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <ul>
|
|
|
|
|
- <li th:each="goodsOption1, status : ${goodsOption1List}">
|
|
|
|
|
- <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]])"> <!-- 해당 컬러 상품페이지로 이동 -->
|
|
|
|
|
- <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="">
|
|
|
|
|
- </a>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}" >
|
|
|
|
|
- <div class="opt_header">
|
|
|
|
|
- <span class="title">사이즈</span>
|
|
|
|
|
|
|
+ <div class="inner">
|
|
|
|
|
+ <div class="option_box">
|
|
|
|
|
+ <th:block th:if="${goodsInfo.selfGoodsYn =='Y' }"> <!-- 자사상품 -->
|
|
|
|
|
+ <th:block th:if="${goodsInfo.goodsType =='G056_N' }"> <!-- 일반상품 -->
|
|
|
|
|
+ <div class="opt_color" th:if="${goodsOption1List != null and !goodsOption1List.empty}">
|
|
|
|
|
+ <div class="opt_header">
|
|
|
|
|
+ <span class="title">컬러</span>
|
|
|
|
|
+ <span class="color" th:text="${goodsInfo.colorNm}">그레이</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li th:each="goodsOption1, status : ${goodsOption1List}">
|
|
|
|
|
+ <a href="javascript:void(0);" th:class="${params.colorCd == goodsOption1.optCd1}? 'on':''" th:onclick="cfnGoToGoodsDetail([[${goodsInfo.goodsCd}]], [[${goodsOption1.optCd1}]])"> <!-- 해당 컬러 상품페이지로 이동 -->
|
|
|
|
|
+ <img th:src="${imgGoodsUrl+'/'+goodsOption1.sysImgNm+'?RS=50'}" alt="">
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="form_field2">
|
|
|
|
|
- <div class="lap">
|
|
|
|
|
- <div th:each="goodsOption2, status : ${goodsOption2List}">
|
|
|
|
|
- <label>
|
|
|
|
|
- <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
|
|
|
|
|
- th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"
|
|
|
|
|
- th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" />
|
|
|
|
|
- <span th:text="${goodsOption2.optCd2}" >100</span>
|
|
|
|
|
- </label>
|
|
|
|
|
|
|
+ <div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
|
|
|
|
|
+ <div class="opt_header">
|
|
|
|
|
+ <span class="title">사이즈</span>
|
|
|
|
|
+ <span class="size">
|
|
|
|
|
+ <em class="selectOptCd1"></em>
|
|
|
|
|
+ <em class="selectOptCd1addPrice"></em>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <div th:each="goodsOption2, status : ${goodsOption2List}">
|
|
|
|
|
+ <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
|
|
|
|
|
+ th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"
|
|
|
|
|
+ th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" />
|
|
|
|
|
+ <label th:for="${goodsOption2.optCd}"><span th:text="${goodsOption2.optCd2}">90</span></label>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ </th:block>
|
|
|
</div>
|
|
</div>
|
|
|
- </th:block>
|
|
|
|
|
- </th:block>
|
|
|
|
|
- <div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div class="inner">
|
|
|
|
|
- <div class="benefit_box" th:if="${(cardInfoList != null and !cardInfoList.empty) or
|
|
|
|
|
- (goodsCouponList != null and !goodsCouponList.empty)
|
|
|
|
|
- }" >
|
|
|
|
|
- <dl class="bnf_shopping" th:if="${goodsCouponList != null and !goodsCouponList.empty}">
|
|
|
|
|
- <dt>쇼핑혜택</dt>
|
|
|
|
|
- <dd>
|
|
|
|
|
- <span th:if="${goodsCouponList != null and !goodsCouponList.empty}">
|
|
|
|
|
- <th:block th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">
|
|
|
|
|
- 최대 <em>
|
|
|
|
|
- <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
|
|
|
|
|
- <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
|
|
|
|
|
- </em> 쿠폰 할인
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or
|
|
|
|
|
+ (goodsCouponList != null and !goodsCouponList.empty) or
|
|
|
|
|
+ (tmtbList != null and !tmtbList.empty) or
|
|
|
|
|
+ (freeGoodsList != null and !freeGoodsList.empty)}" >
|
|
|
|
|
+ <div class="benefit_box">
|
|
|
|
|
+ <dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or (tmtbList != null and !tmtbList.empty)}">
|
|
|
|
|
+ <dt>쇼핑혜택</dt>
|
|
|
|
|
+ <dd>
|
|
|
|
|
+ <th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">
|
|
|
|
|
+ <span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>
|
|
|
|
|
+ <th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>
|
|
|
|
|
+ <th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>
|
|
|
|
|
+ </em> 쿠폰 할인</span>
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ <th:block th:if="${tmtbList != null and !tmtbList.empty}">
|
|
|
|
|
+ <span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">
|
|
|
|
|
+ <em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시
|
|
|
|
|
+ <em><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인
|
|
|
|
|
+ </span>
|
|
|
</th:block>
|
|
</th:block>
|
|
|
- </span>
|
|
|
|
|
- <span><em>99개</em> 이상 구매 시 <em>9,999,999원</em> 할인</span>
|
|
|
|
|
- <span>미니언즈 우산 증정</span>
|
|
|
|
|
- <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
|
|
|
|
|
- </dd>
|
|
|
|
|
- </dl>
|
|
|
|
|
- <dl class="bnf_card" th:if="${cardInfoList != null and !cardInfoList.empty}">
|
|
|
|
|
- <dt>카드혜택</dt>
|
|
|
|
|
- <dd>
|
|
|
|
|
- <th:block th:each="cardInfo, status : ${cardInfoList}">
|
|
|
|
|
- <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
|
|
|
|
|
- <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
|
|
|
|
|
- <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
|
|
|
|
|
- </th:block>
|
|
|
|
|
- <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
|
|
|
|
|
- </dd>
|
|
|
|
|
- </dl>
|
|
|
|
|
|
|
+ <span th:if="${freeGoodsList != null and !freeGoodsList.empty}">
|
|
|
|
|
+ <th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">
|
|
|
|
|
+ <th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'N'}" th:text="외 택1"></th:block></span>
|
|
|
|
|
+ <button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ <dl class="bnf_card">
|
|
|
|
|
+ <dt>카드혜택</dt>
|
|
|
|
|
+ <dd>
|
|
|
|
|
+ <th:block th:each="cardInfo, status : ${cardInfoList}">
|
|
|
|
|
+ <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>
|
|
|
|
|
+ <span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>
|
|
|
|
|
+ <span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ <button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -542,11 +557,11 @@
|
|
|
</div>
|
|
</div>
|
|
|
<!-- //STYLE24의 스타일링 추천 -->
|
|
<!-- //STYLE24의 스타일링 추천 -->
|
|
|
<!-- 동일브랜드 추천상품 -->
|
|
<!-- 동일브랜드 추천상품 -->
|
|
|
- <div class="pd_samebrand" id="goodsRecommendbArea">
|
|
|
|
|
|
|
+ <div class="pd_clickother" id="goodsRecommendbArea">
|
|
|
</div>
|
|
</div>
|
|
|
<!-- //동일브랜드 추천상품 -->
|
|
<!-- //동일브랜드 추천상품 -->
|
|
|
<!-- 이 상품과 비슷한 상품영역 -->
|
|
<!-- 이 상품과 비슷한 상품영역 -->
|
|
|
- <div class="pd_relate" id="goodsLikebArea">
|
|
|
|
|
|
|
+ <div class="pd_clickother" id="goodsLikebArea">
|
|
|
</div>
|
|
</div>
|
|
|
<!-- //이 상품과 비슷한 상품영역 -->
|
|
<!-- //이 상품과 비슷한 상품영역 -->
|
|
|
</div>
|
|
</div>
|
|
@@ -580,20 +595,20 @@
|
|
|
<div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
|
|
<div class="opt_size" th:if="${goodsOption2List != null and !goodsOption2List.empty}">
|
|
|
<div class="opt_header">
|
|
<div class="opt_header">
|
|
|
<span class="title">사이즈</span>
|
|
<span class="title">사이즈</span>
|
|
|
|
|
+ <span class="size">
|
|
|
|
|
+ <em class="selectOptCd1"></em>
|
|
|
|
|
+ <em class="selectOptCd1addPrice"></em>
|
|
|
|
|
+ </span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="form_field2">
|
|
|
|
|
- <div class="lap">
|
|
|
|
|
- <div th:each="goodsOption2, status : ${goodsOption2List}">
|
|
|
|
|
- <label>
|
|
|
|
|
- <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
|
|
|
|
|
- th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"
|
|
|
|
|
- th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" />
|
|
|
|
|
- <span th:text="${goodsOption2.optCd2}" >100</span>
|
|
|
|
|
- </label>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <div th:each="goodsOption2, status : ${goodsOption2List}">
|
|
|
|
|
+ <input type="radio" name="opt" th:id="${goodsOption2.optCd}" th:disabled="${goodsOption2.soldoutYn == 'Y' or goodsOption2.stockQty <= 0}"
|
|
|
|
|
+ th:attr="addPrice=${goodsOption2.addPrice}, optCd1=${goodsOption2.optCd1}, optCd2=${goodsOption2.optCd2}, optCd=${goodsOption2.optCd}"
|
|
|
|
|
+ th:onclick="fnViewStock(this, [[${goodsInfo.goodsCd}]],[[${goodsOption2.optCd}]],[[${goodsOption2.optCd1}]],[[${goodsOption2.optCd2}]],[[${goodsInfo.minOrdQty}]], [[${goodsInfo.maxOrdQty}]] )" />
|
|
|
|
|
+ <label th:for="${goodsOption2.optCd}"><span th:text="${goodsOption2.optCd2}">90</span></label>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
<!-- 해당상품 품절시 노출 -->
|
|
<!-- 해당상품 품절시 노출 -->
|
|
|
<div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
|
|
<div class="info_restock" style="display:none;"><a href="javascript:void(0);" id="btn_pushRestock_pop" class="btn_popup" th:onclick="cfGoodsInstockAlarmInfo([[${goodsInfo.goodsCd}]], [[${goodsInfo.colorCd}]])">재입고 알림 신청</a></div>
|
|
|
<!-- //해당상품 품절시 노출 -->
|
|
<!-- //해당상품 품절시 노출 -->
|
|
@@ -816,7 +831,6 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 구매하기팝업 -->
|
|
<!-- 구매하기팝업 -->
|
|
|
-
|
|
|
|
|
</section>
|
|
</section>
|
|
|
<!-- ★ 컨텐츠 종료 -->
|
|
<!-- ★ 컨텐츠 종료 -->
|
|
|
</form>
|
|
</form>
|
|
@@ -839,9 +853,36 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- //바닥메뉴 -->
|
|
<!-- //바닥메뉴 -->
|
|
|
|
|
+
|
|
|
|
|
+ <div class="pd_pop full_pop pd_itemthumb_pop" id="pdItemThumbPop" style="display: none;" th:if="${goodsImgList != null and !goodsImgList.empty}" >
|
|
|
|
|
+ <div class="full_popup_wrap">
|
|
|
|
|
+ <h5 class="sr-only">상품썸네일 크게보기</h5>
|
|
|
|
|
+ <div class="btn_close">
|
|
|
|
|
+ <a href="javascript:void(0);" id="btn_close_itemThumbPop" onclick="cfCloseLayer('pdItemThumbPop')">닫기버튼</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="full_pop_container">
|
|
|
|
|
+ <div id="popThumb1" class="scaleview">
|
|
|
|
|
+ <video id="video_0" loop="" autoplay="" poster="https://images.kolonmall.com/Prod_Img/JN/2021/LM15/L4PAM21041GRX_LM15.jpg" data-playing="">
|
|
|
|
|
+ <source src="https://images.kolonmall.com/Prod_Img/product_video/L4PAM21041GRX.mp4" type="video/mp4">
|
|
|
|
|
+ </video>
|
|
|
|
|
+ <div class="video_controls">
|
|
|
|
|
+ <button type="button" class="btn_video_play"><span>play</span></button>
|
|
|
|
|
+ <button type="button"class="btn_video_pause"><span>pause</span></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <th:block th:each="goodsImg, status : ${goodsImgList}">
|
|
|
|
|
+ <div id="popThumb2" class="scaleview" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.')
|
|
|
|
|
+ or #strings.contains(goodsImg.sysImgNm,'_L1.')
|
|
|
|
|
+ or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
|
|
|
|
|
+ <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </th:block>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
</main>
|
|
</main>
|
|
|
|
|
|
|
|
-
|
|
|
|
|
<script th:inline="javascript">
|
|
<script th:inline="javascript">
|
|
|
/*<![CDATA[*/
|
|
/*<![CDATA[*/
|
|
|
|
|
|
|
@@ -892,13 +933,13 @@
|
|
|
if (selfGoodsYn == "Y"){
|
|
if (selfGoodsYn == "Y"){
|
|
|
$target = $obj;
|
|
$target = $obj;
|
|
|
$target.prop("checked",true);
|
|
$target.prop("checked",true);
|
|
|
- $("#selectOptCd1").html(optCd2);
|
|
|
|
|
|
|
+ $(".selectOptCd1").html(optCd2);
|
|
|
}else{
|
|
}else{
|
|
|
$target = $obj.find('input[name="opt2"]');
|
|
$target = $obj.find('input[name="opt2"]');
|
|
|
}
|
|
}
|
|
|
let addPrice = $target.attr("addPrice");
|
|
let addPrice = $target.attr("addPrice");
|
|
|
- $("#selectOptCd1addPrice").html('');
|
|
|
|
|
- if (Number(addPrice) > 0) $("#selectOptCd1addPrice").html("(+" + addPrice.addComma() + ")");
|
|
|
|
|
|
|
+ $(".selectOptCd1addPrice").html('');
|
|
|
|
|
+ if (Number(addPrice) > 0) $(".selectOptCd1addPrice").html("(+" + addPrice.addComma() + ")");
|
|
|
|
|
|
|
|
$("#cartForm input[name=optCd]").val(optCd);
|
|
$("#cartForm input[name=optCd]").val(optCd);
|
|
|
$("#cartForm input[name=optCd1]").val(optCd1);
|
|
$("#cartForm input[name=optCd1]").val(optCd1);
|
|
@@ -1517,6 +1558,11 @@
|
|
|
var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
|
|
var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ $(document).on('click','.pd .pop_option_select .item_opt1',function(e){
|
|
|
|
|
+ $(this).toggleClass("on");
|
|
|
|
|
+ $(this).children(".combo").children(".list").slideToggle(0);
|
|
|
|
|
+ return false;
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
|
|
if (!gagajf.isNull([[${goodsInfo.socialSq}]])){
|
|
|
$('.timer_box').css('display', 'block');
|
|
$('.timer_box').css('display', 'block');
|
|
@@ -1630,6 +1676,11 @@
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ $(document).on('click','.pd_detail .thumb_box',function(e){
|
|
|
|
|
+ $('#pdItemThumbPop').css("display", "block");
|
|
|
|
|
+ return false;
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
$(document).on('click','.pd_bestreviewdetail_pop .thumblist ul li',function(e){
|
|
$(document).on('click','.pd_bestreviewdetail_pop .thumblist ul li',function(e){
|
|
|
|
|
|
|
|
$(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
|
|
$(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
|
|
@@ -1746,15 +1797,8 @@
|
|
|
copyToClipboard();
|
|
copyToClipboard();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정
|
|
|
|
|
- $(window).scroll(function(){
|
|
|
|
|
-
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
/*]]>*/
|
|
/*]]>*/
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|