Help Center

카페24 소식

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

[게시판관리] 게시판 모바일 기능 강화 및 글고정 기능 추가

2014-06-25

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

1.9 스마트 디자인의 게시판의 모바일 기능이 한층 강화 되고 특정 게시물을 게시판 상단에 고정시킬수 있는
글 고정 기능이 추가되었습니다.

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


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

■ 업데이트 내용


아래 기능개선 목록 중 1~3번은 모바일 쇼핑몰에 대한 기능개선이며
4번은 PC와 모바일 동시 적용되는 기능개선입니다.


[모바일쇼핑몰]

1. 페이지 표시수 기능이 모바일 게시판에 적용 되었습니다.

▼ 설정


▼ 적용화면


- 목록의 아랫부분에 표시될 페이지의 개수를 설정할 수 있는 “페이지 표시수”기능이
모바일 게시판에도 함께 적용될 수 있도록 기능개선 되었습니다.


2. 상품형 게시판에 본문읽기 설정 기능이 모바일 게시판에 적용 되었습니다.

▼ 설정


▼ 적용화면



위 기능을 사용하시려면 아래의 파란색 코드를 소스에 추가해 주시고 빨간색 코드는 삭제해주세요.


- 위치 : 모바일 디자인 편집 > 게시판 > 상품게시판 목록(/board/product/list.html)

## 상단 생략 ##

<li>

            <p class="descriptions">

                <a href="/board/product/read.html{$param_read}">

                    <span class="summary">{$icon_re} {$icon_mobile} {$icon_lock} {$subject} {$icon_new} {$icon_hit} {$icon_file} {$comment_count}</span>

                    <strong class="point {$point_display|display}"><img src="http://img.echosting.cafe24.com/mobileWeb/common/ico_star{$point_count}.png" alt="{$point_count}점" width="50" height="8"></strong>

                    <strong class="date {$date_display|display}" title="작성일">{$write_date|date:Y-m-d}</strong>

                    <strong class="id" title="작성자">{$writer}</strong>

                </a>

            </p>

            <span class="view {$mobile_spread_btn_area}">

                    <a href="#none" id="{$mobile_spread_btn}">

                        <img id="{$mobile_spread_btn_up}" src="http://img.echosting.cafe24.com/design/skin/mobile/ico_toggle_arow_up.png" alt="내용 보기" style="display:none;"/>

                        <img id="{$mobile_spread_btn_down}" src="http://img.echosting.cafe24.com/design/skin/mobile/ico_toggle_arow_down.png" alt="내용 보기"/>

                    </a>

            </span>

        </li>

## 하단 생략 ##



- 위치 : 모바일 디자인 편집 > CSS(/css/module/board/listPackage_4.css)

1. 삭제

.xans-board-list-4 li { position:relative; min-height:50px; padding-left:58px; }

 

2. 추가

/* .xans-board-notice-4 a .summary {} 하단에 아래소스 추가 */

.xans-board-notice-4 .view { position:absolute; right:10px; top:50%; width:14px; height:15px; margin:-7px 0 0; }

.xans-board-notice-4 .view a { position:absolute; left:0; top:0; height:7px; padding:4px 3px; }

.xans-board-notice-4 .view img { position:absolute; left:3px; width:8px; height:7px; vertical-align:top; }

 

/* .xans-board-list-4 .thumb img {} 하단에 아래소스 추가 */

.xans-board-list-4 .view { position:absolute; right:10px; top:50%; width:14px; height:15px; margin:-7px 0 0; }

.xans-board-list-4 .view a { position:absolute; left:0; top:0; height:7px; padding:4px 3px; }

.xans-board-list-4 .view img { position:absolute; left:3px; width:8px; height:7px; vertical-align:top; }

 

/* 상품후기 아코디언형 */

.xans-board-notice-4 .contentView,

.xans-board-list-4 .contentView { min-height:0; padding:10px; border-top:1px dotted #c9c9c9; background:#f5f5f7; word-wrap:break-word; }

.xans-board-notice-4 .contentView img,

.xans-board-list-4 .contentView img { max-width:100%; }

.xans-board-notice-4 .contentView ul li,

.xans-board-list-4 .contentView ul li { list-style:disc; }

 

3. 수정

/* as-is */

.xans-board-notice-4 { margin:-1px 0 0 ; font-size:11px; border-top:1px solid #a1a1a3; }

.xans-board-notice-4 li { position:relative; overflow:hidden; padding:10px 0; color:#63666e; border-bottom:1px solid #a1a1a3;}

/* to-be */

.xans-board-notice-4 { margin:-1px 0 0 ; font-size:11px; border-bottom:1px solid #a1a1a3; }

.xans-board-notice-4 li { position:relative; overflow:hidden; padding:10px 21px 10px 0; color:#63666e; border-top:1px solid #a1a1a3; }

 

/* as-is */

.xans-board-list-4 { margin:-1px 0 0 ; font-size:11px; border-top:1px solid #a1a1a3; }

.xans-board-list-4 li { position:relative; overflow:hidden; padding:10px 0; color:#63666e; border-bottom:1px solid #a1a1a3;}

/* to-be */

.xans-board-list-4 { margin:-1px 0 0 ; font-size:11px; border-bottom:1px solid #a1a1a3; }

.xans-board-list-4 li { position:relative; overflow:hidden; min-height:50px; padding:10px 21px 10px 58px; color:#63666e; border-top:1px solid #a1a1a3; }




3. 모바일 게시물 목록에 공지글 포함여부를 체크박스로 선택할 수 있습니다.



- 공지글 보기를 체크할 경우 공지글을 함께 보실 수 있고 체크 해제를 할 경우 공지글을 제외한 게시판 글을
보실 수 있는 기능입니다.

위 기능을 사용하시려면 아래의 파란색 코드를 소스에 추가해주세요


- 위치 : 모바일 디자인 편집 > 게시판 > 상품게시판 목록(/board/product/list.html)
- 위치 : 모바일 디자인 편집 > 게시판 > 자유게시판 목록(/board/free/list.html)

## 상단 생략 ##

 

<div class="writeNotiArea">

    <div class="btnArea type1 {$write_display|display}" module="board_ButtonList">

        <a href="/board/product/write.html{$param_write}" class="submit" style="width:100%;">글쓰기</a>

    </div>

    <p class="control"><input type="checkbox" name="showNotice" id="showNotice" onChange="BOARD.show_notice();" /><label for="showNotice">공지글 보기</label></p>

     </div>

 

    <ul module="board_notice_1002" class="boardList">

        <!--

            $count = 2

        -->

        <li class="{$notice_list}">

            <p class="descriptions">

 

## 하단 생략 ##

 



- 모바일 디자인 편집 > CSS(/css/module/board/listPackage.css)

## 상단 생략 ##

 

 

/* 공지사항 표시 */

.mNoticeFlag { display:none; background:#ebebeb }

 




[모바일/PC 공통]

4. 특정 게시물을 게시판 목록 상단에 고정시킬 수 있습니다.





추가된 기능을 이용하시려면 아래의 내용대로 반드시 HTML 소스를 추가해주셔야 합니다.


1) PC 쇼핑몰


- 위치 : 디자인관리 > HTML 디자인 설정 > 게시판 > 자유게시판 목록(/board/free/list.html)

## 상단 생략 ##

 

<tbody module="board_fixed_1002" class="notice">

            <!--

                $count = 2

            -->

            <tr style="{$list_bg_color} {$list_char_color}">

                <td class="number">{$checkbox} {$fixed_icon}</td>

                <td class="category {$category_display|display}">{$category_name}</td>

                <td class="subject">{$icon_re}{$icon_lock} <a href="/board/free/read.html{$param_read}" style="{$link_color}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>

                <td class="writer">{$member_icon}{$writer}</td>

                <td class="date {$date_display|display}">{$write_date}</td>

                <td class="hit {$hit_display|display}">{$hit_count}</td>

                <td class="recom {$vote_display|display}">{$vote}</td>

                <td class="grade {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/board/ico_point{$point_count}.gif" alt="{$point_count}점"></td>

            </tr>

            <tr style="{$list_bg_color} {$list_char_color}">

                <td class="number">{$checkbox} {$fixed_icon}</td>

                <td class="category {$category_display|display}">{$category_name}</td>

                <td class="subject">{$icon_re}{$icon_lock} <a href="/board/free/read.html{$param_read}" style="{$link_color}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>

                <td class="writer">{$member_icon}{$writer}</td>

                <td class="date {$date_display|display}">{$write_date}</td>

                <td class="hit {$hit_display|display}">{$hit_count}</td>

                <td class="recom {$vote_display|display}">{$vote}</td>

                <td class="grade {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/board/ico_point{$point_count}.gif" alt="{$point_count}점"></td>

            </tr>

        </tbody>

 

<tbody module="board_list_1002">

 

## 하단 생략 ##



- 위치 : 디자인관리 > HTML 디자인 설정 > 게시판 > 상품게시판 목록(/board/product/list.html)

## 상단 생략 ##

 

<tbody module="board_fixed_4" class="notice">

            <!--

                $count = 2

            -->

            <tr style="{$list_bg_color} {$list_char_color}">

                <td class="number">{$checkbox} {$fixed_icon}</td>

                <td class="thumb"><a href="/product/detail.html{$param_product}">{$product_img}<span>{$product_name|cut:30,...}</span></a></td>

                <td class="category {$category_display|display}">{$category_name}</td>

                <td class="subject">{$icon_re}{$icon_lock} <a href="/board/free/read.html{$param_read}" style="{$link_color}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>

                <td class="writer">{$member_icon}{$writer}</td>

                <td class="date {$date_display|display}">{$write_date}</td>

                <td class="hit {$hit_display|display}">{$hit_count}</td>

                <td class="recom {$vote_display|display}">{$vote}</td>

                <td class="grade {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/board/ico_point{$point_count}.gif" alt="{$point_count}점"></td>

            </tr>

            <tr style="{$list_bg_color} {$list_char_color}">

                <td class="number">{$checkbox} {$fixed_icon}</td>

<td class="thumb"><a href="/product/detail.html{$param_product}">{$product_img}<span>{$product_name|cut:30,...}</span></a></td>

                <td class="category {$category_display|display}">{$category_name}</td>

                <td class="subject">{$icon_re}{$icon_lock} <a href="/board/free/read.html{$param_read}" style="{$link_color}">{$subject}</a> {$icon_new}{$icon_hit}{$icon_file}{$comment_count}</td>

                <td class="writer">{$member_icon}{$writer}</td>

                <td class="date {$date_display|display}">{$write_date}</td>

                <td class="hit {$hit_display|display}">{$hit_count}</td>

                <td class="recom {$vote_display|display}">{$vote}</td>

                <td class="grade {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/default/board/ico_point{$point_count}.gif" alt="{$point_count}점"></td>

            </tr>

        </tbody>

 

<tbody module="board_list_4">

 

## 하단 생략 ##



2) 모바일 쇼핑몰

- 위치 : 모바일 디자인편집 > 게시판 > 자유게시판 목록(/board/free/list.html)

## 상단 생략 ##

<ul module="board_fixed_1002">

        <!--

            $count = 2

            $subject_cut = 22

        -->

        <li>

            <p class="descriptions">

                <a href="/board/free/read.html{$param_read}">

                    <span class="summary">{$fixed_icon}  {$icon_re} {$icon_mobile} {$icon_lock} {$subject} {$icon_new} {$icon_hit} {$icon_file} {$comment_count}</span>

                    <strong class="point {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/ico_star{$point_count}.png" alt="{$point_count}점" width="50" height="8" /></strong>

                    <strong class="id" title="작성자">{$writer}</strong>

                    <strong class="date {$date_display|display}" title="작성일">{$write_date|date:Y-m-d}</strong>

                </a>

            </p>

        </li>

        <li>

            <p class="descriptions">

                <a href="/board/free/read.html{$param_read}">

                    <span class="summary">{$fixed_icon} {$icon_re} {$icon_mobile} {$icon_lock}  {$subject} {$icon_new} {$icon_hit} {$icon_file} {$comment_count}</span>

                    <strong class="point {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/ico_star{$point_count}.png" alt="{$point_count}점" width="50" height="8" /></strong>

                    <strong class="id" title="작성자">{$writer}</strong>

                    <strong class="date {$date_display|display}" title="작성일">{$write_date|date:Y-m-d}</strong>

                </a>

            </p>

        </li>

    </ul>

 

    <ul module="board_list_1002">

 

## 하단 생략 ##



- 위치 : 모바일 디자인편집 > 게시판 > 상품게시판 목록(/board/product/list.html)

## 상단 생략 ##

 

<ul module="board_notice_게시판번호">

.... 생략

</ul>

 

<ul module="board_fixed_4">

    <!--

        $count = 2

        $subject_cut = 22

    -->

    <li>

<div class="thumb"><a href="/board/product/read.html{$param_read}">{$product_img}</a></div>

        <p class="descriptions">

            <a href="/board/free/read.html{$param_read}">

                <span class="summary">{$fixed_icon} {$icon_re} {$icon_lock} {$subject} {$icon_new} {$icon_hit} {$icon_file} {$comment_count}</span>

                <strong class="point {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/ico_star{$point_count}.png" alt="{$point_count}점" width="50" height="8" /></strong>

                <strong class="id" title="작성자">{$writer}</strong>

                <strong class="date {$date_display|display}" title="작성일">{$write_date|date:Y-m-d}</strong>

            </a>

        </p>

    </li>

    <li>

<div class="thumb"><a href="/board/product/read.html{$param_read}">{$product_img}</a></div>

        <p class="descriptions">

            <a href="/board/free/read.html{$param_read}">

                <span class="summary">{$fixed_icon} {$icon_re} {$icon_lock} {$subject} {$icon_new} {$icon_hit} {$icon_file} {$comment_count}</span>

                <strong class="point {$point_display|display}"><img src="http://img.echosting.cafe24.com/design/skin/mobile/ico_star{$point_count}.png" alt="{$point_count}점" width="50" height="8" /></strong>

                <strong class="id" title="작성자">{$writer}</strong>

                <strong class="date {$date_display|display}" title="작성일">{$write_date|date:Y-m-d}</strong>

            </a>

        </p>

    </li>

</ul>

    <ul module="board_list_4">

 

## 하단 생략 ##



- 위치 : 디자인편집 > CSS(/css/module/board/listPackage_4.css)

/* 고정글 */

.xans-board-fixed-4 { margin:-1px 0 0 ; font-size:11px; border-bottom:1px solid #a1a1a3; }

.xans-board-fixed-4 li { position:relative; overflow:hidden; padding:10px 21px 10px 58px; color:#63666e; border-top:1px solid #a1a1a3; }

.xans-board-fixed-4 .descriptions { position:relative; padding:0 7px; }

.xans-board-fixed-4 .descriptions a { display:block; color:#63666e; }

.xans-board-fixed-4 .descriptions strong { padding:0 15px 0 0; }

.xans-board-fixed-4 .descriptions strong.name { padding:0; }

.xans-board-fixed-4 .summary { display:block; padding:0 0 7px; line-height:14px; }

.xans-board-fixed-4 a .summary { color:#000; }

.xans-board-fixed-4 .thumb { position:absolute; top:10px; left:2px; }

.xans-board-fixed-4 .thumb img { width:50px; max-height:50px; }



- 위치 : 디자인편집 > CSS(/css/module/board/listPackage.css)

/* 고정글 */

.xans-board-fixed-4 { margin:-1px 0 0 ; font-size:11px; border-bottom:1px solid #a1a1a3; }

.xans-board-fixed-4 li { position:relative; overflow:hidden; padding:10px 21px 10px 0; color:#63666e; border-top:1px solid #a1a1a3; }

.xans-board-fixed-4 .descriptions { position:relative; padding:0 7px; }

.xans-board-fixed-4 .descriptions a { display:block; color:#63666e; }

.xans-board-fixed-4 .descriptions strong { padding:0 15px 0 0; }

.xans-board-fixed-4 .descriptions strong.name { padding:0; }

.xans-board-fixed-4 .summary { display:block; padding:0 0 7px; line-height:14px; }

.xans-board-fixed-4 a .summary { color:#000; }

 




■ 참고사항

고정글 지정 기능 사용시 아래 내용을 참고해 주세요.


1) 공지로 등록된 게시물은 글고정이 불가능합니다. 공지해제 후 글고정 지정해주세요.
2) 글고정 아이콘 변경은 게시물관리>디자인 구성에서 설정하실 수 있습니다.
3) 글고정 개수는 게시물 목록수에 포함되지 않고 별도로 설정이 가능한 기능으로
    디자인편집창>게시판목록(list.html)의 “$count = 목록수” 에서 설정하실 수 있습니다.
4) 고정글의 노출 순서 변경은 게시판 관리 페이지 내 게시물관리 메뉴에서 설정하실 수 있습니다.
5) 1:1 맞춤상담과 한줄메모 게시글은 글고정이 불가능합니다.




 

 

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

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

이전글

[고객관리] SMS 발송관리에 장문문자(LMS) 발송 기능 추가

2014-07-02

다음글

[게시판관리] 게시글 비밀답변 열람 기능개선 안내

2014-07-02