|
|
@@ -0,0 +1,574 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko" xmlns:th="http://www.thymeleaf.org">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : GoodsIncludeFormWeb.html
|
|
|
+ * @desc : 상품상세 Include Page - 공용
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.03.02 eskim 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<!-- 상품상세 SNS -->
|
|
|
+<th:block th:fragment="goodsSnsForm" >
|
|
|
+<!-- toggle contents -->
|
|
|
+<div class="shareWrap" th:with="stylelUrl=${@environment.getProperty('domain.front')}, imgGoodsUrl=${@environment.getProperty('upload.goods.view')}">
|
|
|
+ <div id="layerShare" class="setShare open">
|
|
|
+ <span>
|
|
|
+ <button type="button" class="kk" th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '${imgGoodsUrl+ '/'+goodsInfo.sysImgNm}');|"><span>카카오톡</span></button>
|
|
|
+ <button type="button" class="fb" th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '', '');|"><span>페이스북</span></button>
|
|
|
+ <button type="button" class="tw" th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm+ '#style24몰'}', '', '');|"><span>트위터</span></button>
|
|
|
+ <button type="button" class="url btn_copy"><span>URL</span></button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+<!-- 딜 상품 상품소개영역 -->
|
|
|
+<th:block th:fragment="goodsDealComposeForm">
|
|
|
+<!-- ***** 상품소개영역 ***** -->
|
|
|
+<div class="content pd_desc_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
|
|
|
+ <div class="cont_body">
|
|
|
+ <div class="item_descrp">
|
|
|
+ <div class="area_list">
|
|
|
+ <!-- 상품소개 탭 -->
|
|
|
+ <div class="tab_detail_nav">
|
|
|
+ <ul>
|
|
|
+ <li class="active"><a href="javascript:void(0)">상세정보</a></li>
|
|
|
+ <li><a href="javascript:void(0)">리뷰<em>(<th:block th:text="${(goodsReviewCnt <= 9999) ? #numbers.formatInteger(goodsReviewCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></a></li>
|
|
|
+ <li><a href="javascript:void(0)">문의<em>(<th:block th:text="${(goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsQnaCnt, 0,'COMMA') : '9,999+'}"></th:block>)</em></a></li>
|
|
|
+ <li><a href="javascript:void(0)">배송/교환/반품</em></a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- //상품소개 탭 -->
|
|
|
+ <!-- 상품상세정보 -->
|
|
|
+ <div class="tab_detail_cont pd_dealitem" style="display:block;" >
|
|
|
+ <div class="itemsGrp" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
|
|
|
+ <!-- 반복 -->
|
|
|
+ <div class="item_prod" th:each="goodsInfo, status : ${goodsDealComposeList}">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0);" class="itemLink" th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]],[[${goodsInfo.compsGoodsCd}]])">
|
|
|
+ <div class="shape ranker">
|
|
|
+ <span>상품<em class="number" th:text="${#numbers.formatInteger(status.count,2)}">01</em></span>
|
|
|
+ </div>
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
|
|
|
+ <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
|
|
|
+ <p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
|
|
|
+ <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //상품상세정보 -->
|
|
|
+ <!-- 상품리뷰 리스트 -->
|
|
|
+ <div class="tab_detail_cont pd_review">
|
|
|
+ <div class="cont_head">
|
|
|
+ <h3 class="sr-only">상품리뷰 목록</h3>
|
|
|
+ <!-- 아이템선택 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt_item forReview">
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0)" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <div class="itemName">선택</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="list" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
|
|
|
+ <li th:each="goodsInfo, status : ${goodsDealComposeList}"
|
|
|
+ th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
|
|
|
+ th:onclick="fnSelGoodsDealReview([[${goodsInfo.compsGoodsCd}]])" >
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
|
|
|
+ <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
|
|
|
+ <p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
|
|
|
+ <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ <input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsInfo.selfGoodsYn}"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //아이템선택 -->
|
|
|
+ </div>
|
|
|
+ <div class="cont_body" id="goodsDealReview">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //상품리뷰 리스트 -->
|
|
|
+ <!-- 상품문의 리스트 -->
|
|
|
+ <div class="tab_detail_cont pd_qnalist">
|
|
|
+ <div class="cont_head">
|
|
|
+ <h3 class="sr-only">상품문의 목록</h3>
|
|
|
+ <!-- 아이템선택 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt_item forQna">
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0)" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <div class="itemName">선택</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="list" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
|
|
|
+ <li th:each="goodsInfo, status : ${goodsDealComposeList}"
|
|
|
+ th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
|
|
|
+ th:onclick="fnSelGoodsDealQna([[${goodsInfo.compsGoodsCd}]])" >
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
|
|
|
+ <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
|
|
|
+ <p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
|
|
|
+ <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ <input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //아이템선택 -->
|
|
|
+ </div>
|
|
|
+ <div class="cont_body" id="goodsDealQna">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //상품문의 리스트 -->
|
|
|
+ <!-- 배송/교환/반품 정보 -->
|
|
|
+ <div class="tab_detail_cont pd_delivery">
|
|
|
+ <div class="cont_head">
|
|
|
+ <h3 class="sr-only">배송/교환/반품 정보</h3>
|
|
|
+ <!-- 아이템선택 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt_item forExinfo">
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0)" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <div class="itemName">선택</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="list" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
|
|
|
+ <li th:each="goodsInfo, status : ${goodsDealComposeList}"
|
|
|
+ th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
|
|
|
+ th:onclick="fnSelGoodsDealDelivery([[${goodsInfo.compsGoodsCd}]])" >
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="#none" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
|
|
|
+ <div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
|
|
|
+ <p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
|
|
|
+ <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ <input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //아이템선택 -->
|
|
|
+ </div>
|
|
|
+ <div class="cont_body" id="goodsDealDelivery">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //배송/교환/반품 정보 -->
|
|
|
+ </div>
|
|
|
+ <div class="area_option">
|
|
|
+ <div class="opt_wrap">
|
|
|
+ <div class="option_box">
|
|
|
+ <div class="opt_select">
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt_item">
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0)" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <div class="itemName">선택</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="list" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
|
|
|
+ <th:block th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
|
|
|
+ <li th:onclick="fnOption1('Down', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
|
|
|
+ th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90')? 'true':''}, data-soldout=${(goodsInfo.goodsStat != 'G008_90')? 'true':''}">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0);" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
|
|
|
+ <div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
|
|
|
+ <p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
|
|
|
+ <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ <input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </th:block>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt1" disabled>
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">선택</div>
|
|
|
+ <ul class="list" id="goodsDealOptDown1">
|
|
|
+ <!-- 옵션 1 -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt2" disabled>
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">선택</div>
|
|
|
+ <ul class="list" id="goodsDealOptDown2">
|
|
|
+ <!-- 옵션 2 -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="opt_result">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="price_box">
|
|
|
+ <p class="number">
|
|
|
+ 총 <span>0</span>개
|
|
|
+ </p>
|
|
|
+ <p class="price">
|
|
|
+ <span>
|
|
|
+ 0<em>원</em>
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="btn_box">
|
|
|
+ <div class="btn_group_block ui_row">
|
|
|
+ <th:block th:if="${goodsInfo.stockQty > 0}">
|
|
|
+ <div class="ui_col_6">
|
|
|
+ <button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
|
|
|
+ </div>
|
|
|
+ <div class="ui_col_6">
|
|
|
+ <button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <th:block th:unless="${goodsInfo.stockQty > 0}">
|
|
|
+ <div class="ui_col_12">
|
|
|
+ <button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- **************** 개별상품 상세정보 팝업 **************** -->
|
|
|
+ <div class="pd_pop full_pop pd_descrp_pop" id="layer_goods_deal_detail">
|
|
|
+ <div class="full_popup_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
|
|
|
+ <h5 class="sr-only">개별상품 상세정보 안내</h5>
|
|
|
+ <div class="btn_close">
|
|
|
+ <a href="javascript:void(0)" onclick="fnCloseGoodsDealDetail();">닫기버튼</a>
|
|
|
+ </div>
|
|
|
+ <div class="full_pop_header">
|
|
|
+ <!-- 아이템선택 -->
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt_item">
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">
|
|
|
+ <div class="item_prod">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0)" class="itemLink">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <div class="itemName">선택</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="list" th:if="${goodsDealComposeList != null and !goodsDealComposeList.empty}">
|
|
|
+ <li class="selected" th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
|
|
|
+ <div class="item_prod" th:classappend="${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'soldout':'' }">
|
|
|
+ <div class="item_state">
|
|
|
+ <a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]], [[${goodsInfo.selfGoodsYn}]], [[${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'Y':'N' }]])">
|
|
|
+ <div class="itemPic">
|
|
|
+ <img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
|
|
|
+ </div>
|
|
|
+ <p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
|
|
|
+ <div class="itemName" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
|
|
|
+ <p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
|
|
|
+ <span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
|
|
|
+ <span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
|
|
|
+ </p>
|
|
|
+ </a>
|
|
|
+ <input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}, selfGoodsYn=${goodsInfo.selfGoodsYn}" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //아이템선택 -->
|
|
|
+ </div>
|
|
|
+ <div class="full_pop_container" id="goodsDealDetail">
|
|
|
+ <!-- 개별상품 상세정보 팝업 내용 -->
|
|
|
+ </div>
|
|
|
+ <div class="full_pop_fix_r">
|
|
|
+ <div class="option_box">
|
|
|
+ <div class="opt_select">
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt1" disabled>
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">선택</div>
|
|
|
+ <ul class="list" id="goodsDealOptLayer1">
|
|
|
+ <!-- 옵션 1 -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="select_custom deal_opt2" disabled>
|
|
|
+ <div class="combo">
|
|
|
+ <div class="select">선택</div>
|
|
|
+ <ul class="list" id="goodsDealOptLayer2">
|
|
|
+ <!-- 옵션 2 -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="opt_result">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="price_box">
|
|
|
+ <p class="number">
|
|
|
+ 총 <span>0</span>개
|
|
|
+ </p>
|
|
|
+ <p class="price">
|
|
|
+ <span>
|
|
|
+ 0<em>원</em>
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="btn_box">
|
|
|
+ <div class="btn_group_block ui_row">
|
|
|
+ <th:block th:if="${goodsInfo.stockQty > 0}">
|
|
|
+ <div class="ui_col_6">
|
|
|
+ <button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
|
|
|
+ </div>
|
|
|
+ <div class="ui_col_6">
|
|
|
+ <button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ <th:block th:unless="${goodsInfo.stockQty > 0}">
|
|
|
+ <div class="ui_col_12">
|
|
|
+ <button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
|
|
|
+ </div>
|
|
|
+ </th:block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- **************** 개별상품 상세정보 팝업 **************** -->
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+
|
|
|
+ // 구성 상품 상세 상품평
|
|
|
+ var fnGoodsDetailReview = function(params) {
|
|
|
+ gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 상품평 상품선택시
|
|
|
+ var fnSelGoodsDealReview = function(goodsCd){
|
|
|
+ var params = new Object();
|
|
|
+ params.goodsCd = goodsCd;
|
|
|
+ fnGoodsDetailReview(params); // ajax html
|
|
|
+ }
|
|
|
+
|
|
|
+ // 구성 상품 상세 문의
|
|
|
+ var fnGoodsDetailQna = function(params) {
|
|
|
+ gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 문의 상품선택시
|
|
|
+ var fnSelGoodsDealQna = function(goodsCd){
|
|
|
+ var params = new Object();
|
|
|
+ params.goodsCd = goodsCd;
|
|
|
+ fnGoodsDetailQna(params); // ajax html
|
|
|
+ }
|
|
|
+
|
|
|
+ // 구성 상품 상세 배송정보
|
|
|
+ var fnGoodsDetailDelivery = function(params) {
|
|
|
+ gagajf.ajaxSubmit("/goods/detail/delivery/frame", "html", "goodsDealDelivery", params);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 배송정보 상품선택시
|
|
|
+ var fnSelGoodsDealDelivery = function(goodsCd){
|
|
|
+ var params = new Object();
|
|
|
+ params.goodsCd = goodsCd;
|
|
|
+ fnGoodsDetailDelivery(params); // ajax html
|
|
|
+ }
|
|
|
+
|
|
|
+ // 상품선택시 상품상세내용 변경
|
|
|
+ var fnOpenGoodsDealDetail = function(goodsCd, compsGoodsCd){
|
|
|
+
|
|
|
+ // 콤보박스 선택 처리
|
|
|
+ let $selObj = $('#layer_goods_deal_detail').find('.select_custom.deal_opt_item');
|
|
|
+
|
|
|
+ // 탭별 선택시 기본 상품 설정
|
|
|
+ let selIdx = 0;
|
|
|
+ let selfGoodsYn = '';
|
|
|
+ let currPrice = 0;
|
|
|
+ let soldoutYn = "N";
|
|
|
+ $selObj.find('.combo .list li').each(function() {
|
|
|
+ if ($(this).find('input[name=selectGoods]').val() == compsGoodsCd){
|
|
|
+ selfGoodsYn = $(this).find('input[name=selectGoods]').attr('selfGoodsYn');
|
|
|
+ currPrice = $(this).find('input[name=selectGoods]').attr('currPrice');
|
|
|
+ if ($(this).find('.item_prod').hasClass('soldout')) soldoutYn = "Y";
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ selIdx ++;
|
|
|
+ });
|
|
|
+
|
|
|
+ $selObj.find('.combo .list li').eq(selIdx).trigger("click");
|
|
|
+
|
|
|
+ // 상세노출
|
|
|
+ fnGoodsDealDesc(compsGoodsCd, currPrice, selfGoodsYn, soldoutYn);
|
|
|
+/*
|
|
|
+ if (!soldout){
|
|
|
+ // 옵션1 처리
|
|
|
+ fnOption1("layer", compsGoodsCd, currPrice, selfGoodsYn);
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+ let $obj = $('.pd_detail .opt_result');
|
|
|
+ let $taget = $('.full_pop_fix_r .opt_result');
|
|
|
+ $taget.html($obj.html());
|
|
|
+
|
|
|
+ fnSetTotalPrice();
|
|
|
+
|
|
|
+ $('body').addClass('lock');
|
|
|
+ $("#layer_goods_deal_detail").show();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 상세 레이어 창닫기
|
|
|
+ var fnCloseGoodsDealDetail = function(){
|
|
|
+ // 선택값 본창에 넘기기
|
|
|
+ let $obj = $('.full_pop_fix_r .opt_result');
|
|
|
+ let $taget = $('.pd_detail .opt_result');
|
|
|
+ $taget.html($obj.html());
|
|
|
+
|
|
|
+ fnSetTotalPrice();
|
|
|
+
|
|
|
+ $('body').removeClass('lock');
|
|
|
+ $('#goodsDealDetail').html('');
|
|
|
+ $("#layer_goods_deal_detail").hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 구성 상품 상세
|
|
|
+ var fnGoodsDealDetail2 = function(params) {
|
|
|
+ gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 레이어에서 상품선택시
|
|
|
+ var fnGoodsDealDesc = function(goodsCd, currPrice, selfGoodsYn , soldout){
|
|
|
+ var params = new Object();
|
|
|
+ params.goodsCd = goodsCd;
|
|
|
+ params.adminYn = "Y";
|
|
|
+ fnGoodsDealDetail2(params); // ajax html
|
|
|
+ if (soldout == "N"){
|
|
|
+ // 옵션1 처리
|
|
|
+ fnOption1("layer", goodsCd, currPrice, selfGoodsYn);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready( function() {
|
|
|
+
|
|
|
+ /* var params = new Object();
|
|
|
+ params.goodsCd = [[${params.compsGoodsCd}]];
|
|
|
+ params.adminYn = [[${params.adminYn}]];
|
|
|
+ fnGoodsDealDetail(params); // ajax html
|
|
|
+
|
|
|
+ let $obj = $('.pd_detail .opt_result');
|
|
|
+ let $taget = $('.full_pop_fix_r .opt_result');
|
|
|
+ $taget.html($obj.html());
|
|
|
+
|
|
|
+ fnSetTotalPrice(); */
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+</html>
|
eskim
