확대보기 세트상품 디자인 및 기능 문제
설명
(뉴)상품에서 세트상품이 추가되었습니다.
처리대상
1. 기존 상품관리 스킨 그대로 (뉴)상품관리로 이전하신 사용자
어드민 설정
- 세트상품 : 상품관리 > 상품등록 > 세트상품 등록
파일 위치
위치
파일
/module/product/
image_zoom.html
/css/module/product/
zoomPackage.css
HTML
삭제 부분
<h3>{$name|cut:20}
<span>{$soldout_icon} {$recommend_icon} {$new_icon} {$mileage_icon} {$product_icons}</span>
</h3>
<p class="delivery {$delvtype_display|display}">({$eng_name}) 해외배송 가능</p>
<table border="1" summary="">
<caption>{$name} 기본 정보</caption>
<tbody>
<tr class="{$product_price_display|display}">
<th scope="row">판매가</th>
<td>
<strong id="span_product_price_text" class="{$product_price_class}">{$product_price}</strong>{$txt_product_price}
</td>
</tr>
<tr class="{$custom_price_display|display}">
<th scope="row">소비자가</th>
<td><strong class="sale">{$product_custom|numberformat}</strong></td>
</tr>
<tr class="{$mileage_content_display|display}">
<th scope="row">적립금</th>
<td>
<ul class="mileage">
<li class="{$mileage_display|display}"><span id="span_mileage_text">{$mileage_value|numberformat}</span> <span class="{$mileage_percent_display|display}">({$mileage_percent}%)</span></li>
<li class="{$cash_mileage_display|display}"><img src="{$cash_mileage_icon}" alt="무통장 결제시 적립금" /> {$cash_mileage_value|numberformat} 원<span class="{$cash_mileage_percent_display|display}">({$cash_mileage_percent} %)</span></li>
<li class="{$card_mileage_display|display}"><img src="{$card_mileage_icon}" alt="카드 결제시 적립금" /> {$card_mileage_value|numberformat} 원<span class="{$card_mileage_percent_display|display}">({$card_mileage_percent} %)</span></li>
<li class="{$tcash_mileage_display|display}"><img src="{$tcash_mileage_icon}" alt="실시간 계좌 이체시 적립금" /> {$tcash_mileage_value|numberformat} 원 <span class="{$tcash_mileage_percent_display|display}">({$tcash_mileage_percent} %)</span></li>
<li class="{$mileage_mileage_display|display}"><img src="{$mileage_mileage_icon}" alt="적립금 결제시 적립금" /> {$mileage_mileage_value|numberformat} 원<span class="{$mileage_mileage_percent_display|display}">({$mileage_mileage_percent} %)</span></li>
<li class="{$cell_mileage_display|display}"><img src="{$cell_mileage_icon}" alt="휴대폰 결제시 적립금" /> {$cell_mileage_value|numberformat} 원<span class="{$cell_mileage_percent_display|display}">({$cell_mileage_percent} %)</span></li>
</ul>
</td>
</tr>
<tr class="{$naver_mileage_display|display}">
<th scope="row">제휴 적립금</th>
<td>
네이버 마일리지 {$naver_mileage_rate} 적립
<img src="{$sNpIconUrl}" id="imgNaverMileageHelp" onclick="{$action_np_help}" />
</td>
</tr>
<tr class="{$allotment_display|display}">
<th scope="row">무이자할부</th>
<td>{$allotment_period}<br />{$allotment_card}</td>
</tr>
<tr class="{$manu_display|display}">
<th scope="row">제조사</th>
<td>{$manu_name}</td>
</tr>
<tr class="{$made_display|display}">
<th scope="row">원산지</th>
<td>{$made_in}</td>
</tr>
<tr>
<th scope="row">상품코드</th>
<td>{$product_code}</td>
</tr>
<tr class="{$expiration_date_display|display}">
<th scope="row">유효기간</th>
<td>{$expiration_date}</td>
</tr>
<tr>
<th scope="row">수량</th>
<td>
<p class="quantity">{$form.quantity}<img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_quantity_up.gif" alt="up" class="{$quantity_up_class}" /><img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_quantity_down.gif" alt="down" class="{$quantity_down_class}" /></p>
</td>
</tr>
<tr class="{$delvtype_display|display}">
<th scope="row">국내/해외배송</th>
<td>
<span class="delivery">
<label for="chkDelivery1">{$form.delvtypeA} 국내배송</label>
<label for="chkDelivery2">{$form.delvtypeB} 해외배송</label>
</span>
</td>
</tr>
</tbody>
<tbody module="product_optionlist">
<tr>
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr>
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
</tbody>
<tbody module="product_addoptionlist">
<tr>
<th scope="row">{$add_option_name}</th>
<td>{$form.add_option}</td>
</tr>
<tr>
<th scope="row">{$add_option_name}</th>
<td>{$form.add_option}</td>
</tr>
</tbody>
</table>
추가 부분
<h3>{$name|cut:20}
<span>{$soldout_icon} {$recommend_icon} {$new_icon} {$img_mileage_icon} {$product_icons}</span>
<span class="{$delvtype_display|display}">(해외배송 가능상품)</span>
</h3>
<div module="product_detaildesign">
<!--
출력 갯수 지정 변수, 없으면 설정된 전체가 나옵니다.
count = 10
-->
<table border="1" summary="">
<caption>{$name} 기본 정보</caption>
<tbody>
<tr class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
<tr class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
</tbody>
</table>
</div>
<table border="1" summary="">
<caption>SNS 상품홍보</caption>
<tbody>
<tr class="{$sns_display|display}">
<th scope="row">SNS 상품홍보</th>
<td class="social">{$facebook_icon} {$twitter_icon} {$me2day_icon}</td>
</tr>
</tbody>
</table>
<div id="zoom_wrap"></div>
<p class="{$naver_mileage_exception_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/product/txt_naver.gif" alt="개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다." /></p>
<!-- //상세정보 내역 -->
<table border="1" summary="">
<caption>상품 옵션</caption>
<tbody>
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" 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>
</tbody>
</table>
<p class="info {$limit_display|display}">(최소주문수량 {$minimum_limit}개 이상<span class="{$maximum_limit_display|display}"> / 최대주문수량 {$maximum_limit}개 이하</span>)</p>
<div class="productSet normal" module="product_setproduct">
<div class="product">
<h4>{$product_name}</h4>
<div class="seperate">
<table border="1" summary="">
<caption>기본 정보</caption>
<tbody>
<tr class="{$product_price_display|display}">
<th scope="row">판매가</th>
<td class="{$product_price_del}">{$product_price}</td>
</tr>
<tr class="{$product_sale_price_display|display}">
<th scope="row">할인판매가</th>
<td>{$product_sale_price}</td>
</tr>
</tbody>
</table>
</div>
<div class="option">
<table border="1" summary="">
<caption>옵션 정보</caption>
<tbody>
<tr module="product_addoption">
<th>{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr module="product_option">
<th>{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th>상품선택</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="product">
<h4>{$product_name}</h4>
<div class="seperate">
<table border="1" summary="">
<caption>기본 정보</caption>
<tbody>
<tr class="{$product_price_display|display}">
<th scope="row">판매가</th>
<td class="{$product_price_del}">{$product_price}</td>
</tr>
<tr class="{$product_sale_price_display|display}">
<th scope="row">할인판매가</th>
<td>{$product_sale_price}</td>
</tr>
</tbody>
</table>
</div>
<div class="option">
<table border="1" summary="">
<caption>옵션 정보</caption>
<tbody>
<tr module="product_addoption">
<th>{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="현재글자수/최대글자수">[ <strong class="length">0</strong> / {$option_maxlength} ]</span>
</td>
</tr>
<tr module="product_option">
<th>{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th>상품선택</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="{$total.total_id}" class="{$total.total_display|display}">
<p class="info {$single_item_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/product/ico_information.gif" alt="" /> 수량을 선택해주세요.</p>
<p class="info {$several_item_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/product/ico_information.gif" alt="" /> 위 옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.</p>
<table border="1" summary="">
<caption>상품 목록</caption>
<colgroup>
<col style="width:231px;" />
<col style="width:80px;;" />
<col style="width:90px;" />
</colgroup>
<thead>
<tr>
<th scope="col">상품명</th>
<th scope="col">상품수</th>
<th scope="col">가격</th>
</tr>
</thead>
<tbody class="{$quantity_display|display}">
<tr>
<td>{$name}</td>
<td>
<span class="quantity">
{$quantity}
<a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_count_up.gif" alt="수량증가" class="{$quantity_up_class} up" /></a>
<a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_count_down.gif" alt="수량감소" class="{$quantity_down_class} down" /></a>
</span>
</td>
<td class="right"><span class="{$total.quantity_price}">{$product_price}</span> <span class="mileage {$mileage_display|display}">(<img src="{$mileage_mileage_icon}" /> <span class="{$total.mileage_price}">{$mileage_value}</span>)</span></td>
</tr>
</tbody>
<!-- 참고 : 옵션선택 또는 세트상품 선택시 상품이 추가되는 영역입니다. 쇼핑몰 화면에는 아래와 같은 마크업구조로 표시됩니다. 삭제시 기능이 정상동작 하지 않습니다.-->
<tbody>
<!-- tr>
<td>
<p class="product">
$상품명<br />
<span>$옵션</span>
</p>
</td>
<td>
<span class="quantity">
<input type="text" class="quantity_opt" />
<a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_count_up.gif" alt="수량증가" class="up" /></a>
<a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_count_down.gif" alt="수량감소" class="down" /></a>
</span>
<a href="#none"><img src="http://img.echosting.cafe24.com/design/skin/default/product/btn_price_delete.gif" alt="삭제" class="option_box_del" /></a>
</td>
<td class="right">
<span>$가격</span>
<span class="mileage">(<img src="http://img.echosting.cafe24.com/design/common/icon_sett04.gif" /> <span class="mileage_price">$적립금</span>)</span>
</td>
</tr -->
</tbody>
<!-- //참고 -->
<tfoot>
<tr>
<td colspan="3"><strong>총 상품금액</strong>(수량) : <span class="{$total.total_cnt}"><strong><em>0</em></strong> (0개)</span></th>
</tr>
</tfoot>
</table>
</div>
CSS 추가
#popup { width:975px; }
.xans-product-zoom .infoArea td .period { display:block; margin:7px 0 0; font-size:11px; color:#8c8982; }
.xans-product-zoom .infoArea .xans-product-action {width:396px; border-top:1px solid #000000; }
#totalProducts { margin:24px 0 0 0; }
#totalProducts .info { padding:0 0 7px 5px; border-bottom:1px solid #000; font-size:11px; color:#80aeef; line-height:14px; }
#totalProducts .info img { margin:-1px 0 0 0; }
#totalProducts table { margin:0; }
#totalProducts table .left { text-align:left; }
#totalProducts table .center { text-align:center; }
#totalProducts table .right { padding-right:9px; text-align:right; }
#totalProducts thead th { width:0; height:0; padding:0; font-size:0; line-height:0; }
#totalProducts .soldOut { color:#e84f20; }
#totalProducts tbody th { vertical-align:middle; }
#totalProducts tbody td { padding:5px 0; border-top:1px solid #ebebeb; font-size:11px; color:#5f5f5f; line-height:16px; vertical-align:middle; word-wrap:break-word; word-break:break-all; }
#totalProducts tbody tr td:first-child { padding-left:4px; }
#totalProducts tbody tr:first-child td { border-top:0; }
#totalProducts tbody td p { margin:5px 0; padding:0 10px 0 0; }
#totalProducts tbody td img { vertical-align:middle; }
#totalProducts tbody td .option { color:#80aeef; }
#totalProducts tbody td .quantity { display:inline-block; position:relative; vertical-align:middle; }
#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 .quantity .up { position:absolute; left:38px; top:0; }
#totalProducts tbody td .quantity .down { position:absolute; left:38px; top:10px; }
#totalProducts tbody td .mileage { display:block; font-size:11px; white-space:nowrap; }
#totalProducts tfoot + tbody tr:first-child td { border:0; }
#totalProducts tfoot td { padding:11px 9px 13px 9px; font-size:12px; color:#313131; text-align:right; vertical-align:middle; background:#f5f5f5; }
#totalProducts tfoot td .total { color:#4d75da; }
#totalProducts tfoot td .total em { font-style:normal; font-size:19px; font-family:Arial, sans-serif; }
#totalProducts + .xans-product-action { margin-top:0; }
.infoArea .productSet { margin:10px 0 0; }
.infoArea .productSet:after { content:""; display:block; clear:both; }
.infoArea .productSet h4 { margin:0 0 13px 0; font-size:12px; }
.infoArea .productSet table { margin:0; font-size:11px; }
.infoArea .productSet th { width:80px; padding:3px 0 4px 0; color:#676767; }
.infoArea .productSet td { padding:3px 10px 4px 0; color:#8f8f91; }
.infoArea .productSet td.del { text-decoration:line-through; }
.infoArea .productSet .product { margin:-1px 0 0 0; padding:20px 13px 3px 130px; border:1px solid #cccdcf; vertical-align:top; background:#ecedef; }
.infoArea .productSet .product .thumbnail { float:left; width:70px; height:70px; margin:0 0 0 -101px; border:1px solid #cacaca; }
.infoArea .productSet .product .thumbnail img { width:70px; height:70px; }
.infoArea .productSet .seperate { margin:0 0 6px 0; padding:0 0 4px 0; border-bottom:1px dotted #b0b1b3; }
.infoArea .productSet .option { padding-bottom:12px; }
.infoArea .productSet .option th { padding-top:5px; }
.infoArea .productSet .option td { padding:2px 0 2px 0; }
.infoArea .productSet .info { padding:0 0 0 58px; font-size:11px; color:#8f8f91; }
.infoArea .productSet.normal .product { padding-left:18px; }
.infoArea .productSet.normal .product th { width:120px; }
.infoArea .productSet.normal .seperate { margin-top:13px; }
.infoArea .productSet.normal .xans-product-addoption td .inputWrap { display:inline-block; width:190px; }
화면 비교
수정전
수정후
