Help Center

카페24 소식

공지사항업데이트스토어소식

[스마트디자인] 인기검색어, 최근검색어 기능 추가 안내

2014-06-11

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

쇼핑몰 운영자가 설정한 인기검색어 단어와 최근에 검색하였던 단어들을 빠르게 검색할 수 있도록
기능이 추가되었습니다.

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


■ 적용일자 : 2014-06-11 (수)

■ 업데이트 내용


더욱 빠르고 편리하게 검색할 수 있도록 인기검색어와 최근검색어 기능이 추가되었습니다.


- 인기검색어 : 쇼핑몰 운영자가 쇼핑몰어드민에서 설정한 5개 검색어
  (쇼핑몰어드민 > 상점관리 > 운영관리 > 상품검색조건설정 > 인기검색어 에서 설정할 수 있습니다.)
- 최근검색어 : 최근 1달동안 검색하였던 10개 검색어

 

※ 인기검색어는 PC쇼핑몰과 모바일쇼핑몰 모두 이용 가능하며, 최근검색어는 모바일에만 이용 가능합니다.


■ 적용 방법(PC)

- 위치 : 디자인관리 > 디자인편집하기 > 상품(product) > 상품검색(search.html)


▼ 아래 위치에 파란색 표시 소스 추가

## 상단생략 ##

<div module="search_form">

                <strong>제외검색어</strong>

                {$form.exceptkeyword}

            </div>

            <div class="popular" module="search_hotkeyword">

                <strong>인기검색어</strong>

                <p>

                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>

                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>

                </p>

            </div>

    </div>

## 하단생략 ##


■ 적용 방법(모바일)

- 위치 : 모바일쇼핑몰 > 디자인편집하기 > 레이아웃(layout) > 기본레이아웃(basic) > 공통레이아웃(layout.html)

▼ 아래 소스 삭제

## 상단생략 ##

<div class="searchForm" module="Layout_SearchHeader">

    <!--

    $category_page=/product/list.html

    -->

    <p>

        {$form.keyword}

        <button type="button" onclick="{$action_search_submit}">검색</button>

    </p>

</div>


## 하단생략 ##



▼ 아래 위치에 파란색 표시 소스 추가

## 상단생략 ##

<header id="header">

<div class="header">

        <h1 module="Layout_LogoTop"><a href="/">{$mobile_title}</a></h1>

        <p class="category"><a href="/product/category.html" class="fold">카테고리</a></p>

        <p class="search"><button type="button">검색</button></p>

    </div>

<div module="Layout_SearchHeader">

    <!--

    $category_page=/product/list.html

    -->

    <fieldset>

        <legend>검색</legend>

        <div class="searchForm">

            {$form.keyword}

            <button type="button" class="btnDelete">삭제</button>

        </div>

        <button type="button" class="btnSearch" onclick="{$action_search_submit}">검색</button>

    </fieldset>

    <ul class="searchTab {$hot_use_display|display}">

        <li class="selected"><a href="#none">인기 검색어</a></li>

        <li><a href="#none">최근 검색어</a></li>

    </ul>

    <h2 id="{$keyword_title_id}">최근 검색어</h2>

    <div module="search_hotkeyword">

        <ul>

            <li><a href="{$hot_keyword_url}">{$hot_keyword_name}</a></li>

            <li><a href="{$hot_keyword_url}">{$hot_keyword_name}</a></li>

        </ul>

    </div>

    <div module="search_recentkeyword">

        <p class="{$recent_none_display|display}">최근 검색어가 없습니다.</p>

        <ul class="{$recent_list_display|display}">

            <li>

                <a href="{$recent_keyword_url}">{$recent_keyword_name}</a>

                <button type="button" class="btnDelete" onclick="{$recent_keyword_remove}">삭제</button>

            </li>

            <li>

                <a href="{$recent_keyword_url}">{$recent_keyword_name}</a>

                <button type="button" class="btnDelete" onclick="{$recent_keyword_remove}">삭제</button>

            </li>

        </ul>

        <div class="button">

            <button type="button" class="btnDeleteAll" onclick="{$recent_keyword_remove_all}">검색기록 전체삭제</button>

        </div>

    </div>
</div>


## 상단생략 ##



▼ 아래 소스 수정 (AS-IS를 TO-BE로 변경)

## 상단생략 ##

<!-- As is -->

<div class="multishop" module="Layout_multishopList">..</div>

<p class="member" module="Layout_orderBasketcount">..</p>

<!-- To be -->

<div class="memberArea">

    <div class="multishop" module="Layout_multishopList">..</div>

    <p class="member" module="Layout_orderBasketcount">..</p>

</div>


## 하단생략 ##



- 위치 : 모바일쇼핑몰 > 디자인편집하기 > 레이아웃(layout) > 기본레이아웃(basic) > css > layout.css

▼ 소스 삭제

## 상단생략 ##

#header { position:relative; z-index:10; }


## 하단생략 ##



▼ 소스 삭제

## 상단생략 ##

#header .searchForm { z-index:2; display:none; position:absolute; top:45px; left:0; width:100%; height:30px; padding:0 0 5px; background-color:#fff; }

#header .searchForm p { margin:0 62px 0 10px; padding:0 0 0 30px; font-size:0; line-height:0; border:1px solid #a1a1a3; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_search_form.png") no-repeat 5px 50%; background-size:18px 18px; border-radius:3px; }

#header .searchForm p input[type="text"] { width:100%; height:24px; padding:0; line-height:24px; border:0; }

#header .searchForm p button {

    position:absolute; right:10px; top:0px; width:55px; height:26px; margin:0; font-size:12px; color:#212530; border:1px solid #6b6c70;

    border-radius:4px; outline-style:none; cursor:pointer;

    background:#fff -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));

    background:#fff -moz-linear-gradient(top, #fff, #eee);


## 하단생략 ##



▼ 아래 위치에 파란색 표시 소스 추가

## 상단생략 ##

#header .header {

    position:relative; height:40px; text-align:center; background:#696a6e;

box-shadow: 0 3px 3px #919191;

background:#696a6e -webkit-gradient(linear, left top, left bottom, from(#696a6e), to(#444447));

background:#696a6e -moz-linear-gradient(top,  #696a6e, #444447);

z-index:100;


## 하단생략 ##



▼ 아래 위치에 파란색 표시 소스 추가

## 상단생략 ##

#header .dimmed { display:none; position:fixed; left:0px; top:0; right:0px; bottom:0px; z-index:99; background:rgba(0,0,0,0.7); }

#header .xans-layout-searchheader { display:none; overflow:hidden; position:absolute; top:40px; z-index:100; width:100%; padding:5px 0 0; background-color:#fff; box-shadow:0 3px 3px #919191 inset; }

#header .xans-layout-searchheader .btnDelete { overflow:hidden; width:19px; height:19px; padding:0; border:0; text-indent:100%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_delete.gif") no-repeat 0 0; background-size:19px 19px; }

#header .xans-layout-searchheader fieldset { margin:0 62px 0 10px; padding:0 0 0 30px; font-size:0; line-height:0; border:1px solid #a1a1a3; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_search_form.png") no-repeat 5px 50%; background-size:18px 18px; border-radius:3px; }

#header .xans-layout-searchheader fieldset input[type="text"] { width:100%; height:24px; padding:0; line-height:24px; border:0; }

#header .xans-layout-searchheader fieldset .btnSearch {

    position:absolute; right:10px; top:5px; width:55px; height:26px; margin:0; font-size:12px; color:#212530; border:1px solid #6b6c70;

    border-radius:4px; outline-style:none; cursor:pointer;

    background:#fff -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));

    background:#fff -moz-linear-gradient(top, #fff, #eee);

}

#header .xans-layout-searchheader .searchForm { position:relative; padding:0 30px 0 0; }

#header .xans-layout-searchheader .searchForm .btnDelete { position:absolute; right:6px; top:2px; }

#header .xans-layout-searchheader h2 { height:36px; margin:5px 0 0; padding:0 0 0 14px; border-bottom:1px solid #000; color:#000; font-size:13px; line-height:36px; }

#header .xans-layout-searchheader .searchTab { margin:5px 0 0; border-top:1px solid #ececec; border-bottom:1px solid #919aaa; }

#header .xans-layout-searchheader .searchTab:after { content:""; display:block; clear:both; }

#header .xans-layout-searchheader .searchTab li { float:left; width:50%; }

#header .xans-layout-searchheader .searchTab li a { display:block; height:34px; line-height:34px; color:#1b1b1b; font-size:13px; text-align:center; background:#fff; }

#header .xans-layout-searchheader .searchTab li.selected a { position:relative; top:-1px; margin:0 0 -1px; border-top:1px solid #919aaa; color:#fff; font-weight:bold; background:#919aaa; }

#header .xans-layout-searchheader .xans-search-hotkeyword { background:#f8f8f8; }

#header .xans-layout-searchheader .xans-search-hotkeyword ul { overflow-y:auto; max-height:278px; padding:7px 14px 7px 6px; border-bottom:1px solid #d5d5d5; }

#header .xans-layout-searchheader .xans-search-hotkeyword li { display:inline-block; vertical-align:top; }

#header .xans-layout-searchheader .xans-search-hotkeyword li a { padding:0 12px 0 8px; border-right:1px solid #757575; color:#1b1b1b; font-size:13px; line-height:26px; }

#header .xans-layout-searchheader .xans-search-hotkeyword li:last-child a { border:0; }

#header .xans-layout-searchheader .xans-search-recentkeyword { background:#f8f8f8; }

#header .xans-layout-searchheader .xans-search-recentkeyword p { padding:8px 14px; border-bottom:1px solid #d5d5d5; color:#777; font-size:13px; }

#header .xans-layout-searchheader .xans-search-recentkeyword ul { overflow-y:auto; max-height:252px; }

#header .xans-layout-searchheader .xans-search-recentkeyword li { position:relative; padding:0 39px 0 0; border-bottom:1px solid #d5d5d5; }

#header .xans-layout-searchheader .xans-search-recentkeyword li a { display:block; padding:8px 0 8px 14px; color:#1b1b1b; font-size:13px; }

#header .xans-layout-searchheader .xans-search-recentkeyword li .btnDelete { position:absolute; right:14px; top:8px; }

#header .xans-layout-searchheader .xans-search-recentkeyword .button { padding:7px 0; text-align:center; border-bottom:1px solid #d5d5d5; background:#f1f1f1; }

#header .xans-layout-searchheader .xans-search-recentkeyword .button .btnDeleteAll {

    display:inline-block; height:26px; line-height:26px; margin:0; padding:0 18px; border:1px solid #000;

    font-size:12px; cursor:pointer; vertical-align:middle; color:#000;

    background-color:#fff;

    border-radius:3px; -moz-box-sizing:border-box; box-sizing:border-box;

}

#header .memberArea { position:relative; z-index:10; }

 

#header .member { margin:8px 10px 0px; text-align:right; border-bottom:1px dashed #b4b4b6; }


                                                                  ## 하단생략 ##






 



---------------------------------------------------------------------------------------------------
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]

이전글

[상점관리] 멀티쇼핑몰 중국어(번체) 서비스 오픈 안내

2014-06-11

다음글

[모바일쇼핑몰] 상품 상세정보 위치변경 및 더보기 기능추가 안내

2014-06-11