app/template/cosme41/ProductReview42/Resource/template/default/review.twig line 1

Open in your IDE?
  1. {#
  2. /*
  3.  * This file is part of the ProductReview plugin
  4.  *
  5.  * Copyright (C) 2016 LOCKON CO.,LTD. All Rights Reserved.
  6.  *
  7.  * For the full copyright and license information, please view the LICENSE
  8.  * file that was distributed with this source code.
  9.  */
  10. #}
  12. {% import _self as stars %}
  14. {# 星テキスト生成用マクロ #}
  15. {% macro stars(positive, negative) %}
  16.     {% set positive_stars = ["", "★", "★★", "★★★", "★★★★", "★★★★★"] %}
  17.     {% set negative_stars = ["", "☆", "☆☆", "☆☆☆", "☆☆☆☆", "☆☆☆☆☆"] %}
  18.     {{ positive_stars[positive] }}{{ negative_stars[negative] }}
  19. {% endmacro %}
  21. <style type="text/css">
  23.     #product_review_area {
  24.         border-top: 1px solid #E8E8E8;
  25.         padding-bottom: 0;
  26.         margin-bottom: 20px;
  27.     }
  29.     #product_review_area .ec-rectHeading {
  30.         cursor: pointer;
  31.         margin-top: 20px;
  32.         margin-bottom: 20px;
  33.     }
  35.     #product_review_area .ec-rectHeading.is_active i {
  36.         transform: rotate(180deg);
  37.     }
  39.     #product_review_area .review_list {
  40.         padding-left: 25px;
  41.     }
  43.     #product_review_area .review_list li {
  44.         margin-bottom: 16px;
  45.     }
  47.     #product_review_area .review_list .review_date {
  48.         font-weight: bold;
  49.     }
  51.     #product_review_area .recommend_average {
  52.         margin-left: 16px;
  53.         color: #DE5D50;
  54.     }
  56.     #product_review_area .review_list .recommend_level {
  57.         margin-left: 16px;
  58.         color: #DE5D50;
  59.     }
  61.     #product_review_area .review_list .recommend_name {
  62.         margin-left: 16px;
  63.     }
  65. </style>
  67. <script>
  68.     $(function() {
  69.         $('#product_review_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
  71.         $('#product_review_area .ec-rectHeading').on('click', function() {
  72.             $content = $('#reviewContent');
  73.             if ($content.css('display') == 'none') {
  74.                 $(this).addClass('is_active');
  75.                 $content.addClass('is_active');
  76.                 $content.slideDown(300);
  77.             } else {
  78.                 $(this).removeClass('is_active');
  79.                 $content.removeClass('is_active');
  80.                 $content.slideUp(300);
  81.             }
  82.             return false;
  83.         });
  84.     });
  85. </script>
  87. <!--▼レビューエリア-->
  88. <div id="product_review_area" class="product_review_area">
  89.   
  90.     <div class="ec-role">
  91.         {% set positive_avg_star = ProductReviewAvg %}
  92.         {% set negative_avg_star = 5 - positive_avg_star %}
  94.         <div class="ec-rectHeading is_active">
  95.             <h4>{{ 'product_review.front.product_detail.title'|trans }}
  96.                 <!--平均の星の数-->
  97.                 <span class="recommend_average">{{ stars.stars(positive_avg_star, negative_avg_star) }}</span>
  98.                 <!--レビュー数-->
  99.                 <span>({{ ProductReviewCount }})</span>
  100.                 <span class="chevron pull-right">
  101.                     <i class="fas fa-angle-up fa-lg"></i>
  102.                 </span>
  103.             </h4>
  104.         </div>
  105.         <div id="reviewContent">
  106.             {% if ProductReviews %}
  107.                 <ul class="review_list">
  108.                     {% for ProductReview in ProductReviews %}
  109.                         <li>
  110.                             <p class="review_date">
  111.                                 <!--投稿日-->
  112.                                 {{ ProductReview.create_date|date_day }}
  114.                                 <!--投稿者-->
  115.                                 <span class="recommend_name">
  116.                                             {% if ProductReview.reviewer_url %}
  117.                                                 <a href="{{ ProductReview.reviewer_url }}" rel="ugc nofollow"
  118.                                                    target="_blank">{{ 'product_review.front.product_detail.name'|trans({ '%name%': ProductReview.reviewer_name }) }}</a>
  119.                                             {% else %}
  120.                                                 {{ 'product_review.front.product_detail.name'|trans({ '%name%': ProductReview.reviewer_name }) }}
  121.                                             {% endif %}
  122.                                         </span>
  124.                                 <!--星の数-->
  125.                                 {% set positive_star = ProductReview.recommend_level %}
  126.                                 {% set negative_star = 5 - positive_star %}
  127.                                 <span class="recommend_level">
  128.                                             {{ stars.stars(positive_star, negative_star) }}
  129.                                         </span>
  130.                             </p>
  132.                             <!--タイトル-->
  133.                             <strong>{{ ProductReview.title }}</strong>
  135.                             <!--レビューコメント-->
  136.                             <p>{{ ProductReview.comment|nl2br }}</p>
  137.                         </li>
  138.                     {% endfor %}
  139.                 </ul>
  140.             {% else %}
  141.                 <p>{{ 'product_review.front.product_detail.no_review'|trans }}</p>
  142.             {% endif %}
  143.         </div>
  144.         <div>
  145.             <a href="{{ url('product_review_index', { id: Product.id }) }}"
  146.                class="ec-inlineBtn--action">{{ 'product_review.front.product_detail.post_review'|trans }}</a>
  147.         </div>
  148.     </div>
  149.   
  150.     <div class="accordion ec-role">
  151.       <details>
  152.       <summary>＼教えてください！／<br>
  153.       <span class="small">あなたの声が「ステキの道しるべ」になります</span></summary>
  154.       <p>私たちは、一つひとつの商品がまっすぐ伝わるよう、心を込めて商品紹介をしています。<br>
  155.       ですが、実際に商品を手にしてくださった「リアルな声」に勝るものはありません。<br><br>
  156.       「この使い心地が好き」<br>
  157.       「こんな使い方もおすすめです」<br>
  158.       「リピートしている決め手は」<br><br>
  159.       そんな、あなただけの素直な声が、お気に入りアイテムと出会うための、何より大切な「道しるべ」となります。<br><br>
  160.       もしよろしければ、ほんのひとことでも構いません。<br>
  161.       あなたが感じた商品とのストーリーを、ぜひお聞かせいただけないでしょうか。<br>
  162.       温かいお声が集まることで、この場所がさらにお役に立てることを願っております。</p>
  163.       </details>
  164.       
  165.       <P class="orange bold mb40">レビュー投稿で300ポイント贈呈！詳しくは「レビューを投稿」ボタンから</P>
  166.       <P class="bold center mb40"><a class="underline" href="https://cosme.owl-horie.com/#top-review">全商品の新着レビューを見る</a></P>
  167.       
  168.     </div>
  169.   
  170. </div>
  171. <!-- ▲レビューエリア -->