상품비교 수량/옵션 디자인 깨짐과 추가옵션 표시 안되는 문제
설명
(뉴)상품스킨과 기존스킨의 기획전 소스가 달라 수량/옵션 항목의 디자인 깨짐과 추가옵션이 표시되지 않는 현상입니다.
페이지가 정상적으로 표시 되려면 아래와 HTML 수정 및 CSS 추가가 필요합니다.
처리대상
1. 기존 상품관리 스킨 그대로 (뉴)상품관리로 이전하신 사용자
2. 디자인관리 또는 디자인센터에서 기존 상품관리용 유/무료 디자인을 구매한 (뉴)상품관리 사용자
파일 위치
| 위치 |
파일 |
| /module/product/ |
compare.html |
| /css/module/product/ |
compare.css |
HTML 수정
기존스킨 [As-Is]
<tr class="first" module='Product_Quantity'>
<th scope="row">수량</th>
<td>{$form.quantity}</td>
<td>{$form.quantity}</td>
</tr>
<tr>
<th scope="row">옵션</th>
<td module='Product_CompareOptionList'><ul module="Product_CompareOption">
<li>{$option_name} : {$form.option}</li>
</ul></td>
</tr>
<tr>
<th scope="row">사용자옵션</th>
<td module='Product_CompareAddOptionList'><ul module="Product_CompareAddOption">
<li>{$add_option_name} : {$form.add_option}</li>
</ul></td>
</tr>
(뉴)상품스킨 [To-Be]
<tr module='Product_Quantity'>
<th scope="row">수량</th>
<td><span class="quantity">{$form.quantity}</span></td>
<td><span class="quantity">{$form.quantity}</span></td>
</tr>
<tr>
<th scope="row">옵션</th>
<td module='Product_CompareOptionList'>
<ul>
<li module="Product_CompareAddOption">{$add_option_name} : <span class="inputWrap">{$form.add_option}</span></li>
</ul>
<ul>
<li module="Product_CompareOption">
<span class="optionName">{$option_name}</span>
{$form.option}
</li>
</ul>
</td>
</tr>
CSS 추가
.xans-product-listcompare .inputWrap { display:block; margin:3px 0 0; }
.xans-product-listcompare .dataArea input, .xans-product-listcompare .dataArea select { color:#9d9d9d; white-space:nowrap; }
.xans-product-listcompare .dataArea input { height:14px; line-height:14px; }
.xans-product-listcompare .dataArea select { width:100%; margin:2px 0; }
.xans-product-listcompare .optionName { display:block; margin:0 0 3px;}
.xans-product-listcompare .dataArea select { width:100%; margin:0 0 2px; }
.xans-product-listcompare .quantity { display:inline-block; position:relative; vertical-align:middle; }
.xans-product-listcompare .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; }
.xans-product-listcompare .quantity .up { position:absolute; left:38px; top:0; }
.xans-product-listcompare .quantity .down { position:absolute; left:38px; top:10px; }
.xans-product-listcompare .mileage { display:block; margin:3px 0;}
.xans-product-compareaddoption { margin:0 0 3px; }
화면 비교
수정전
수정후
