Help Center
카페24 소식
[상품관리] 상품 비교기능 디자인 수정 건 추가
2011-09-08
안녕하세요. 카페24 운영도우미입니다.
고객이 여러개의 상품을 비교 후 구매를 할 수 있도록 상품 비교 기능을 제공하고 있는데
디자인 부분에 수정해야 할 부분이 있어서 공지합니다.
이미 사용중이신 운영자님은 기존대로 사용하여 주시고, 이 기능을 사용하고자 하는 운영자님께서는 아래 내용을 참고하여 주세요.
1. 제목 : 상품 비교기능 디자인 수정 건 추가
2. 디자인 수정
① HTML 디자인설정 > 상품분류 > 일반 상품 > 일반상품 타이틀
<a href="/front/php/category.php?cate_no={{$cate_no}}&sort_method=5#normal_list" STYLE="color:{{$font_array.c_6.font_color}};font-size:{{$font_array.c_6.font_size}};font-family:{{$font_array.c_6.font_type}};">신상품</a>
</td>
<td> </td>
</tr>
</table>
</td>
아래에 추가
{{* 상품비교검색 버튼 *}}
<td align=right width="30">{{$prdt_comp_btn}}</td>
② 사용하시는 상품분류 형태에 아래와 같이 수정
HTML 디자인설정 > 상품분류 > 1단 목록형 > 상품목록
HTML 디자인설정 > 상품분류 > 1단 강조형 > 상품목록
HTML 디자인설정 > 상품분류 > 2단 세로형 > 상품목록
HTML 디자인설정 > 상품분류 > 2단 가로형 > 상품목록
HTML 디자인설정 > 상품분류 > 3단 가로형 > 상품목록
HTML 디자인설정 > 상품분류 > 4단 가로형 > 상품목록
HTML 디자인설정 > 상품분류 > 사용자지정 세로형 > 상품목록
HTML 디자인설정 > 상품분류 > 사용자지정 가로형 > 상품목록
{{* 상품비교검색 체크박스 *}}{{$prdt_comp_chk}}->추가되는 부분
<a href="/front/php/product.php?product_no={{$product_no}}&main_cate_no={{$main_cate_no}}&display_group={{$display_group}}">
{{$product_name_font}}{{$product_name}}</font></a>{{$common_img}}<br>
{{$product_add_info1}}
3. 디자인 수정(스마트 디자인)
① 편집창 > 화면추가 > 상품(product) 선택해서 저장경로 /product에 compare.html 라는 이름으로 html파일을 생성하고 아래 소스를 붙여넣기하고 저장합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="path">
<span>현재 위치</span>
<ol>
<li><a href="/">홈</a></li>
<li title="현재 위치">상품비교하기</li>
</ol>
</div>
<div class="titleArea">
<h2>상품 비교하기</h2>
</div>
<div module="Product_ListCompare" class="ec-base-table gBorder">
<!--@css(/css/module/product/compare.css)-->
<!--
$max_count = auto
max_count는 auto면 검색한 상품 수량만큼, 1~4는 해당 숫자 만큼, 그외의 모든 값은 4로 고정
정상적인 반복을 위해 <td>를 두번이상 입력해주세요.
-->
<table border="1" summary="">
<tbody>
<!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
<tr module='Product_Productimagetiny'>
<th scope="row">상품이미지</th>
<td class="center">
<span class="thumb"><a href="{$link_product_detail}"><img src="{$Productimagetiny}" alt="" /></a></span>
<input type="checkbox" class="{$product_select_class}" />
</td>
<td class="center">
<span class="thumb"><a href="{$link_product_detail}"><img src="{$Productimagetiny}" alt="" /></a></span>
<input type="checkbox" class="{$product_select_class}" />
</td>
</tr><!-- //참고 -->
<tr module='Product_Productname'>
<th scope="row">상품명</th>
<td>
<strong class="prdName">{$Productname}</strong>
<!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
<ul class="item" module='Product_CompareSetList' class="{$is_new_product|display}">
<li>{$product_name}({$product_count})</li>
<li>{$product_name}({$product_count})</li>
</ul><!-- //참고 -->
</td>
<td>
<strong class="prdName">{$Productname}</strong>
<!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
<ul class="item" module='Product_CompareSetList' class="{$is_new_product|display}">
<li>{$product_name}({$product_count})</li>
<li>{$product_name}({$product_count})</li>
</ul><!-- //참고 -->
</td>
</tr>
<tr module='Product_Productcustom'>
<th scope="row">소비자가</th>
<td><em id="product_price_nf{$product_no}">{$Productcustom}</em></td>
<td><em id="product_price_nf{$product_no}">{$Productcustom}</em></td>
</tr>
<tr module='Product_Productprice'>
<th scope="row">판매가</th>
<td><span class="txtEm"><strong id="product_price_nf{$product_no}">{$Productprice}</strong></span>{$product_tax_type_text}</td>
<td><span class="txtEm"><strong id="product_price_nf{$product_no}">{$Productprice}</strong></span>{$product_tax_type_text}</td>
</tr>
<!-- 참고 : 뉴상품관리 전용 모듈입니다. 뉴상품관리 이외의 곳에서 사용하면 정상동작하지 않습니다. -->
<tr module='Product_Productsaleprice'>
<th scope="row">할인판매가</th>
<td><span class="txtEm"><strong id="product_price_nf{$product_no}">{$Productsaleprice}</strong></span></td>
<td><span class="txtEm"><strong id="product_price_nf{$product_no}">{$Productsaleprice}</strong></span></td>
</tr><!-- //참고 -->
<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"><span class="optionName">{$add_option_name}</span> <span class="fWidthFull">{$form.add_option}</span></li>
</ul>
<ul>
<li module="Product_CompareOption"><span class="optionName">{$option_name}</span> <span class="fWidthFull">{$form.option}</span></li>
</ul>
</td><!-- //참고 -->
</tr>
<tr module='Product_Model'>
<th scope="row">모델명</th>
<td>{$Model}</td>
<td>{$Model}</td>
</tr>
<tr module='Product_Madein'>
<th scope="row">원산지</th>
<td>{$Madein}</td>
<td>{$Madein}</td>
</tr>
<tr module='Product_Manuname'>
<th scope="row">제조사</th>
<td>{$Manuname}</td>
<td>{$Manuname}</td>
</tr>
<tr module='Product_Brand'>
<th scope="row">브랜드</th>
<td>{$Brand}</td>
<td>{$Brand}</td>
</tr>
<tr module='Product_Allotperiod'>
<th scope="row">무이자할부</th>
<td>{$Allotperiod} {$Allotcard}</td>
<td>{$Allotperiod} {$Allotcard}</td>
</tr>
<tr module='Product_Mileage'>
<th scope="row">{$mileage_name}</th>
<td>{$Mileage}</td>
<td>{$Mileage}</td>
</tr>
<tr module='Product_Selfproductcode'>
<th scope="row">자체상품코드</th>
<td>{$Selfproductcode}</td>
<td>{$Selfproductcode}</td>
</tr>
<tr module='Product_Description'>
<th scope="row">상품간략설명</th>
<td>{$Description}</td>
<td>{$Description}</td>
</tr>
</tbody>
</table>
<p class="description {$description_display|display}">세트상품의 경우 상품비교는 가능하지만 장바구니 담기 및 주문은 불가능합니다.</p>
<!-- 참고 : 뉴상품관리 전용 변수가 포함되어 있습니다. 뉴상품관리 이외의 곳에서 사용하면 일부 변수가 정상동작하지 않을 수 있습니다. -->
<div class="ec-base-button">
<span class="gLeft">
<span class="{$basket_display|display}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_cart_go.gif" alt="장바구니담기" class='{$basket_class}' /></span>
<span class="{$wishlist_display|display}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_wish.gif" alt="관심상품등록" class='{$wishlist_class}' /></span>
</span>
<span class="gRight">
<span class="{$buy_display|display}"><a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_buy.gif" alt="바로구매하기" class='{$buy_class}' /></a></span>
</span>
</div><!-- //참고 -->
</div>
② (/css/module/product/compare.css) 이 경로에 compare.css라는 css 파일도 생성하고 아래 소스 붙여넣기 한 후 저장합니다.
.xans-product-listcompare th { width:116px; }
.xans-product-listcompare td { width:auto; word-wrap:break-word; word-break:break-all; }
.xans-product-listcompare td em { font-style:normal; }
.xans-product-listcompare .prdName { color:#2e2e2e; }
.xans-product-listcompare .optionName { display:block; margin:3px 0 0; }
.xans-product-listcompare .xans-product-productimagetiny img { max-width:129px; border:1px solid #d6d6d6; vertical-align:top; }
.xans-product-listcompare .xans-product-productimagetiny .thumb { display:block; margin:0 0 6px; }
.xans-product-listcompare .quantity { display:inline-block; position:relative; width:50px; vertical-align:top; }
.xans-product-listcompare .quantity input { width:22px; height:19px; padding:0 2px 0 3px; line-height:19px; border-radius:3px 0 0 3px; }
.xans-product-listcompare .quantity .up { position:absolute; left:28px; top:0; }
.xans-product-listcompare .quantity .down { position:absolute; left:28px; top:10px; }
.xans-product-listcompare ul.item { margin:3px 0 0; color:#757575; }
.xans-product-listcompare ul.item li { margin:2px 0 0; line-height:18px; }
.xans-product-listcompare .mileage { display:block; margin:3px 0;}
.xans-product-listcompare .description { padding:5px 0 0; color:#008bcc; }
.xans-product-listcompare .ec-base-button { margin:10px 0; }
③ 상품분류페이지에 비교 버튼과 체크박스를 추가합니다.
- 상품비교 버튼 추가
<span class="compare {$product_compare_display|display}"><a href="#none" onclick="{$product_compare_action}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_compare.gif" alt="상품비교" /></a></span>
- 비교할 상품 선택할 체크박스 추가
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다.
끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터(☎1588-3413)로 문의 바랍니다
감사합니다.