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

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

  • 更新

商品詳細、商品レビュー一覧、商品レビュー投稿ページに
それぞれソースを追加することで表示が可能です。

 

 

◆商品詳細ページにレビューを表示

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

 

（１）初期値では18行目の

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" media="screen">

の後ろなど、<head>～</head>内に

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

と追記してください。

 

（２）初期値84行目の

<div class="item-despriction"><{$item.description}></div>

の前など、レビュー数を表示させたい位置にソースを追加してください。

追記例）

<!--レビュー-->
<{if $item.review.is_enabled}>
<div class="item-review">
    <{if $item.review.has_item}>
        <div class="review-link"><a href="<{$item.review.list_url}>">（<{$item.review.total_count}>件）のレビュー</a></div>
    <{else}>
        <p class="review-empty">レビューはまだありません</p>
    <{/if}>
</div>
<{/if}>

 

（３）初期値152行目付近の

<{if $recently_item.has_item}>

の前に、レビュー一覧表示のソースを追加してください。

追記例）

<{if $item.review.is_enabled}>
    <div class="item-review-detail">
        <h3 class="review-title">この商品のレビュー</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}>

 

（４）レイアウトに必要なCSSを追加してください。

 

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

の末尾に以下の記述を追加してください。

追記例）

/* -----------------------------------------------------------------
   review
----------------------------------------------------------------- */
.item-review {
  font-size: 12px;
}
.review-link {
  margin-bottom: 20px;
}
.review-link a {
  text-decoration: underline;
}
.review-link a:hover {
  text-decoration: none;
  text-align: left;
}

.item-review-detail {
  margin-bottom: 60px;
  text-align: left;
}

.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 {
  font-size: 12px;
  color: #B5B5B5;
  margin: 12px 0;
}
.review-list-unit .review-list-content {
  font-size: 12px;
}

.reviewRateStar {
  display: inline-block;
  font-size: 0;
  color: #FFA41C;
}
.reviewRateStar::before {
  font-family: 'Font Awesome 5 Free';
  content: "\f005";
  font-size: 12px;
  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 {
  width: 260px;
  margin: 0 auto;
  display: inline-block;
  padding: 12px 0;
  border: 1px solid #333333;
  border-radius: 2px;
  text-align: center;
}
.review-post a:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f304";
  font-size: 16px;
  font-weight: 900;
  padding-right: 10px;
  color: fff;
}

.review-item-wrap {
  border: 1px solid #333333;
  padding: 20px;
  border-radius: 3px;
  display: flex;
  margin-bottom: 60px;
}
.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 {
  width: 485px;
  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 {
  border: 1px solid #707070;
  width: 100%;
}
.review-form dd .reviewRateStar:before {
  font-size: 18px;
}

.review-post-btn {
  border: none !important;
  background: #707070;
  color: #fff;
}

/* -----------------------------------------------------------------
   responsive
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
.review-category-title {
    margin-bottom: 20px;
  }

  .item-review-list li {
    margin-bottom: 30px;
  }

  .review-item-wrap {
    margin-bottom: 30px;
  }

  .review-form-wrap {
    width: 100%;
  }

  .review-form {
    display: block;
    align-items: center;
    margin-bottom: 30px;
  }
  .review-form:last-child {
    margin-bottom: 60px;
  }
  .review-form dt {
    width: 100%;
    margin-bottom: 8px;
  }
  .review-form dd textarea {
    width: 98%;
  }
  
}

 

 

 

◆商品レビュー一覧ページ

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

「HTML」に以下のソースをコピー＆ペーストしてください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.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">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

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

<div class="wrap">
    <div class="main-contents">
        <h2 class="section-title guide-title"><span class="section-title-deco">レビュー一覧</span></h2>
        <section class="review-wrap">
                    <div class="category-title">
                        <h3 class="review-category-title"><{$item.name}>のレビュー一覧</h3>
                    </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">
                            <{if !$review.pager.is_first_display}>
                                <li><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><span class="current"><{$review.pager.list[i].number}></span></li>
                            <{else}>
                                <li><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><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>
    </div>
    <{$module.footer}>
</div>

<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><{$page.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">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

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

<div class="wrap">
    <div class="main-contents">
        <h2 class="section-title guide-title"><span class="section-title-deco">レビューを投稿する</span></h2>
        <section class="review-wrap">
            <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>
    </div>
    <{$module.footer}>
</div>

<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人がこの記事が役に立ったと言っています

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

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

ページの先頭へ戻る

関連記事