Help Center

카페24 소식

[상점관리] 상품정렬조건 설정 기능 추가 안내

2014-08-13


안녕하세요, 카페24 운영도우미 입니다.

 

쇼핑몰의 상품정렬조건이 어드민 설정에 따라 적용될 수 있도록 기능이 개선되었습니다.

 

자세한 내용은 아래를 참조해 주세요. 


 

■ 적용일자 : 2014-08-13 (수)

 

■ 업데이트 내용

 

  - 변경전 : 디자인편집창에서 직접 수정
  - 변경후 : 어드민 상점관리에서 설정에 따라 자동으로 반영

 

  ▼ 관리자 설정 화면

  

 

  ▼ 쇼핑몰 적용 화면

  

 

 

■ 적용 방법

 

1. PC쇼핑몰(디자인관리 - 스마트디자인)

- 위치 : 상품검색 (/product/search.html)


▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

 <div class="searchResult">
   <p class="record">총 <strong>{$total_count}</strong> 개 의 상품이 검색되었습니다.</p>
  <ul class="listType">
       <li class="btn_order" rel='name' style='{$nameBold}' >상품명순</li>
       <li class="btn_order" rel='price' style='{$priceBold}'>높은가격순</li>
       <li class="btn_order" rel='priceasc' style='{$priceascBold}'>낮은가격순</li>
       <li class="btn_order" rel='manu_name' style='{$manu_nameBold}'>제조사순</li>
       <li class="btn_order" rel='review' style='{$reviewBold}'>사용후기</li>
   </ul>
   <ul class="listType" module="search_Orderby">
       <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li>
       <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li>
   </ul>

</div>

 

- 위치 : 상품분류 (/product/list.html)


▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

 <ul id="type">
   <li><a href="{$param_3}" {$style_3}>낮은가격</a></li>
   <li><a href="{$param_4}" {$style_4}>높은가격</a></li>
   <li><a href="{$param_1}" {$style_1}>상품명</a></li>
   <li><a href="{$param_2}" {$style_2}>제조사</a></li>
   <li><a href="{$param_5}" {$style_5}>신상품</a></li>
   <li class="{$favor_sort_display|display}"><a href="{$param_6}" {$style_6}>인기상품</a></li>
   <li><a href="{$param_7}" {$style_7}>사용후기</a></li>
</ul>
<ul id="type" module="product_Orderby">
    <li><a href="{$param}" {$style}>{$sort_name}</a></li>
    <li><a href="{$param}" {$style}>{$sort_name}</a></li>
</ul>

 

2. PC쇼핑몰(디자인관리 - (구)디자인)

- 위치 : 상품관련화면 > 상품검색 > 검색결과리스트(c_3) > 정렬메뉴(u3)


▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

 <dl style='height:25px;padding:0px;padding:0px;float:left;'>
        <dt style='display:{{$disFavor}};margin:3px;cursor:pointer;{{$orderBold}}' onclick="document.frm.order_by.value='order';document.frm.submit()">인기도</dt>
        <dt style='display:inline;margin:3px;cursor:pointer;{{$reviewBold}}' onclick="document.frm.order_by.value='review';document.frm.submit()">상품평순</dt>
        <dt style='display:inline;margin:3px;cursor:pointer;{{$priceBold}}' onclick="document.frm.order_by.value='price';document.frm.submit()">높은가격순</dt>
        <dt style='display:inline;margin:3px;cursor:pointer;{{$priceascBold}}' onclick="document.frm.order_by.value='priceasc';document.frm.submit()">낮은가격순</dt>
        <dt style='display:inline;margin:3px;cursor:pointer;{{$nameBold}}' onclick="document.frm.order_by.value='name';document.frm.submit()">상품명순</dt>
        <dt style='display:inline;margin:3px;cursor:pointer;{{$manuBold}}' onclick="document.frm.order_by.value='manu_name';document.frm.submit()">제조사순</dt>
        {{$product_list_sort_key}}

</dl>

 

- 위치 : 상품관련화면 > 상품분류 > 일반상품(c_6) > 일반상품 타이틀(u2)


▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

{{* 일반상품의 타이틀 *}}
<a name="normal_list">
<table cellpadding=0 cellspacing=0 border=0 style="float:left">
<tr><td width=7> </td>    
<td width=10>
<img src="{{$bullet_image}}" align="absmiddle" alt="">
</td>
<td STYLE="color:{{$font_array.c_6.font_color}};font-size:{{$font_array.c_6.font_size}};font-family:{{$font_array.c_6.font_type}};">
상품건수 <B>{{$product_count}}</B> 개
</td></tr></table>    
{{* 조건별검색 버튼 *}}
<span style="float:right">{{$prdt_sel_srch}}</span>
<table width="100%" border="0" cellspacing="0" cellpadding="2" background="{{$bg_image}}">
<tr height=30 valign=bottom>
<td width="70%">
<table cellpadding=0 cellspacing=0 border=0>
<tr height=6 valign=top>
<td></td>    
<td></td>
<td align="center" style="display:{{$disFavor}}">{{$sort_arrow_6}}</td>
<td style="display:{{$disFavor}}"></td>
<td align="center">{{$sort_arrow_3}}</td>
<td></td>
<td align="center">{{$sort_arrow_4}}</td>
<td></td>    
<td align="center">{{$sort_arrow_1}}</td>
<td></td>
<td align="center">{{$sort_arrow_2}}</td>
<td></td>
<td align="center">{{$sort_arrow_5}}</td>
<td></td>    
</tr>  
<tr>
<td width=10>
<img src="{{$bullet_image}}" align="absmiddle" alt="">
</td>    
<td>정렬 :   </td>
<td style="display:{{$disFavor}}" align="center"  onMouseOver="this.style.background='{{$table_attr.td_bgcolor}}'" OnMouseOut="this.style.background=''">
<a href="/front/php/category.php?cate_no={{$cate_no}}&sort_method=6#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 style="display:{{$disFavor}}" width=15 align=center> | </td>
<td align="center"  onMouseOver="this.style.background='{{$table_attr.td_bgcolor}}'" OnMouseOut="this.style.background=''">
<a href="/front/php/category.php?cate_no={{$cate_no}}&sort_method=3#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 width=15 align=center> | </td>    
<td align="center"  onMouseOver="this.style.background='{{$table_attr.td_bgcolor}}'" OnMouseOut="this.style.background=''">
<a href="/front/php/category.php?cate_no={{$cate_no}}&sort_method=4#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 width=15 align=center> | </td>      
<td align="center"  onMouseOver="this.style.background='{{$table_attr.td_bgcolor}}'" OnMouseOut="this.style.background=''">
<a href="/front/php/category.php?cate_no={{$cate_no}}&sort_method=1#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 width=15 align=center> | </td>  
<td align="center"  onMouseOver="this.style.background='{{$table_attr.td_bgcolor}}'" OnMouseOut="this.style.background=''">    
<a href="/front/php/category.php?cate_no={{$cate_no}}&sort_method=2#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 width=15 align=center> | </td>  
<td align="center"  onMouseOver="this.style.background='{{$table_attr.td_bgcolor}}'" OnMouseOut="this.style.background=''">    
<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>
</tr>  <tr>  <td colspan="2" bgcolor="{{$tab_array.c_3.th_fgcolor}}" height=1></td>
</tr>  </table>

 

{{* 일반상품의 타이틀 *}}
<a name="normal_list">
<table cellpadding=0 cellspacing=0 border=0 style="float:left">
<tr>
<td width=7>
 
</td>              
<td width=10>
<img src="{{$bullet_image}}" align="absmiddle" alt="">
</td>
<td STYLE="color:{{$font_array.c_6.font_color}};font-size:{{$font_array.c_6.font_size}};font-family:{{$font_array.c_6.font_type}};">
상품건수 <B>{{$product_count}}</B> 개
</td>
</tr>
</table>                    
{{* 조건별검색 버튼 *}}
<span style="float:right">{{$prdt_sel_srch}}</span>    
<table width="100%" border="0" cellspacing="0" cellpadding="2" background="http://img0001.echosting.cafe24.com/front/type_b/image/home/tle_bg2.gif">
<tr height="30" valign="bottom">
{{* 상품정렬 *}}
<td width="70%">
{{$product_list_sort_key}}
</td>
{{* 상품비교검색 버튼 *}}
<td align="right" width="30%">
{{$prdt_comp_btn}}
</td>
</tr>
<tr>
<td colspan="2" bgcolor="{{$tab_array.c_3.th_fgcolor}}" height=1></td>
</tr>
</table>

 

- 위치 : 게시판관련화면New > 상품정보선택(c_1)


▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

 <td align='left' bgcolor='#FFFFFF'>
  <select name='search_type'>
    <option value="product" {{$aReq.search_type_sel.product}}>상품명</option>
    <option value="manu_name" {{$aReq.search_type_sel.manu_name}}>제조사</option>
    <option value="item_name" {{$aReq.search_type_sel.item_name}}>상품코드</option>
  </select>
{{$searchKey}}

 

3. 모바일쇼핑몰

- 위치 : 상품분류(/product/list.html), 상품분류 썸네일(/product/list_thumb.html), 상품분류 갤러리(/product/list_gallery.html)


▼ 아래와 같이 빨간색 소스 삭제, 파란색 소스를 추가합니다.

 <div module="product_normalmenu">
   <!--@css(/css/module/product/normalMenu.css)-->
   <!--@js(/js/module/product/normalMenu.js)-->
   <div class="inner">
     <p>
      <select id="selArray" name="selArray">
        <option value="">-정렬방식-</option>
        <option value="{$param_3}">낮은가격</option>
        <option value="{$param_4}">높은가격</option>
        <option value="{$param_1}">상품명</option>
        <option value="{$param_2}">제조사</option>
        <option value="{$param_5}">신상품</option>
        <option value="{$param_6}" class="{$favor_sort_display|display}">인기상품</option>
      </select>
      <select id="selArray" name="selArray" module="product_Orderby">
        <option value="{$param}">{$sort_name}</option>
        <option value="{$param}">{$sort_name}</option>
      </select>

     </p>
     <p class="button">
        <a href="/product/list_thumb.html{$params}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/btn_thumbType.png" alt="이미지형 목록으로 보기" width="18" height="18"></a>
     </p>
  </div>
</div>

 

※ 이 기능은 순차 배포이므로, 쇼핑몰마다 적용 시기가 약간 다를 수 있습니다. 이 점 양해 바랍니다.




카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
 
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]