업그레이드
[상품관리][리뷰톡톡][Mobile] 스퀘어형 목록 디자인 추가 (일본어) - HTML/CSS
안녕하세요. 카페24 운영도우미 입니다.
자세한 내용은 아래를 참조해주세요.
아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.
/* 리뷰정보 */ | |
.reviewArea .reviewList .reviewImg { padding:6px 6px 0; }
|
|
.reviewArea .reviewList .reviewImg .reviewThumb { display:block; width:100%; text-align:center; }
|
|
.reviewArea .reviewList .reviewImg .reviewThumb img { max-width:100%; height:auto; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; }
|
|
+
.reviewArea .reviewList .reviewImg .reviewThumb.square img { height: 45vw; width: 45vw; object-fit: cover;}
|
|
.reviewArea .reviewList .reviewInfo { padding:13px 12px 10px; }
|
|
.reviewArea .reviewList .reviewInfo .icon img { margin:2px 0 0; vertical-align:top; }
|
|
.reviewArea .reviewList .reviewInfo .summary { text-decoration:none; color:#1b1b1b; }
|
|
+
.reviewArea .reviewList .reviewInfo .summary .icons { height: 20px }
|
|
.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.noimage { padding-bottom: 23.1vw; height: 145px; }
|
|
+
.reviewArea .reviewList .reviewInfo .summary .heading.square { height: 130px; }
|
|
+
.reviewArea .reviewList .reviewInfo .summary .heading.square.noimage { height: 145px; }
|
|
.reviewArea .reviewList .reviewInfo .summary .info { display:block; margin:16px 0 10px; padding:0 0 7px; border-bottom:1px solid #dbdbdb; font-size:11px;}
|
|
+
.reviewArea .reviewList .reviewInfo .summary .info.square { height: 27px; padding: 0 0 20px;}
|
|
.reviewArea .reviewList .reviewInfo .summary .info img { display:inline-block; vertical-align:top; margin:2px 5px 0 0;}
|
|
+
.reviewArea .reviewList .reviewInfo .summary .info.square img { height: 16px; width: 16px; object-fit: cover;}
|
|
.reviewArea .reviewList .reviewInfo .summary .date { color:#757575; }
|
|
.reviewArea .reviewList .reviewInfo .summary .info strong { margin:0 3px 0 0; }
|
|
.reviewArea .reviewList .reviewInfo .community { text-align:right; font-size:11px; color:#686868; }
|
|
+
.reviewArea .reviewList .reviewInfo .community.square { height: 32px; }
|
|
+
.reviewArea .reviewList .reviewInfo .prdOption.noimage { padding-top: 23.1vw; height: 19px; }
|
|
+
.reviewArea .reviewList .reviewInfo .prdOption.square { height: 19px; }
|
|
/* 상품정보 */
|
|
.reviewArea .reviewList .prdInfo {
|
|
position:relative; padding:8px 8px 7px 42px; font-size:11px; line-height:14px; background:#f0f0f0;}
|
|
box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
|
|
border-radius:0 0 2px 2px; -webkit-border-radius:0 0 2px 2px; -moz-border-radius:0 0 2px 2px;}
|
|
}
|
|
.reviewArea .reviewList .prdInfo .reviewThumb { position:absolute; top:8px; left:7px; }
|
|
.reviewArea .reviewList .prdInfo .reviewThumb img { width:30px; height:30px; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; }
|
|
+
.reviewArea .reviewList .prdInfo .heading strong { display:inline-block; margin:0 0 2px;}
|
|
+
.reviewArea .reviewList .prdInfo .heading .square { margin:0 0 2px; height: 15px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: bold; }
|
▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.
<!--
참고 : 이 페이지는 리뷰 아이템입니다
사용되는 페이지들 : 상품상세 리뷰 목록, 해시태그 모아보기, 작성자글 모아보기, 리뷰 목록
-->
<li class="grid ec-board-list-item" data-bulletin-no="{$*bulletin_no}" style="display:none;">
<div class="reviewImg square {$*display_bulletin_thumbnail_visible_class}">
<a href="#none" class="reviewThumb square ec-board-list-review-read">{$*display_bulletin_thumbnail_url}</a>
</div>
<div class="reviewInfo square">
<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 square">
<span class="ec-board-grade small icoRating {$*display_rating_type_class} {$*display_rating_visible_class}">
{$*display_bulletin_rating_small_tpl}
</span>
<div class="iconContainer">
<span class="count {$*display_comment_visible_class}"><span class="icoComment {$*display_comment_visible_class}">コメント</span>{$*comment_cnt}</span>
<span class="count"><span class="icoLike">いいね</span>{$*display_like_count}</span>
</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"><p class="square">{$*product_name}</p></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="reviewImg square {$*display_bulletin_thumbnail_visible_class}">
<a href="#none" class="reviewThumb square ec-board-list-review-read">{$*display_bulletin_thumbnail_url}</a>
</div>
<div class="reviewInfo square">
<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 square">
<span class="ec-board-grade small icoRating {$*display_rating_type_class} {$*display_rating_visible_class}">
{$*display_bulletin_rating_small_tpl}
</span>
<div class="iconContainer">
<span class="count {$*display_comment_visible_class}"><span class="icoComment {$*display_comment_visible_class}">コメント</span>{$*comment_cnt}</span>
<span class="count"><span class="icoLike">いいね</span>{$*display_like_count}</span>
</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"><p class="square">{$*product_name}</p></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>
▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
<div class="reviewArea" async_module="smartreview_dispList">
<!--@import(/board/smartreview/design_version.html)-->
<!--
$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/mobile/board/review/ico_loading.gif" alt="ローディング中です。しばらくお待ち下さい。">
</div>
</div>
<!-- 비동기로 처리된 이후 노출되는 섹션 -->
<div async_section="after" style="display:none;">
<div id="titleArea">
<h2>マイレビュー管理</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
</span>
</div>
<div class="reviewState typeWriter">
<p class="identify"><strong>{$*writer_name} ({$*writer_id})</strong></p>
<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="reviewCategory {$*display_category_block_visible_class}">
<fieldset class="boardSearch">
<legend>レビュー</legend>
<div class="category">
{$*display_category_block_html}
</div>
</fieldset>
</div>
<div class="reviewSearch">
<select class="sorting ec-board-list-sorting-select">
<option value="recent" selected="selected">最新順</option>
<option value="rating">評価順</option>
<option value="like">いいね順</option>
<option value="hit">閲覧数順</option>
</select>
<div class="ctrl">
<label>{$*display_is_photo_only_html}画像付きレビューのみ見る</label>
</div>
<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><button type="button" class="btnDelete ec-board-list-delete-keyword">削除</button>
</div>
</div>
</div>
<div class="searchArea {$*display_search_button_visible_class}">
<ul class="searchList ec-board-list-additems" async_module="smartreview_dispListSearch">
<!--@import(/board/smartreview/provider/search.html)-->
</ul>
<div class="button"><button type="button" class="btnOpen ec-board-list-search-detail">詳細検索</button></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 class="ec-board-list-page-info">({$*current_page}/{$*total_list_page_count})</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>
▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
<div class="reviewArea" async_module="smartreview_dispList">
<!--@import(/board/smartreview/design_version.html)-->
<!--
$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/mobile/board/review/ico_loading.gif" alt="ローディング中です。しばらくお待ち下さい。">
</div>
</div>
<!-- 비동기로 처리된 이후 노출되는 섹션 -->
<div async_section="after" style="display:none;">
<div id="titleArea">
<h2>マイレビュー</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
</span>
</div>
<div class="reviewState typeWriter">
<p class="identify"><strong>{$*display_writer}</strong></p>
<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="reviewCategory {$*display_category_block_visible_class}">
<fieldset class="boardSearch">
<legend>レビュー</legend>
<div class="category">
{$*display_category_block_html}
</div>
</fieldset>
</div>
<div class="reviewSearch">
<select class="sorting ec-board-list-sorting-select">
<option value="recent" selected="selected">最新順</option>
<option value="rating">評価順</option>
<option value="like">いいね順</option>
<option value="hit">閲覧数順</option>
</select>
<div class="ctrl">
<label>{$*display_is_photo_only_html}画像付きレビューのみ見る</label>
</div>
<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><button type="button" class="btnDelete ec-board-list-delete-keyword">削除</button>
</div>
</div>
</div>
<div class="searchArea {$*display_search_button_visible_class}">
<ul class="searchList ec-board-list-additems" async_module="smartreview_dispListSearch">
<!--@import(/board/smartreview/provider/search.html)-->
</ul>
<div class="button"><button type="button" class="btnOpen ec-board-list-search-detail">詳細検索</button></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 class="ec-board-list-page-info">({$*current_page}/{$*total_list_page_count})</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>
▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
<div class="reviewArea" async_module="smartreview_dispList">
<!--@import(/board/smartreview/design_version.html)-->
<!--
$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/mobile/board/review/ico_loading.gif" alt="ローディング中です。しばらくお待ち下さい。">
</div>
</div>
<!-- 비동기로 처리된 이후 노출되는 섹션 -->
<div async_section="after" style="display:none;">
<div async_module="smartreview_dispDetailReview">
<div class="btnArea type2">
<a href="#none" onclick="{$*detail_review_click}" class="btnSubmit">レビューを投稿する</a>
<a href="/board/smartreview/list.html" class="btnEm">すべて見る</a>
</div>
</div>
<div class="reviewSearch">
<select class="sorting ec-board-list-sorting-select">
<option value="recent" selected="selected">最新順</option>
<option value="rating">評価順</option>
<option value="like">いいね順</option>
<option value="hit">閲覧数順</option>
</select>
<div class="ctrl">
<label>{$*display_is_photo_only_html}画像付きレビューのみ見る</label>
</div>
<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><button type="button" class="btnDelete ec-board-list-delete-keyword">削除</button>
</div>
</div>
</div>
<div class="searchArea {$*display_search_button_visible_class}">
<ul class="searchList ec-board-list-additems" async_module="smartreview_dispListSearch">
<!--@import(/board/smartreview/provider/search.html)-->
</ul>
<div class="button"><button type="button" class="btnOpen ec-board-list-search-detail">詳細検索</button></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 class="ec-board-list-page-info">({$*current_page}/{$*total_list_page_count})</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>
▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
<div class="reviewArea" async_module="smartreview_dispList">
<!--@import(/board/smartreview/design_version.html)-->
<!--
$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/mobile/board/review/ico_loading.gif" alt="ローディング中です。しばらくお待ち下さい。">
</div>
</div>
<!-- 비동기로 처리된 이후 노출되는 섹션 -->
<div async_section="after" style="display:none;">
<div id="titleArea">
<h2>{$*board_name}</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
</span>
</div>
<div class="reviewState typeHash">
<strong class="identify"># {$*hashtag_name}</strong>(合計 {$*bulletin_list_count} 件)
</div>
<div class="reviewCategory {$*display_category_block_visible_class}">
<fieldset class="boardSearch">
<legend>レビュー</legend>
<div class="category">
{$*display_category_block_html}
</div>
</fieldset>
</div>
<div class="reviewSearch">
<select class="sorting ec-board-list-sorting-select">
<option value="recent" selected="selected">最新順</option>
<option value="rating">評価順</option>
<option value="like">いいね順</option>
<option value="hit">閲覧数順</option>
</select>
<div class="ctrl">
<label>{$*display_is_photo_only_html}画像付きレビューのみ見る</label>
</div>
<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><button type="button" class="btnDelete ec-board-list-delete-keyword">削除</button>
</div>
</div>
</div>
<div class="searchArea {$*display_search_button_visible_class}">
<ul class="searchList ec-board-list-additems" async_module="smartreview_dispListSearch">
<!--@import(/board/smartreview/provider/search.html)-->
</ul>
<div class="button"><button type="button" class="btnOpen ec-board-list-search-detail">詳細検索</button></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 class="ec-board-list-page-info">({$*current_page}/{$*total_list_page_count})</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>
▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
<div class="reviewArea" async_module="smartreview_dispList">
<!--@import(/board/smartreview/design_version.html)-->
<!--
$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/mobile/board/review/ico_loading.gif" alt="ローディング中です。しばらくお待ち下さい。">
</div>
</div>
<!-- 비동기로 처리된 이후 노출되는 섹션 -->
<div async_section="after" style="display:none;">
<div id="titleArea">
<h2>{$*board_name}</h2>
<span module="Layout_MobileAction">
<a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ja_JP/layout/btn_back.gif" width="33" alt="戻る"></a>
</span>
</div>
{$*display_write_button_html}
<div class="reviewCategory {$*display_category_block_visible_class}">
<fieldset class="boardSearch">
<legend>レビュー</legend>
<div class="category">
{$*display_category_block_html}
</div>
</fieldset>
</div>
<div class="reviewSearch">
<select class="sorting ec-board-list-sorting-select">
<option value="recent" selected="selected">最新順</option>
<option value="rating">評価順</option>
<option value="like">いいね順</option>
<option value="hit">閲覧数順</option>
</select>
<div class="ctrl">
<label>{$*display_is_photo_only_html}画像付きレビューのみ見る</label>
</div>
<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><button type="button" class="btnDelete ec-board-list-delete-keyword">削除</button>
</div>
</div>
</div>
<div class="searchArea {$*display_search_button_visible_class}">
<ul class="searchList ec-board-list-additems" async_module="smartreview_dispListSearch">
<!--@import(/board/smartreview/provider/search.html)-->
</ul>
<div class="button"><button type="button" class="btnOpen ec-board-list-search-detail">詳細検索</button></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 class="ec-board-list-page-info">({$*current_page}/{$*total_list_page_count})</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 게시판으로 문의해주세요. [문의하기]