업그레이드

[상품관리][리뷰톡톡][PC] 스퀘어형 목록 디자인 추가 (중국간체) - HTML/CSS

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

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

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

review.css 위치 : boardsmartreviewcssreview.css /board/smartreview/css/review.css
/* 리뷰정보 */
   .reviewArea .reviewList .reviewImg .gradeLayer { display:none; position:absolute; left:0; bottom:-1px; width:100%; }
   .reviewArea .reviewList .prdOption { margin:0 0 8px; }
+ .reviewArea .reviewList .prdOption.noimage { padding-top: 75px; }
   .reviewArea .reviewList .reviewImg { position:relative; margin:0 0 6px; min-height:40px; }
   .reviewArea .reviewList .reviewImg .reviewThumb { display:block; width:100%; text-align:center; }
   .reviewArea .reviewList .reviewImg .reviewThumb img { max-width:100%; height:auto; }
+ .reviewArea .reviewList .reviewImg .reviewThumb.square img { height: 201.75px; width: 201.75px; object-fit: cover; }
  
   .reviewArea .reviewList .reviewInfo .summary { text-decoration:none; color:#434343; }
   .reviewArea .reviewList .reviewInfo .summary .heading { display:inline-block; font-weight:normal; line-height:18px; word-break:break-all; word-wrap:break-word; width: 100%; overflow: hidden; }
+ .reviewArea .reviewList .reviewInfo .summary .heading.square { height: 90px; }
+ .reviewArea .reviewList .reviewInfo .summary .heading.noimage { height: 223px; }
   .reviewArea .reviewList .reviewInfo .summary .info { display:block; margin:20px 0 10px; padding:0 0 10px; border-bottom:1px solid #ededed; line-height:16px; }
+ .reviewArea .reviewList .reviewInfo .summary .info.square { height: 32px; }
+ .reviewArea .reviewList .reviewInfo .summary .info.square img { height: 20px; object-fit: scale-down; }
   .reviewArea .reviewList .reviewInfo .summary .date { display: inline-flex; color:#afafaf; font-size:10px; }
   .reviewArea .reviewList .reviewInfo .summary .info strong { margin:0 7px 0 0; }
+ .reviewArea .reviewList .reviewInfo .summary .icons { height: 20px }
  
   /* 상품정보 */
   .reviewArea .reviewList .prdInfo {
   position:relative; padding:8px 15px 8px 65px; border-top:1px solid #e8e8e8; font-size:11px; color:#848484; background:#f2f2f2;
   box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
   }
   .reviewArea .reviewList .prdInfo .reviewThumb { position:absolute; top:8px; left:15px; }
   .reviewArea .reviewList .prdInfo .reviewThumb img { width:40px; height:40px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }
+ .reviewArea .reviewList .prdInfo .heading { display:inline-block; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
   .reviewArea .reviewList .prdInfo .heading strong { font-weight:normal; color:#6b6b6b; }
+ .reviewArea .reviewList .prdInfo .heading.square { height: 15px; }

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

item.html 위치 : boardsmartreviewprovidersquareitem.html /board/smartreview/provider/square/item.html
<!--
    참고 : 이 페이지는 리뷰 아이템입니다
    사용되는 페이지들 : 상품상세 리뷰 목록, 해시태그 모아보기, 작성자글 모아보기, 리뷰 목록
-->
<li class="grid ec-board-list-item" data-bulletin-no="{$*bulletin_no}" style="display:none;">
    <div class="reviewInfo square">
        <div class="reviewImg {$*display_bulletin_thumbnail_visible_class}">
            <a href="#none" class="reviewThumb square ec-board-list-review-read">{$*display_bulletin_thumbnail_url}</a>
            <div class="gradeLayer" title="{$*rating}">
                <div class="ec-board-grade ec-board-star medium">
                    {$*display_bulletin_rating_medium_tpl}
                </div>
                <div class="gradeBg"></div>
            </div>
        </div>
        <div class="prdOption typeSimple square {$*display_bulletin_thumbnail_no_image_class} {$*product_option_info_display} {$*product_option_info_visible_display}">
            <p class="normal {$*normal_product_info_display}"><span class="option">{$*display_product_option_info}</span></p>
            <ul class="set {$*set_product_info_display}">
                {$*display_product_set_info}
            </ul>
        </div>
        <a href="#none" class="summary ec-board-list-review-read">
            <strong class="heading square {$*display_bulletin_thumbnail_no_image_class}">
                <div class="icons">
                    <span class="icon {$*display_best_icon_visible_class}">{$*display_best_icon_url}</span>
                    <span class="icon {$*display_mobile_icon_visible_class}">{$*display_mobile_icon_url}</span>
                    <span class="icon {$*display_new_icon_visible_class}">{$*display_new_icon_url}</span>
                </div>
                {$*display_subject_long}
            </strong>
            <span class="info square">
                {$*display_group_icon}{$*display_nick_icon} <strong>{$*display_writer}</strong><br>
                <span class="date">{$*display_writen_date}</span>
            </span>
        </a>
        <div class="community">
            <a href="#none" class="comment ec-board-list-review-read {$*display_comment_visible_class} {$*display_comment_visible_underline_class}">留言数 <strong class="count ec-board-comment-count">{$*comment_cnt}</strong></a>
            <div class="social">
                <button type="button" class="btnLike {$*display_like_selected} ec-board-list-sns-share-button-{$*bulletin_no}">点赞数</button>
            </div>
        </div>
    </div>
    <div class="prdInfo square {$*display_product_info_visible_class}">
        <p class="reviewThumb">
            <a href="/product/detail.html?product_no={$*prd_no}">{$*display_product_image_tag}</a>
        </p>
        <div class="summary">
            <a href="/product/detail.html?product_no={$*prd_no}" class="heading square"><strong>{$*product_name|cut:15,...}</strong></a>
            <div class="prdOption typeSimple square {$*product_option_info_display}">
                <p class="normal {$*normal_product_info_display}"><span class="option">{$*display_product_option_info}</span></p>
                <ul class="set {$*set_product_info_display}">
                    {$*display_product_set_info}
                </ul>
            </div>
            <div class="info">
                <dl class="{$*display_rating_visible_class}">
                    <dt>评分</dt>
                    <dd>{$*display_product_info_rating_avg}</dd>
                </dl>
                <dl>
                    <dt>评论</dt>
                    <dd>{$*display_product_info_review_count}</dd>
                </dl>
            </div>
        </div>
    </div>
</li>
<li class="grid ec-board-list-item" data-bulletin-no="{$*bulletin_no}" style="display:none;">
    <div class="reviewInfo square">
        <div class="reviewImg {$*display_bulletin_thumbnail_visible_class}">
            <a href="#none" class="reviewThumb square ec-board-list-review-read">{$*display_bulletin_thumbnail_url}</a>
            <div class="gradeLayer" title="{$*rating}">
                <div class="ec-board-grade ec-board-star medium">
                    {$*display_bulletin_rating_medium_tpl}
                </div>
                <div class="gradeBg"></div>
            </div>
        </div>
        <div class="prdOption typeSimple square {$*display_bulletin_thumbnail_no_image_class} {$*product_option_info_display} {$*product_option_info_visible_display}">
            <p class="normal {$*normal_product_info_display}"><span class="option">{$*display_product_option_info}</span></p>
            <ul class="set {$*set_product_info_display}">
                {$*display_product_set_info}
            </ul>
        </div>
        <a href="#none" class="summary ec-board-list-review-read">
            <strong class="heading square {$*display_bulletin_thumbnail_no_image_class}">
                <div class="icons">
                    <span class="icon {$*display_best_icon_visible_class}">{$*display_best_icon_url}</span>
                    <span class="icon {$*display_mobile_icon_visible_class}">{$*display_mobile_icon_url}</span>
                    <span class="icon {$*display_new_icon_visible_class}">{$*display_new_icon_url}</span>
                </div>
                {$*display_subject_long}
            </strong>
            <span class="info square">
                {$*display_group_icon}{$*display_nick_icon} <strong>{$*display_writer}</strong><br>
                <span class="date">{$*display_writen_date}</span>
            </span>
        </a>
        <div class="community">
            <a href="#none" class="comment ec-board-list-review-read {$*display_comment_visible_class} {$*display_comment_visible_underline_class}">留言数 <strong class="count ec-board-comment-count">{$*comment_cnt}</strong></a>
            <div class="social">
                <button type="button" class="btnLike {$*display_like_selected} ec-board-list-sns-share-button-{$*bulletin_no}">点赞数</button>
            </div>
        </div>
    </div>
    <div class="prdInfo square {$*display_product_info_visible_class}">
        <p class="reviewThumb">
            <a href="/product/detail.html?product_no={$*prd_no}">{$*display_product_image_tag}</a>
        </p>
        <div class="summary">
            <a href="/product/detail.html?product_no={$*prd_no}" class="heading square"><strong>{$*product_name|cut:15,...}</strong></a>
            <div class="prdOption typeSimple square {$*product_option_info_display}">
                <p class="normal {$*normal_product_info_display}"><span class="option">{$*display_product_option_info}</span></p>
                <ul class="set {$*set_product_info_display}">
                    {$*display_product_set_info}
                </ul>
            </div>
            <div class="info">
                <dl class="{$*display_rating_visible_class}">
                    <dt>评分</dt>
                    <dd>{$*display_product_info_rating_avg}</dd>
                </dl>
                <dl>
                    <dt>评论</dt>
                    <dd>{$*display_product_info_review_count}</dd>
                </dl>
            </div>
        </div>
    </div>
</li>

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

myshop_product.html 위치 : boardsmartreviewsquare /board/smartreview/square/myshop_product.html
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
    <div class="reviewArea" async_module="smartreview_dispList">
        <!--
            $square_type = square
                ※ This is a required value when using a square type list. Do not delete or change it.

            $is_photo_only = F
                ※ T 포토리뷰만 보기 / F 모든리뷰 보기

            $more_view_type = scroll
                ※ scroll : 다음글을 스크롤로 제어
                   button : 다음글을 더보기 버튼으로 제어
                   paginate : 다음글을 페이지네이트로 제어

            $sort_order = recent
                ※ recent : 최신순으로 기본정렬
                   rating : 평점순으로 기본정렬
                   like : 좋아요순으로 기본정렬
                   hit : 조회수순으로 기본정렬
        -->
        <!-- 비동기로 처리전 노출되는 섹션 -->
        <div async_section="before">
            <div class="loading">
                <img src="//img.echosting.cafe24.com/skin/base/board/review/ico_loading.gif" alt="加载中,请稍候。" />
            </div>
        </div>
        <!-- 비동기로 처리된 이후 노출되는 섹션 -->
        <div async_section="after" style="display:none;">
            <div class="reviewTitle">
                <div class="path">
                    <span>当前位置</span>
                    <ol>
                        <li><a href="/">首页</a></li>
                        <li><a href="/myshop/index.html">我的主页</a></li>
                        <li title="当前位置"><strong>管理商品评论</strong></li>
                    </ol>
                </div>
                <div class="title">
                    <h2>管理商品评论</h2>
                </div>
            </div>
            <div class="reviewState">
                <strong class="identify">{$*writer_name} ({$*writer_id})</strong>
                <dl>
                    <dt>全部评论</dt>
                    <dd>{$*writer_bulletin_count}</dd>
                </dl>
                <dl>
                    <dt>点赞数</dt>
                    <dd>{$*writer_like_count}</dd>
                </dl>
                <dl>
                    <dt>留言数</dt>
                    <dd>{$*writer_comment_count}</dd>
                </dl>
            </div>
            <div class="reviewSearch">
                <ul class="sorting">
                    <li class="selected"><a href="#none" class="ec-board-list-sorting" data-sort-order="recent" data-sort-order-text="按最新时间">按最新时间 ({$*bulletin_list_count})</a></li>
                    <li class="{$*display_rating_visible_class}"><a href="#none" class="ec-board-list-sorting" data-sort-order="rating" data-sort-order-text="按评分">按评分</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="like" data-sort-order-text="按点赞数">按点赞数</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="hit" data-sort-order-text="按点击数">按点击数</a></li>
                </ul>
                <div class="ctrl">
                    <label>{$*display_is_photo_only_html} 只看图片评论</label>
                    <div class="searchWrap">
                        {$*display_keyword_type_html}
                        <div class="search">
                            <input type="text" class="keyword ec-board-list-keyword" value="{$*keyword}" placeholder="输入关键词" /><button type="submit" class="btnSearch ec-board-list-search-keyword">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reviewCategory {$*display_category_block_visible_class}">
                <fieldset>
                    <legend>分类</legend>
                    <p class="category">商品分类 {$*display_category_block_html}</p>
                </fieldset>
            </div>
            <div class="searchArea">
                <button type="button" class="btnOpen ec-board-list-search-detail {$*display_search_button_visible_class}">打开高级搜索</button>
                <div class="searchList ec-board-list-additems">
                    <table border="1" summary="">
                        <caption>高级搜索</caption>
                        <colgroup>
                            <col style="width:123px;" />
                            <col style="width:auto;" />
                        </colgroup>
                        <tbody async_module="smartreview_dispListSearch">
                            <!--@import(/board/smartreview/provider/search.html)-->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="reviewList ec-board-list-items-data {$*display_list_block_visible_class}">
                <ul async_module="smartreview_dispListItems">
                    <!--
                        $square_type = square
                            ※ This is a required value when using a square type list. Do not delete or change it.

                        $is_photo_only = F
                            ※ T 포토리뷰만 보기 / F 모든리뷰 보기

                        $sort_order = recent
                            ※ recent : 최신순으로 기본정렬
                               rating : 평점순으로 기본정렬
                               like : 좋아요순으로 기본정렬
                               hit : 조회수순으로 기본정렬
                    -->
                    <!--@import(/board/smartreview/provider/square/item.html)-->
                </ul>
            </div>
            <div class="reviewListEmpty ec-board-list-items-empty {$*display_list_empty_block_visible_class}">暂无商品评论。</div>
            <button type="button" class="btnMore ec-board-list-more-button {$*display_list_more_button_visible_class}"><span>查看更多评论</span></button>
        </div>
        <!-- 비동기 실패시 노출되는 섹션 -->
        <div async_section="error" style="display:none;">
            <div class="reviewListEmpty">暂无商品评论。</div>
        </div>
    </div>
    <!-- 비동기로 전달할 템플릿 영역(반드시 포함이 되어있어야함) -->
    <div class="ec-board-list-items-template" async_module="smartreview_dispListItems" async_type="template" style="display:none;">
        <ul async_section="after" style="display:none;">
            <!--@import(/board/smartreview/provider/square/item.html)-->
        </ul>
    </div>
</div>

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

list.html 위치 : boardsmartreviewsquare /board/smartreview/square/list.html
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
    <div class="reviewArea" async_module="smartreview_dispList">
        <!--
            $square_type = square
                ※ This is a required value when using a square type list. Do not delete or change it.

            $is_photo_only = F
                ※ T 포토리뷰만 보기 / F 모든리뷰 보기

            $more_view_type = scroll
                ※ scroll : 다음글을 스크롤로 제어
                   button : 다음글을 더보기 버튼으로 제어
                   paginate : 다음글을 페이지네이트로 제어

            $sort_order = recent
                ※ recent : 최신순으로 기본정렬
                   rating : 평점순으로 기본정렬
                   like : 좋아요순으로 기본정렬
                   hit : 조회수순으로 기본정렬
        -->
        <!-- 비동기로 처리전 노출되는 섹션 -->
        <div async_section="before">
            <div class="loading">
                <img src="//img.echosting.cafe24.com/skin/base/board/review/ico_loading.gif" alt="加载中,请稍候。" />
            </div>
        </div>
        <!-- 비동기로 처리된 이후 노출되는 섹션 -->
        <div async_section="after" style="display:none;">
            <div class="reviewTitle">
                <div class="path">
                    <span>当前位置</span>
                    <ol>
                        <li><a href="/">首页</a></li>
                        <li title="当前位置"><strong>商品评论</strong></li>
                    </ol>
                </div>
                <div class="title">
                    <h2>{$*board_name}</h2>
                </div>
            </div>
            {$*display_write_button_html}
            <div class="reviewSearch">
                <ul class="sorting">
                    <li class="selected"><a href="#none" class="ec-board-list-sorting" data-sort-order="recent" data-sort-order-text="按最新时间">按最新时间 ({$*bulletin_list_count})</a></li>
                    <li class="{$*display_rating_visible_class}"><a href="#none" class="ec-board-list-sorting" data-sort-order="rating" data-sort-order-text="按评分">按评分</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="like" data-sort-order-text="按点赞数">按点赞数</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="hit" data-sort-order-text="按点击数">按点击数</a></li>
                </ul>
                <div class="ctrl">
                    <label>{$*display_is_photo_only_html} 只看图片评论</label>
                    <div class="searchWrap">
                        {$*display_keyword_type_html}
                        <div class="search">
                            <input type="text" class="keyword ec-board-list-keyword" value="{$*keyword}" placeholder="输入关键词" /><button type="submit" class="btnSearch ec-board-list-search-keyword">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reviewCategory {$*display_category_block_visible_class}">
                <fieldset>
                    <legend>分类</legend>
                    <p class="category">商品分类 {$*display_category_block_html}</p>
                </fieldset>
            </div>
            <div class="searchArea">
                <button type="button" class="btnOpen ec-board-list-search-detail {$*display_search_button_visible_class}">打开高级搜索</button>
                <div class="searchList ec-board-list-additems">
                    <table border="1" summary="">
                        <caption>高级搜索</caption>
                        <colgroup>
                            <col style="width:123px;" />
                            <col style="width:auto;" />
                        </colgroup>
                        <tbody async_module="smartreview_dispListSearch">
                            <!--@import(/board/smartreview/provider/search.html)-->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="reviewList ec-board-list-items-data {$*display_list_block_visible_class}">
                <ul async_module="smartreview_dispListItems">
                    <!--
                        $square_type = square
                            ※ This is a required value when using a square type list. Do not delete or change it.

                        $is_photo_only = F
                            ※ T 포토리뷰만 보기 / F 모든리뷰 보기

                        $sort_order = recent
                            ※ recent : 최신순으로 기본정렬
                               rating : 평점순으로 기본정렬
                               like : 좋아요순으로 기본정렬
                               hit : 조회수순으로 기본정렬
                    -->
                    <!--@import(/board/smartreview/provider/square/item.html)-->
                </ul>
            </div>
            <div class="reviewListEmpty ec-board-list-items-empty {$*display_list_empty_block_visible_class}">暂无商品评论。</div>
            <button type="button" class="btnMore ec-board-list-more-button {$*display_list_more_button_visible_class}"><span>查看更多评论</span></button>
        </div>
        <!-- 비동기 실패시 노출되는 섹션 -->
        <div async_section="error" style="display:none;">
            <div class="reviewListEmpty">暂无商品评论。</div>
        </div>
    </div>
    <!-- 비동기로 전달할 템플릿 영역(반드시 포함이 되어있어야함) -->
    <div class="ec-board-list-items-template" async_module="smartreview_dispListItems" async_type="template" style="display:none;">
        <ul async_section="after" style="display:none;">
            <!--@import(/board/smartreview/provider/square/item.html)-->
        </ul>
    </div>
</div>

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

collect_writer.html 위치 : boardsmartreviewsquare /board/smartreview/square/collect_writer.html
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
    <div class="reviewArea" async_module="smartreview_dispList">
        <!--
            $square_type = square
                ※ This is a required value when using a square type list. Do not delete or change it.

            $is_photo_only = F
                ※ T 포토리뷰만 보기 / F 모든리뷰 보기

            $more_view_type = scroll
                ※ scroll : 다음글을 스크롤로 제어
                   button : 다음글을 더보기 버튼으로 제어
                   paginate : 다음글을 페이지네이트로 제어

            $sort_order = recent
                ※ recent : 최신순으로 기본정렬
                   rating : 평점순으로 기본정렬
                   like : 좋아요순으로 기본정렬
                   hit : 조회수순으로 기본정렬
        -->
        <!-- 비동기로 처리전 노출되는 섹션 -->
        <div async_section="before">
            <div class="loading">
                <img src="//img.echosting.cafe24.com/skin/base/board/review/ico_loading.gif" alt="加载中,请稍候。" />
            </div>
        </div>
        <!-- 비동기로 처리된 이후 노출되는 섹션 -->
        <div async_section="after" style="display:none;">
            <div class="reviewTitle">
                <div class="path">
                    <span>当前位置</span>
                    <ol>
                        <li><a href="/">首页</a></li>
                        <li title="当前位置"><strong>查看全部评论</strong></li>
                    </ol>
                </div>
                <div class="title">
                    <h2>查看全部评论</h2>
                </div>
            </div>
            <div class="reviewState">
                <strong class="identify">{$*display_writer}</strong>
                <dl>
                    <dt>全部评论</dt>
                    <dd>{$*writer_bulletin_count}</dd>
                </dl>
                <dl>
                    <dt>点赞数</dt>
                    <dd>{$*writer_like_count}</dd>
                </dl>
                <dl>
                    <dt>留言数</dt>
                    <dd>{$*writer_comment_count}</dd>
                </dl>
            </div>
            <div class="reviewSearch">
                <ul class="sorting">
                    <li class="selected"><a href="#none" class="ec-board-list-sorting" data-sort-order="recent" data-sort-order-text="按最新时间">按最新时间 ({$*bulletin_list_count})</a></li>
                    <li class="{$*display_rating_visible_class}"><a href="#none" class="ec-board-list-sorting" data-sort-order="rating" data-sort-order-text="按评分">按评分</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="like" data-sort-order-text="按点赞数">按点赞数</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="hit" data-sort-order-text="按点击数">按点击数</a></li>
                </ul>
                <div class="ctrl">
                    <label>{$*display_is_photo_only_html} 只看图片评论</label>
                    <div class="searchWrap">
                        {$*display_keyword_type_html}
                        <div class="search">
                            <input type="text" class="keyword ec-board-list-keyword" value="{$*keyword}" placeholder="输入关键词" /><button type="submit" class="btnSearch ec-board-list-search-keyword">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reviewCategory {$*display_category_block_visible_class}">
                <fieldset>
                    <legend>分类</legend>
                    <p class="category">商品分类 {$*display_category_block_html}</p>
                </fieldset>
            </div>
            <div class="searchArea">
                <button type="button" class="btnOpen ec-board-list-search-detail {$*display_search_button_visible_class}">打开高级搜索</button>
                <div class="searchList ec-board-list-additems">
                    <table border="1" summary="">
                        <caption>高级搜索</caption>
                        <colgroup>
                            <col style="width:123px;" />
                            <col style="width:auto;" />
                        </colgroup>
                        <tbody async_module="smartreview_dispListSearch">
                            <!--@import(/board/smartreview/provider/search.html)-->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="reviewList ec-board-list-items-data {$*display_list_block_visible_class}">
                <ul async_module="smartreview_dispListItems">
                    <!--
                        $square_type = square
                            ※ This is a required value when using a square type list. Do not delete or change it.

                        $is_photo_only = F
                            ※ T 포토리뷰만 보기 / F 모든리뷰 보기

                        $sort_order = recent
                            ※ recent : 최신순으로 기본정렬
                               rating : 평점순으로 기본정렬
                               like : 좋아요순으로 기본정렬
                               hit : 조회수순으로 기본정렬
                    -->
                    <!--@import(/board/smartreview/provider/square/item.html)-->
                </ul>
            </div>
            <div class="reviewListEmpty ec-board-list-items-empty {$*display_list_empty_block_visible_class}">暂无商品评论。</div>
            <button type="button" class="btnMore ec-board-list-more-button {$*display_list_more_button_visible_class}"><span>查看更多评论</span></button>
        </div>
        <!-- 비동기 실패시 노출되는 섹션 -->
        <div async_section="error" style="display:none;">
            <div class="reviewListEmpty">暂无商品评论。</div>
        </div>
    </div>
    <!-- 비동기로 전달할 템플릿 영역(반드시 포함이 되어있어야함) -->
    <div class="ec-board-list-items-template" async_module="smartreview_dispListItems" async_type="template" style="display:none;">
        <ul async_section="after" style="display:none;">
            <!--@import(/board/smartreview/provider/square/item.html)-->
        </ul>
    </div>
</div>

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

collect_product.html 위치 : boardsmartreviewsquare /board/smartreview/square/collect_product.html
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
    <div class="reviewArea" async_module="smartreview_dispList">
        <!--
            $square_type = square
                ※ This is a required value when using a square type list. Do not delete or change it.

            $is_photo_only = F
                ※ T 포토리뷰만 보기 / F 모든리뷰 보기

            $more_view_type = button
                ※ button : 다음글을 더보기 버튼으로 제어
                   paginate : 다음글을 페이지네이트로 제어

            $sort_order = recent
                ※ recent : 최신순으로 기본정렬
                   rating : 평점순으로 기본정렬
                   like : 좋아요순으로 기본정렬
                   hit : 조회수순으로 기본정렬
        -->
        <!-- 비동기로 처리전 노출되는 섹션 -->
        <div async_section="before">
            <div class="loading">
                <img src="//img.echosting.cafe24.com/skin/base/board/review/ico_loading.gif" alt="加载中,请稍候。" />
            </div>
        </div>
        <!-- 비동기로 처리된 이후 노출되는 섹션 -->
        <div async_section="after" style="display:none;">
            <div async_module="smartreview_dispDetailReview">
                <div class="btnArea">
                    <a href="#none" onclick="{$*detail_review_click}"><img src="//img.echosting.cafe24.com/skin/base_zh_CN/product/btn_review_write.gif" alt="发表评论" /></a>
                    <a href="/board/smartreview/list.html"><img src="//img.echosting.cafe24.com/skin/base_zh_CN/product/btn_review_all.gif" alt="查看全部" /></a>
                </div>
            </div>
            <div class="reviewSearch">
                <ul class="sorting">
                    <li class="selected"><a href="#none" class="ec-board-list-sorting" data-sort-order="recent" data-sort-order-text="按最新时间">按最新时间 ({$*bulletin_list_count})</a></li>
                    <li class="{$*display_rating_visible_class}"><a href="#none" class="ec-board-list-sorting" data-sort-order="rating" data-sort-order-text="按评分">按评分</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="like" data-sort-order-text="按点赞数">按点赞数</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="hit" data-sort-order-text="按点击数">按点击数</a></li>
                </ul>
                <div class="ctrl">
                    <label>{$*display_is_photo_only_html} 只看图片评论</label>
                    <div class="searchWrap">
                        {$*display_keyword_type_html}
                        <div class="search">
                            <input type="text" class="keyword ec-board-list-keyword" value="{$*keyword}" placeholder="输入关键词" /><button type="submit" class="btnSearch ec-board-list-search-keyword">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="searchArea">
                <button type="button" class="btnOpen ec-board-list-search-detail {$*display_search_button_visible_class}">打开高级搜索</button>
                <div class="searchList ec-board-list-additems">
                    <table border="1" summary="">
                        <caption>高级搜索</caption>
                        <colgroup>
                            <col style="width:123px;" />
                            <col style="width:auto;" />
                        </colgroup>
                        <tbody async_module="smartreview_dispListSearch">
                            <!--@import(/board/smartreview/provider/search.html)-->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="reviewList ec-board-list-items-data {$*display_list_block_visible_class}">
                <ul async_module="smartreview_dispListItems">
                    <!--
                        $square_type = square
                            ※ This is a required value when using a square type list. Do not delete or change it.

                        $is_photo_only = F
                            ※ T 포토리뷰만 보기 / F 모든리뷰 보기

                        $sort_order = recent
                            ※ recent : 최신순으로 기본정렬
                               rating : 평점순으로 기본정렬
                               like : 좋아요순으로 기본정렬
                               hit : 조회수순으로 기본정렬
                    -->
                    <!--@import(/board/smartreview/provider/square/item.html)-->
                </ul>
            </div>
            <div class="reviewListEmpty ec-board-list-items-empty {$*display_list_empty_block_visible_class}">暂无商品评论。</div>
            <button type="button" class="btnMore ec-board-list-more-button {$*display_list_more_button_visible_class}"><span>查看更多评论</span></button>
        </div>
        <!-- 비동기 실패시 노출되는 섹션 -->
        <div async_section="error" style="display:none;">
            <div class="reviewListEmpty">暂无商品评论。</div>
        </div>
    </div>
    <!-- 비동기로 전달할 템플릿 영역(반드시 포함이 되어있어야함) -->
    <div class="ec-board-list-items-template" async_module="smartreview_dispListItems" async_type="template" style="display:none;">
        <ul async_section="after" style="display:none;">
            <!--@import(/board/smartreview/provider/square/item.html)-->
        </ul>
    </div>
</div>

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

collect_hashtag.html 위치 : boardsmartreviewsquare /board/smartreview/square/collect_hashtag.html
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
    <div class="reviewArea" async_module="smartreview_dispList">
        <!--
            $square_type = square
                ※ This is a required value when using a square type list. Do not delete or change it.

            $is_photo_only = F
                ※ T 포토리뷰만 보기 / F 모든리뷰 보기

            $more_view_type = scroll
                ※ scroll : 다음글을 스크롤로 제어
                   button : 다음글을 더보기 버튼으로 제어
                   paginate : 다음글을 페이지네이트로 제어

            $sort_order = recent
                ※ recent : 최신순으로 기본정렬
                   rating : 평점순으로 기본정렬
                   like : 좋아요순으로 기본정렬
                   hit : 조회수순으로 기본정렬
        -->
        <!-- 비동기로 처리전 노출되는 섹션 -->
        <div async_section="before">
            <div class="loading">
                <img src="//img.echosting.cafe24.com/skin/base/board/review/ico_loading.gif" alt="加载中,请稍候。" />
            </div>
        </div>
        <!-- 비동기로 처리된 이후 노출되는 섹션 -->
        <div async_section="after" style="display:none;">
            <div class="reviewTitle">
                <div class="path">
                    <span>当前位置</span>
                    <ol>
                        <li><a href="/">首页</a></li>
                        <li title="当前位置"><strong>查看全部#</strong></li>
                    </ol>
                </div>
                <div class="title">
                    <h2>查看全部#</h2>
                </div>
            </div>
            <div class="reviewState">
                <strong class="identify"># {$*hashtag_name}</strong>
                <p class="description">共有 <strong class="ec-board-list-hashtag-count">{$*bulletin_list_count}</strong>个评论。</p>
            </div>
            <div class="reviewSearch">
                <ul class="sorting">
                    <li class="selected"><a href="#none" class="ec-board-list-sorting" data-sort-order="recent" data-sort-order-text="按最新时间">按最新时间 ({$*bulletin_list_count})</a></li>
                    <li class="{$*display_rating_visible_class}"><a href="#none" class="ec-board-list-sorting" data-sort-order="rating" data-sort-order-text="按评分">按评分</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="like" data-sort-order-text="按点赞数">按点赞数</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="hit" data-sort-order-text="按点击数">按点击数</a></li>
                </ul>
                <div class="ctrl">
                    <label>{$*display_is_photo_only_html} 只看图片评论</label>
                    <div class="searchWrap">
                        {$*display_keyword_type_html}
                        <div class="search">
                            <input type="text" class="keyword ec-board-list-keyword" value="{$*keyword}" placeholder="输入关键词" /><button type="submit" class="btnSearch ec-board-list-search-keyword">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reviewCategory {$*display_category_block_visible_class}">
                <fieldset>
                    <legend>分类</legend>
                    <p class="category">商品分类 {$*display_category_block_html}</p>
                </fieldset>
            </div>
            <div class="searchArea">
                <button type="button" class="btnOpen ec-board-list-search-detail {$*display_search_button_visible_class}">打开高级搜索</button>
                <div class="searchList ec-board-list-additems">
                    <table border="1" summary="">
                        <caption>高级搜索</caption>
                        <colgroup>
                            <col style="width:123px;" />
                            <col style="width:auto;" />
                        </colgroup>
                        <tbody async_module="smartreview_dispListSearch">
                            <!--@import(/board/smartreview/provider/search.html)-->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="reviewList ec-board-list-items-data {$*display_list_block_visible_class}">
                <ul async_module="smartreview_dispListItems">
                    <!--
                        $square_type = square
                            ※ This is a required value when using a square type list. Do not delete or change it.

                        $is_photo_only = F
                            ※ T 포토리뷰만 보기 / F 모든리뷰 보기

                        $sort_order = recent
                            ※ recent : 최신순으로 기본정렬
                               rating : 평점순으로 기본정렬
                               like : 좋아요순으로 기본정렬
                               hit : 조회수순으로 기본정렬
                    -->
                    <!--@import(/board/smartreview/provider/square/item.html)-->
                </ul>
            </div>
            <div class="reviewListEmpty ec-board-list-items-empty {$*display_list_empty_block_visible_class}">暂无商品评论。</div>
            <button type="button" class="btnMore ec-board-list-more-button {$*display_list_more_button_visible_class}"><span>查看更多评论</span></button>
        </div>
        <!-- 비동기 실패시 노출되는 섹션 -->
        <div async_section="error" style="display:none;">
            <div class="reviewListEmpty">暂无商品评论。</div>
        </div>
    </div>
    <!-- 비동기로 전달할 템플릿 영역(반드시 포함이 되어있어야함) -->
    <div class="ec-board-list-items-template" async_module="smartreview_dispListItems" async_type="template" style="display:none;">
        <ul async_section="after" style="display:none;">
            <!--@import(/board/smartreview/provider/square/item.html)-->
        </ul>
    </div>
</div>

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

Top