상품상세 세트상품/추가구성상품 디자인 및 기능 문제
설명
(뉴)상품에서 세트상품/추가구성상품이 추가되었습니다.
처리대상
1. 기존 상품관리 스킨 그대로 (뉴)상품관리로 이전하신 사용자
어드민 설정
- 세트상품 : 상품관리 > 상품등록 > 세트상품 등록추가구성상품 : 상품관리 > 상품등록 > 추가구성상품 > 추가구성상품 사용
파일 위치
위치
파일
/module/product/
detail.html
/layout/basic/css/
common.css
HTML
삭제 부분
<div class="mSpec">
<ul module="product_option">
<li module="product_option"><span>{$option_name}</span>
{$form.option}
</li>
<li module="product_addoption"><span>{$add_option_name}</span>
{$form.add_option}
</li>
</ul>
<p>
<span>수량</span>
<input id="quantity" name="quantity_name" style="width:50px;" value="" type="number">
<img class="QuantityUp" alt="up" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_up.png" width="30" height="27">
<img class="QuantityDown" alt="down" src="http://img.echosting.cafe24.com/mobileWeb/common/btn_quantity_down.png" width="30" height="27">
<span style="display:none;">
<label for="chkDelivery1">{$form.delvtypeA} 국내배송</label>
<label for="chkDelivery2">{$form.delvtypeB} 해외배송</label>
</span>
</p>
</div>
추가 부분
<div class="boardWrite">
<table border="1" summary="">
<caption>기본 정보</caption>
<colgroup>
<col style="width:110px">
<col style="width:auto">
</colgroup>
<tbody module="product_option">
<tr module="product_option">
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
{$form.add_option}
<span class="byte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr class="{$quantity_display|display}">
<th scope="row">수량</th>
<td>
{$form.quantity}
<img class="{$quantity_up_class}" alt="up" src="http://img.echosting.cafe24.com/design/skin/mobile/btn_quantity_up.png" width="30" height="27">
<img class="{$quantity_down_class}" alt="down" src="http://img.echosting.cafe24.com/design/skin/mobile/btn_quantity_down.png" width="30" height="27">
</td>
</tr>
</tbody>
</table>
</div>
<div class="productSet normal" module="product_setproduct">
<ul class="product">
<li>
<div class="information">
<p class="name">{$product_name} <span class="qty">({$set_quantity}개씩 구매되는 상품)</span></p>
</div>
<div class="option">
<table border="1">
<caption>옵션 정보</caption>
<colgroup>
<col style="width:105px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
{$form.add_option}
<span class="byte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr module="product_option">
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th scope="row">상품선택</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<div class="information">
<p class="name">{$product_name} <span class="qty">({$set_quantity}개씩 구매되는 상품)</span></p>
</div>
<div class="option">
<table border="1">
<caption>옵션 정보</caption>
<colgroup>
<col style="width:105px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>]
{$form.add_option}
<span class="byte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr module="product_option">
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th scope="row">상품선택</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
<div class="productSet normal" module="product_addproduct">
<strong class="title toggle"><span>추가구성상품</span></strong>
<ul class="product">
<li>
<div class="information">
<p class="name">{$product_name}</p>
<p class="price {$product_price_del}">{$product_price}</p>
<p class="salePrice {$product_sale_price_display|display}">{$product_sale_price}</p>
</div>
<div class="option">
<table border="1">
<caption>옵션 정보</caption>
<colgroup>
<col style="width:105px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
{$form.add_option}
<span class="byte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr module="product_option">
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th scope="row">상품선택</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<div class="information">
<p class="name">{$product_name}</p>
<p class="price {$product_price_del}">{$product_price}</p>
<p class="salePrice {$product_sale_price_display|display}">{$product_sale_price}</p>
</div>
<div class="option">
<table border="1">
<caption>옵션 정보</caption>
<colgroup>
<col style="width:105px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
{$form.add_option}
<span class="byte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr module="product_option">
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th scope="row">상품선택</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
<div id="{$total.total_id}" class="{$total.total_display|display}">
<table border="1" summary="">
<caption>상품 목록</caption>
<colgroup>
<col style="width:auto;">
<col style="width:100px;">
<col style="width:35px;">
</colgroup>
<thead>
<tr>
<th scope="col">상품 정보</th>
<th scope="col">가격</th>
<th scope="col">삭제</th>
</tr>
</thead>
<!-- 참고 : 옵션선택 또는 세트상품 선택시 상품이 추가되는 영역입니다. 쇼핑몰 화면에는 아래와 같은 마크업구조로 표시됩니다. 삭제시 기능이 정상동작 하지 않습니다.-->
<tbody>
<!-- tr>
<td>
<p class="product">
<strong>$상품명</strong><br>
- <span class="option">$옵션</span>
</p>
<p>
<input type="number" class="quantity_opt">
<a href="#none"><img width="30" height="27" src="http://img.echosting.cafe24.com/design/skin/mobile/btn_quantity_up.png" class="QuantityUp" alt="수량증가"></a>
<a href="#none"><img width="30" height="27" src="http://img.echosting.cafe24.com/design/skin/mobile/btn_quantity_down.png" class="QuantityDown" alt="수량감소"></a>
</p>
</td>
<td>
<strong class="price"><span>$가격</span></strong>
<span class="mileage"><img src="http://img.echosting.cafe24.com/design/common/icon_sett04.gif"> (<span class="mileage_price">$적립금</span>)</span>
</td>
<td>
<a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/mobile/btn_del.png" width="21" height="20" class="option_add_box_del" alt="삭제"></a>
</td>
</tr -->
</tbody>
<!-- //참고 -->
<tfoot>
<tr>
<td colspan="3">[총 상품금액(수량)] <span class="{$total.total_cnt}"><strong class="price">0</strong> (0개)</span></td>
</tr>
</tfoot>
</table>
</div>
CSS
/* 상품상세 > 기본 정보 */
.xans-product-detail .boardWrite { margin:-1px 0 0 0; border-top: 1px solid #434447; border-bottom: 1px solid #434447; }
.xans-product-detail .boardWrite table { table-layout:fixed; font-size:11px; word-wrap:break-word; }
.xans-product-detail .boardWrite table th { padding:6px 0 5px 16px; text-align:left; vertical-align:top; }
.xans-product-detail .boardWrite table th:before { overflow:hidden; content:""; position:relative; left:-10px; display:inline-block; width:3px; height:7px; margin-right:-3px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_boardwrite_th.png") no-repeat 0 0; background-size:100% 100%; }
.xans-product-detail .boardWrite table td { padding:5px 0 5px 8px; vertical-align:top; }
.xans-product-detail .boardWrite label { margin:0 10px 0 0; }
.xans-product-detail .boardWrite label:first-child { margin-left:0; }
.xans-product-detail .boardWrite select { margin-right:4px; white-space:nowrap; }
.xans-product-detail .boardWrite input[type="text"], input[type="password"] { margin-bottom:2px; }
.xans-product-detail .boardWrite td #quantity { width:40px; text-align:right; }
.xans-product-detail .boardWrite td img { width:26px; vertical-align:middle; cursor:pointer; }
/* 상품상세 > 세트상품 및 추가구성상품 */
.xans-product-detail .productSet { margin:-1px 0 0; border-top:1px solid #434447; border-bottom: 1px solid #434447; background-color:#f4f4f4; }
.xans-product-detail .productSet .title { display:block; padding:0 7px; border-top:2px solid #434446; border-bottom:1px solid #cecece; background:#dfdfe1; cursor:pointer; }
.xans-product-detail .productSet .title span { display:block; padding:10px 0; font-size:12px; background: url("http://img.echosting.cafe24.com/design/skin/mobile/ico_toggle_arow_up.png") right 50% no-repeat; background-size: 10px 6px; }
.xans-product-detail .productSet .product > li { position:relative; padding:7px 7px 8px 15px; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb; }
.xans-product-detail .productSet .product img { max-width:100%; }
.xans-product-detail .productSet .product .information { overflow:hidden; padding:5px 4px 0 0; }
.xans-product-detail .productSet .product .name { margin:0 4px 3px 0; font-size:12px; line-height:1.25; }
.xans-product-detail .productSet .product .name a { color:#1e222d; word-wrap:break-word; }
.xans-product-detail .productSet .product .qty { font-size:11px; color:#8f8f91; }
.xans-product-detail .productSet .product .price { margin:0 0 2px; font-size:13px; font-family:Tahoma; font-weight:bold; color:#f60; line-height:1.25; word-wrap:break-word; }
.xans-product-detail .productSet .product .salePrice { font-size:13px; font-family:Tahoma; font-weight:bold; color:#66676a; }
.xans-product-detail .productSet .product .option table { table-layout:fixed; width:100%; }
.xans-product-detail .productSet .product .option th,
.xans-product-detail .productSet .product .option td { height:auto; font-size:12px; line-height:1.25; }
.xans-product-detail .productSet .product .option th { padding:5px 5px 5px 10px; font-weight:normal; text-align:left; }
.xans-product-detail .productSet .product .option td { padding:2px 0; }
.xans-product-detail .productSet .product .option td .fText { width:45%; padding:3px; }
.xans-product-detail .productSet.hide .title span { display:block; padding:10px 0; font-size:12px; background: url("http://img.echosting.cafe24.com/design/skin/mobile/ico_toggle_arow_down.png") right 50% no-repeat; background-size: 10px 6px; }
.xans-product-detail .productSet.hide .product { display:none; }
.xans-product-detail .productSet table { table-layout:fixed; font-size:11px; word-wrap:break-word; }
.xans-product-detail .productSet table th { padding:6px 0 5px 16px; text-align:left; vertical-align:top; }
.xans-product-detail .productSet table th:before { overflow:hidden; content:""; position:relative; left:-10px; display:inline-block; width:3px; height:7px; margin-right:-3px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_boardwrite_th.png") no-repeat 0 0; background-size:100% 100%; }
.xans-product-detail .productSet table td { padding:5px 0 5px 8px; vertical-align:top; }
.xans-product-detail .productSet label { margin:0 10px 0 0; }
.xans-product-detail .productSet label:first-child { margin-left:0; }
.xans-product-detail .productSet select { margin-right:4px; white-space:nowrap; }
.xans-product-detail .productSet input[type="text"], input[type="password"] { margin-bottom:2px; }
.xans-product-detail .productSet td #quantity { width:40px; text-align:right; }
.xans-product-detail .productSet td img { width:26px; vertical-align:middle; cursor:pointer; }
/* 상품상세 > 총 상품 */
#totalProducts table { margin:0 0 20px; border-collapse:separate; }
#totalProducts thead th { width:0; height:0; padding:0; font-size:0; line-height:0; }
#totalProducts tbody th { vertical-align:middle; }
#totalProducts tbody td { padding:3px 0 5px; border-bottom:1px dotted #a1a1a3; font-size:12px; color:#5f5f5f; line-height:16px; vertical-align:middle; word-wrap:break-word; word-break:break-all; }
#totalProducts tbody td img { vertical-align:middle; }
#totalProducts tbody tr td:nth-child(2) { text-align:right; }
#totalProducts tbody tr td:nth-child(3) { text-align:center; }
#totalProducts tbody td p { margin:5px 0 0 10px; }
#totalProducts tbody td p.option,
#totalProducts tbody td p.product { padding:0 0 0 10px; }
#totalProducts tbody td p.option strong,
#totalProducts tbody td p.product strong { font-weight:normal; color:#1c1c1c }
#totalProducts tbody td p.option:before,
#totalProducts tbody td p.product:before { overflow:hidden; content:""; position:relative; left:-10px; display:inline-block; width:3px; height:7px; margin-right:-3px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_boardwrite_th.png") no-repeat 0 0; background-size:100% 100%; }
#totalProducts input[type=number] { width:85px; }
#totalProducts tbody td .quantity input { width:23px; height:19px; padding:0 5px; line-height:19px; border:1px solid #e9e9e9; border-top:1px solid #c5c5c5; border-left:1px solid #c5c5c5; *margin-top:-1px; }
#totalProducts tbody td .price { display:block; margin:0 0 6px; font-size:13px; font-family:Tahoma; color:#ff6600; }
#totalProducts tbody td .mileage { display:block; font-size:11px; color:#212530; white-space:nowrap; }
#totalProducts tbody td .soldOut { color:#e84f20; }
#totalProducts tfoot td { padding:17px 9px 15px; border-bottom:1px dotted #a1a1a3; font-size:13px; color:#212530; vertical-align:middle; background:#f5f5f6; }
#totalProducts tfoot td .total { float:right; }
#totalProducts tfoot td .total strong { font-family:Tahoma; color:#ff6600; }