メインコンテンツへスキップ

【クリエイターモード】テンプレートDebutでレビューを表示したいです。方法を教えてください。

  • 更新

テンプレート【Debut】にレビューを追加するには、以下の手順で対応してください。

 

※行番号はすべて初期値です。（2024年1月）

◆商品詳細ページの商品名の下の位置にレビュー平均値を追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細　「HTML」

(1)18行目付近

<{$makeshop.head}>

の前に以下を追記してください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
(2)64行目付近
<h2 class="item-detail-title"><{$item.name}></h2>

の後ろにレビュー平均値のHTMLを追記してください。

追記例）

<!--レビュー-->
<{if $item.review.is_enabled}>
<div class="item-review">
    <{if $item.review.has_item}>
        <div class="review-link"><span class="review-star"><{$item.review.star_html}></span><a href="<{$item.review.list_url}>">（<{$item.review.total_count}>件）のレビュー</a></div>
    <{/if}>
</div>
<{/if}>
 

(3)レイアウト用のスタイルを「CSS」に追記してください。

/* review */
.review-average{
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
	font-size:85%;
}
.review-link{
  display: flex;
}
.item-review-count a{
	text-decoration:underline;
}
 
 
 
 

◆商品詳細ページにレビュー投稿を追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細　「HTML」
(1)140行目付近

<{$module.checked}>

の前（上の行）など、表示させたい位置にレビュー投稿のHTMLを追記してください。

<!--商品レビュー-->
<section class="review-section main-contents">
	<{if $item.review.is_enabled}>
	    <div class="item-review-detail">
	        <h3>商品レビュー</h3>
	        <{if $item.review.has_item}>
	            <div class="item-review-list-link">
	                <a href="<{$item.review.list_url}>">レビュー一覧</a>
	            </div>
	            <ul class="item-review-list">
	            <{section name=i loop=$item.review.list}>
	                <li class="review-list-unit">
	                    <p class="review-list-name"><span><{$item.review.list[i].reviewer_name}></span>さん</p>
	                    <div class="star-score">
	                        <div class="review-star"><{$item.review.list[i].star_html}></div>
	                        <p class="review-score"><{$item.review.list[i].score}></p>
	                    </div>
	                    <p class="review-list-date"><{$item.review.list[i].date.year}>/<{$item.review.list[i].date.month}>/<{$item.review.list[i].date.day}>&nbsp;<{$item.review.list[i].date.hour}>:<{$item.review.list[i].date.minute}></p>
	                    <p class="review-list-content"><{$item.review.list[i].content|nl2br}></p>
	                </li>
	            <{/section}>
	            </ul>
	        <{else}>
	            <p class="item-review-detail-empty">レビューはまだありません</p>
	        <{/if}>
	        <p class="review-post">
	            <a href="<{$item.review.post_url}>">レビューを書く</a>
	        </p>
	    </div>
	<{/if}>
</section>

(2)レイアウト用のスタイルを「CSS」に追記してください。

.item-review-detail{
	text-align:left;
}
.item-review-detail-empty{
	margin-bottom: 20px;
}
.review-post a {
	padding-left: 20px;
}
 

◆CSSを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通　「CSS」

の末尾に以下をコピー＆ペーストしてください。

 
 
/* -----------------------------------------------------------------
review
----------------------------------------------------------------- */
.review-wrap{
      text-align: left;
}
.review-item-wrap {
      border: 1px solid #CCC;
      padding: 20px;
      border-radius: 3px;
      display: flex;
      margin: 50px 0;
}
.review-item-wrap .review-item-image {
      padding-right: 20px;
      width: 120px;
}
.review-item-wrap .review-item-image img {
      width: 100%;
      height: 120px;
      object-fit: cover;
}
.review-item-info .review-item-category {
      font-size: 12px;
      margin-bottom: 8px;
}
.review-item-info .review-item-name {
      font-size: 18px;
}
.review-item-info .total-review {
      display: flex;
      align-items: baseline;
      margin-top: 10px;
}
.review-item-info .review-star {
      margin-right: 10px;
}
.review-item-info .review-average {
      font-size: 20px;
      font-weight: bold;
}
.review-item-info .review-count {
      font-size: 12px;
}
.review-form-wrap {
      max-width: 600px;
      margin: 0 auto;
}
.review-form {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
}
.review-form:last-child {
      margin-bottom: 60px;
}
.review-form dt {
      width: 150px;
      text-align: left;
}
.review-form .review-form-content {
      width: 100%;
}
.review-form dd input,
.review-form-content textarea{
      border: 1px solid #CCC;
      padding:10px;
}
.review-form dd .reviewRateStar:before {
      font-size: 18px;
}
.review-post-btn {
      border: none !important;
      background: #CCC;
      color: #fff;
}
/* review star */ .item-review-detail {
      margin-bottom: 60px;
}
.item-review-detail h3 {
      font-size: 18px;
      margin-bottom: 20px;
}
.item-review-list li {
      margin-bottom: 60px;
}
.item-review-list-link {
      margin-bottom: 30px;
      font-size: 12px;
}
.item-review-list-link a {
      text-decoration: underline;
}
.item-review-list-link a:hover {
      text-decoration: none;
}
.review-list-unit .review-list-name {
      margin-bottom: 12px;
}
.review-list-unit .star-score {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
}
.review-list-unit .review-star {
      margin-right: 6px;
}
.review-list-unit .review-list-date {
      color: #B5B5B5;
      margin: 12px 0;
}
.reviewRateStar {
      display: inline-block;
      font-size: 0;
      color: #FFA41C;
}
.reviewRateStar::before {
      font-family: 'Font Awesome 5 Free';
      content: "\f005";
      font-size: 14px;
      font-weight: 900;
}
.starOff::before {
      font-family: 'Font Awesome 5 Free';
      content: "\f005";
      font-weight: 400;
}
.starHalf::before {
      font-family: 'Font Awesome 5 Free';
      content: "\f5c0";
}
.review-post {
      margin-top: 40px;
}
.review-post {
      text-align: center;
}
.review-post a {
      margin: 0 auto;
      display: inline-block;
      padding: 20px 40px;
      border-radius: 6px;
      text-align: center;
      text-decoration: none;
      height: auto;
      font-weight:bold;
      background:#AAA;
      color:#fff;
}
.review-post a:before {
      font-family: 'Font Awesome 5 Free';
      content: "\f304";
      font-size: 16px;
      font-weight: 900;
      padding-right: 10px;
      color: fff;
}
@media screen and (max-width: 768px){
      .contents-heading {
            max-width: 96%;
      }
      .main {
            width: 94%;
            box-sizing:border-box;
      }
      .review-list-content {
            line-height: 1.4;
      }
      .item-review,       .item-review-detail{
            padding: 0 18px;
      }
}

 

 

◆商品レビュー投稿ページを作成

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品レビュー投稿　「HTML」

に以下をコピー＆ペーストしてください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>レビュー投稿</title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="Summary with Large Image">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
</head>

<body>
<{$makeshop.body_top}>
<{$module.header}>

<section class="wrapper">
    <section class="main">
        <div class="main-contents main-contents-guide">
            <h2 class="section-title section-title-company">レビュー投稿</h2>
            <main class="main">
                <section class="main-section">
                    <div class="category-title">
                        <h2 class="review-category-title"><{$item.name}>のレビュー投稿</h2>
                    </div>

                    <!--レビューアイテム-->
                    <div class="review-item-wrap">
                        <div class="review-item-image">
                            <a href="<{$item.url}>"><img src="<{$item.image_S}>" alt="<{$item.name}>"></a>
                        </div>
                        <div class="review-item-info">
                            <p class="review-item-category"><a href="<{$item.base_category.url}>"><{$item.base_category.name}></a></p>
                            <p class="review-item-name"><a href="<{$item.url}>"><{$item.name}></a></p>
                            <{if $review.has_item}>
                            <div class="total-review">
                                <div class="review-star"><{$review.star_html}></div>
                                <p class="review-average"><{$review.average}></p>
                                <p class="review-count">（<{$review.total_count}>件）</p>
                            </div>
                            <{/if}>
                        </div>
                    </div>

                    <!--レビュー投稿フォーム-->
                    <div class="review-form-wrap">
                        <dl class="review-form">
                            <dt class="review-form-title">
                                ニックネーム
                            </dt>
                            <dd class="review-form-content">
                                <input type="text" data-id="<{$review.name_id}>">
                            </dd>
                        </dl>
                        <dl class="review-form">
                            <dt class="review-form-title">
                                評価
                            </dt>
                            <dd class="review-form-content">
                                <{$review.star_select_html}>
                            </dd>
                        </dl>
                        <dl class="review-form">
                            <dt class="review-form-title">
                                コメント
                            </dt>
                            <dd class="review-form-content">
                                <textarea name="" id="" cols="50" rows="10" data-id="<{$review.content_id}>"></textarea>
                            </dd>
                        </dl>

                        <p class="review-post"><a href="<{$review.entry_url}>" class="review-post-btn">この内容でレビューを投稿する</a></p>
                    </div>

                </section>
            </main>
        </div>
    </section>
</section>
<{$module.footer}>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>
 

◆商品レビュー一覧ページを作成

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品レビュー一覧　「HTML」

に以下をコピー＆ペーストしてください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>レビュー一覧</title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="Summary with Large Image">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
</head>

<body>
<{$makeshop.body_top}>
<{$module.header}>

<section class="wrapper">
    <section class="main">
        <div class="main-contents main-contents-guide">
            <h2 class="section-title section-title-company">レビュー一覧</h2>
            <main class="main">
                <section class="main-section">
                    <div class="category-title">
                        <h2 class="review-category-title"><{$item.name}>のレビュー一覧</h2>
                    </div>

                    <!--レビューアイテム-->
                    <div class="review-item-wrap">
                        <div class="review-item-image">
                            <a href="<{$item.url}>"><img src="<{$item.image_S}>" alt="<{$item.name}>"></a>
                        </div>
                        <div class="review-item-info">
                            <p class="review-item-category"><a href="<{$item.base_category.url}>"><{$item.base_category.name}></a></p>
                            <p class="review-item-name"><a href="<{$item.url}>"><{$item.name}></a></p>
                            <{if $review.has_item}>
                            <div class="total-review">
                                <div class="review-star"><{$review.star_html}></div>
                                <p class="review-average"><{$review.average}></p>
                                <p class="review-count">（<{$review.total_count}>件）</p>
                            </div>
                            <{/if}>
                        </div>
                    </div>

                    <!--レビュー一覧-->
                    <{if $review.has_item}>
                    <ul class="item-review-list all-review">
                        <{section name=i loop=$review.list}>
                        <li class="review-list-unit">
                            <p class="review-name"><span><{$review.list[i].reviewer_name}></span>さん</p>
                            <div class="star-score">
                                <div class="review-star"><{$review.list[i].star_html}></div>
                                <p class="review-score"><{$review.list[i].score}></p>
                            </div>
                            <p class="review-list-date"><{$review.list[i].date.year}>/<{$review.list[i].date.month}>/<{$review.list[i].date.day}> <{$review.list[i].date.hour}>:<{$review.list[i].date.minute}></p>
                            <div class="review-list-content"><{$review.list[i].content}></div>
                        </li>
                        <{/section}>
                    </ul>
    
                    <!--ページャー-->
                    <div class="pager--wrap">
                        <p class="total-count">（全<span><{$review.total_count}></span>件）<{$review.display_count}>件表示</p>
                        <{if $review.pager.has_item}>
    
                        <ul class="pager-wrap">
                            <{if !$review.pager.is_first_display}>
                                <li class="pager-list"><a href="<{$review.pager.first_url}>"><span class="prev">一番前へ</span></a></li>
                            <{/if}>
    
                            <{section name=i loop=$review.pager.list}>
                            <{if $review_list.is_current_page}>
                                <li class="pager-list pager-selected"><{$review.pager.list[i].number}></li>
                            <{else}>
                                <li class="pager-list"><a href="<{$review.pager.list[i].url}>"><span><{$review.pager.list[i].number}></span></a></li>
                            <{/if}>
                            <{/section}>
    
                            <{if !$review.pager.is_last_display}>
                                <li class="pager-list"><a href="<{$review.pager.last_url}>"><span class="next">最後へ</span></a></li>
                            <{/if}>
                        </ul>
                        <{/if}>
                    </div>
    
                    <{else}>
                        <p class="empty">この商品のレビューはまだありません</p>
                    <{/if}>
    
                    <!--レビュー投稿-->
                    <p class="review-post">
                        <a href="<{$review.post_url}>">レビューを書く</a>
                    </p>
                
                </section>
            </main>
        </div>
    </section>
</section>
<{$module.footer}>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>
記事の改善にご協力ください。この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

お役に立てず申し訳ございません。

「いいえ」を選んだ理由をお聞かせください。

ページの先頭へ戻る

関連記事