app/Plugin/ProductRating42_dummy/Resource/template/default/rating.twig line 1

Open in your IDE?
  1. <style type="text/css">
  2.     .rating-range{
  3.         font-weight: bold;
  4.         margin-top: 0px;
  5.     }
  7.     .progress-container {
  8.         display: flex;
  9.         justify-content: flex-start;
  10.         align-items: center;
  11.         gap: 12px;
  12.     }
  14.     .progress-container::before {
  15.         content: attr(data-count);
  16.         font-size: 12px;
  17.     }
  19.     .progress {
  20.         flex: 1;
  21.         display: flex;
  22.         height: 0.7rem;
  23.         overflow: hidden;
  24.         font-size: .75rem;
  25.         background-color: #e9ecef;
  26.         border-radius: 0.25rem;
  27.     }
  29.     .progress-bar {
  30.         display: flex;
  31.         flex-direction: column;
  32.         justify-content: center;
  33.         overflow: hidden;
  34.         color: #fff;
  35.         text-align: center;
  36.         white-space: nowrap;
  37.         background-color: #DE5D50;
  38.         transition: width .6s ease;
  39.     }
  41.     .reply {
  42.         background-color: #F8F9FA;
  43.     }
  45.     {# For Stars #}
  46.     .star-block {
  47.         position: relative;
  48.         display: inline-block;
  49.     }
  50.     .star {
  51.         font-size: 20px;
  52.         color: rgba(60,64,67,.38);
  53.         cursor: pointer;
  54.         transition: color 0.3s;
  55.     }
  57.     .star:hover,
  58.     .star.active {
  59.         color: #DE5D50;
  60.     }
  62.     .star-half {
  63.         display: inline-flex;
  64.         font-size: 20px;
  65.         color: rgba(60,64,67,.38);
  66.         cursor: pointer;
  67.         transition: color 0.3s;
  68.     }
  70.     .star-half > div:first-child {
  71.         overflow: hidden;
  72.         width: 10px;
  73.         z-index: 1;
  74.         color: #DE5D50;
  75.     }
  77.     .star-half > div:last-child {
  78.         position: relative;
  79.         margin-left:-10px;
  80.     }
  83.     .customer-reviews .star{
  84.         font-size: 15px;
  85.         padding: 1px;
  86.     }
  88.     .customer-reviews span{
  89.         padding-left: 10px;
  90.     }
  92.     .customer-reviews .remarks{
  93.         font-size: 12px;
  94.     }
  96.     {# For Profile image #}
  97.     .profile-placeholder {
  98.         width: 30px; /* Adjust the size as needed */
  99.         height: 30px;
  100.         border-radius: 50%;
  101.         display: flex;
  102.         align-items: center;
  103.         justify-content: center;
  104.         font-size: 15px; /* Adjust the font size as needed */
  105.         font-weight: bold;
  106.         color: #ffffff; /* Text color, change as needed */
  107.     }
  109.     .initials {
  110.         text-align: center;
  111.         line-height: 1; /* Center the text vertically */
  112.     }
  114.     .form-error-message{
  115.         color: #c04949;
  116.     }
  118.     #product_rating_area .ec-rectHeading.is_active i {
  119.         transform: rotate(180deg);
  120.     }
  122. </style>
  124. <script>
  125.     $(function() {
  126.         // append rating area
  127.         $('#product_rating_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
  129.         // rating submit
  130.         $('#star_submit').on('click', function(){
  131.             var ratingStar = $('#rating_star').val();
  132.             // var sex = $('input[name="rating[Sex]"]:checked').val();
  133.             var title = $('#rating_title').val();
  134.             var formError = false;
  136.             if(!ratingStar){
  137.                 $('#star-err').show();
  138.                 formError = true;
  139.             }else{
  140.                 $('#star-err').hide();
  141.             }
  143.             if(!title){
  144.                 $('#title-err').show();
  145.                 formError = true;
  146.             }else{
  147.                 $('#title-err').hide();
  148.             }
  150.             if(formError){
  151.                 return;
  152.             }
  154.             $('#star_form').submit();
  155.         });
  157.         // show hide ratings
  158.         $('#product_rating_area .ec-rectHeading').on('click', function() {
  159.             $content = $('#ratingContent');
  160.             if ($content.css('display') == 'none') {
  161.                 $(this).addClass('is_active');
  162.                 $content.addClass('is_active');
  163.                 $content.slideDown(300);
  164.             } else {
  165.                 $(this).removeClass('is_active');
  166.                 $content.removeClass('is_active');
  167.                 $content.slideUp(300);
  168.             }
  169.             return false;
  170.         });
  172.         // show rating stars under title
  173.         var stars = "<div class='m-1'>";
  175.         var averageRating = '0.0';
  176.         var avg = Math.ceil(averageRating);
  177.         if(avg > 0){
  178.             for(var i = 1; i <= avg; i++){
  179.                 if(i>averageRating){
  180.                     stars += '<span class="star-half"><div>★</div><div>★</div></span>';
  181.                 }else{
  182.                     stars += '<span class="star active">★</span>';
  183.                 }
  184.             }
  185.         }
  187.         var leftAvg = 5 - avg;
  188.         if(leftAvg > 0){
  189.             for(var i = 1; i <= leftAvg; i++){
  190.                 stars += '<span class="star">★</span>';
  191.             }
  192.         }
  193.         stars += "<span class='average-number'> 0.0(0件)</span>";
  194.         stars += '</div>';
  195.         $('.ec-productRole__title').after(stars);
  196.     });
  198.     let selectedRating = 0;
  200.     function rateApp(rating) {
  201.         selectedRating = rating;
  202.         updateRatingDisplay(rating);
  203.         $('#rating_star').val(rating);
  204.         $('#ratingModal').modal('show');
  205.     }
  207.     function onHover(rating){
  208.         updateRatingDisplay(rating);
  209.     }
  211.     function hoverOut(){
  212.         updateRatingDisplay(selectedRating);
  213.     }
  215.     function updateRatingDisplay(rating) {
  216.         const stars = document.querySelectorAll('.rating');
  217.         stars.forEach((star, index) => {
  218.             star.classList.toggle('active', index < rating);
  219.         });
  221.         // rating for modal star
  222.         const modalStars = document.querySelectorAll('.modal-rating');
  223.         modalStars.forEach((star, index) => {
  224.             star.classList.toggle('active', index < rating);
  225.         });
  226.     }
  228.     function ratingList(productId){
  229.         $('#reviewModal').modal('show')
  230.     }
  231. </script>
  233. <div id="product_rating_area">
  234.     <div class="ec-role">
  235.         <div class="ec-rectHeading is_active">
  236.             <h4>
  237.                 レビュー
  238.                 <span style="float: right" class="chevron pull-right">
  239.                         <i class="fas fa-angle-up fa-lg"></i>
  240.                     </span>
  241.             </h4>
  242.         </div>
  243.         <div id="ratingContent" class="p-2">
  244.             <div class="row mb-2">
  245.                 <div class="col-6">
  246.                     <span class="star rating" onclick="rateApp(1)" onmouseover="onHover(1)" onmouseout="hoverOut()">★</span>
  247.                     <span class="star rating" onclick="rateApp(2)" onmouseover="onHover(2)" onmouseout="hoverOut()">★</span>
  248.                     <span class="star rating" onclick="rateApp(3)" onmouseover="onHover(3)" onmouseout="hoverOut()">★</span>
  249.                     <span class="star rating" onclick="rateApp(4)" onmouseover="onHover(4)" onmouseout="hoverOut()">★</span>
  250.                     <span class="star rating" onclick="rateApp(5)" onmouseover="onHover(5)" onmouseout="hoverOut()">★</span>
  251.                 </div>
  252.                 <div class="col-6 text-right">
  253.                     <button class="ec-inlineBtn--action" data-bs-toggle="modal" data-bs-target="#ratingModal">レビューを書く</button>
  254.                 </div>
  255.             </div>
  256.             {#{% if totalRatings > 3 %}
  257.                 <div class="mb-2">
  258.                     <h5 class="d-inline">全てのレビューを見る</h5>
  259.                         <a class="mt-1" onclick="ratingList({{Product.id}})" class="btn"><i class="fa fa-arrow-right"></i></a>
  260.                 </div>
  261.             {% endif %}
  262.             {% if totalRatings > 0 %}
  263.                 <div class="row">
  264.                     <div class="col-md-2">
  265.                         <h1 class="rating-range">{{ averageRating|number_format(1) }}</h1>
  266.                         {% set avg = averageRating|round(0, 'ceil') %}
  267.                         {% if avg > 0 %}
  268.                             {% for i in 1..avg %}
  269.                                 {% if loop.last == true and i > averageRating %}
  270.                                     <span class="star-half">
  271.                                         <div>★</div><div>★</div>
  272.                                     </span>
  273.                                 {% else %}
  274.                                     <span class="star active">★</span>
  275.                                 {% endif %}
  276.                             {% endfor %}
  277.                         {% endif %}
  279.                         {% set rAvg = 5 - avg %}
  280.                         {% if rAvg > 0 %}
  281.                             {% for j in 1..rAvg %}<span class="star">★</span>{% endfor %}
  282.                         {% endif %}
  283.                         <p>{{ totalRatings }} reviews</p>
  284.                     </div>
  285.                     <div class="col-md-10">
  286.                         <div class="progress-container" data-count="5">
  287.                             <div class="progress">
  288.                                 <div class="progress-bar" role="progressbar" style="width: {{ fiveStar }}%;">
  289.                                     <span class="sr-only"></span>
  290.                                 </div>
  291.                             </div>
  292.                         </div>
  293.                         <div class="progress-container" data-count="4">
  294.                             <div class="progress">
  295.                                 <div class="progress-bar" role="progressbar" style="width: {{ fourStar }}%;">
  296.                                     <span class="sr-only"></span>
  297.                                 </div>
  298.                             </div>
  299.                         </div>
  300.                         <div class="progress-container" data-count="3">
  301.                             <div class="progress">
  302.                                 <div class="progress-bar" role="progressbar" style="width: {{ threeStar }}%;">
  303.                                     <span class="sr-only"></span>
  304.                                 </div>
  305.                             </div>
  306.                         </div>
  307.                         <div class="progress-container" data-count="2">
  308.                             <div class="progress">
  309.                                 <div class="progress-bar" role="progressbar" style="width: {{ twoStar }}%;">
  310.                                     <span class="sr-only"></span>
  311.                                 </div>
  312.                             </div>
  313.                         </div>
  314.                         <div class="progress-container" data-count="1">
  315.                             <div class="progress">
  316.                                 <div class="progress-bar" role="progressbar" style="width: {{ oneStar }}%;">
  317.                                     <span class="sr-only"></span>
  318.                                 </div>
  319.                             </div>
  320.                         </div>
  321.                     </div>
  322.                 </div>
  323.             {% endif %}
  324.             {% for rating in ratings %}
  325.                 <div class="row mt-3 customer-reviews">
  326.                     <div class="col-md-12">
  327.                         <div class="user-review" style="display: flex;">
  328.                             {% set randomColor = rating.getRandomColor() %}
  329.                             <div class="profile-placeholder" style="background-color: {{ randomColor }}">
  330.                                 <div class="initials">{{ rating.customer_name|first|upper }}</div>
  331.                             </div>
  332.                             <span class="mt-2">{{ rating.customer_name }}</span>
  333.                         </div>
  334.                     </div>
  335.                     <div class="mt-2">
  336.                         {% for i in 1..rating.star %}<span class="star active">★</span>{% endfor %}
  337.                         {% set noStar = 5 - rating.star %}
  338.                         {% if noStar > 0 %}
  339.                             {% for j in 1..noStar %}<span class="star">★</span>{% endfor %}
  340.                         {% endif %}
  341.                         <span class='remarks'>{{ rating.create_date|date_min }}</span>
  342.                     </div>
  343.                     <h6 class="mt-1 mb-1 font-weight-bold">{{ rating.title }}</h6>
  344.                     <p class="remarks">{{ rating.remarks }}</p>
  345.                     {% if config.getCanReply() and rating.reply != "" %}
  346.                         <div class="m-2"><p class="p-2 remarks reply">{{ rating.reply }}</p></div>
  347.                     {% endif %}
  348.                 </div>
  349.             {% endfor %}
  350.             {% if totalRatings > 3 %}
  351.                 <button type="button" class="btn btn-light mt-3" onclick="ratingList({{Product.id}})">全てのレビューを見る</button>
  352.             {% endif %}#}
  353.         </div>
  354.     </div>
  355.     <div class="modal fade" id="ratingModal" tabindex="-1" role="dialog"
  356.          aria-labelledby="ratingModal" aria-hidden="true">
  357.         <div class="modal-dialog" role="document">
  358.             <div class="modal-content">
  359.                 <div class="modal-header">
  360.                     <h5 class="modal-title">{{ Product.name }}</h5>
  361.                     <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">
  363.                     </button>
  364.                 </div>
  365.                 <form action="#" method="post" id="star_form" name="star_form">
  366.                     <div class="modal-body">
  367.                         <div class="row">
  368.                             <div class="col text-center">
  369.                                 <span class="star modal-rating" onclick="rateApp(1)" onmouseover="onHover(1)" onmouseout="hoverOut()">★</span>
  370.                                 <span class="star modal-rating" onclick="rateApp(2)" onmouseover="onHover(2)" onmouseout="hoverOut()">★</span>
  371.                                 <span class="star modal-rating" onclick="rateApp(3)" onmouseover="onHover(3)" onmouseout="hoverOut()">★</span>
  372.                                 <span class="star modal-rating" onclick="rateApp(4)" onmouseover="onHover(4)" onmouseout="hoverOut()">★</span>
  373.                                 <span class="star modal-rating" onclick="rateApp(5)" onmouseover="onHover(5)" onmouseout="hoverOut()">★</span>
  374.                             </div>
  375.                         </div>
  376.                         <div id='star-err' class="row" style="display: none;">
  377.                             <div class="col text-center">
  378.                                 <span class="form-error-icon badge bg-danger text-uppercase">エラー</span> <span class="form-error-message">入力されていません。</span>
  379.                             </div>
  380.                         </div>
  381.                         <div class="mb-2"></div>
  382.                         {#{% if customer is null %}
  383.                             <div class="row mb-2">
  384.                                 <div class="col-3">
  385.                                     <label class="ec-label form-label" for="rating_customer_name">投稿者名</label>
  386.                                 </div>
  387.                                 <div class="col">
  388.                                     <input type="text" id="rating_customer_name" name="rating[customer_name]" placeholder="投稿者名" required="required" class="form-control" />
  389.                                     <div id='name-err' style="display: none;">
  390.                                         <span class="form-error-icon badge bg-danger text-uppercase">エラー</span>
  391.                                         <span class="form-error-message">入力されていません。</span>
  392.                                     </div>
  393.                                 </div>
  394.                             </div>
  395.                             <div class="row mb-2">
  396.                                 <div class="col-3">
  397.                                     <label class="ec-label form-label" for="rating_email">メール</label>
  398.                                 </div>
  399.                                 <div class="col">
  400.                                     <input type="email" id="rating_email" name="rating[email]" placeholder="例：ec-cube@example.com" required="required" class="form-control" />
  401.                                     <div id='email-err' style="display: none;">
  402.                                         <span class="form-error-icon badge bg-danger text-uppercase">エラー</span>
  403.                                         <span class="form-error-message">入力されていません。</span>
  404.                                     </div>
  405.                                 </div>
  406.                             </div>
  407.                             <div class="row mb-2">
  408.                                 <div class="col-3">
  409.                                     <legend class="ec-label col-form-label">性別</legend>
  410.                                 </div>
  411.                                 <div class="col">
  412.                                     <div id="rating_Sex"><div class="form-check form-check-inline"><input type="radio" id="rating_Sex_1" name="rating[Sex]" class="form-check-input" value="1" />
  413.                                             <label class="form-check-label" for="rating_Sex_1">男性</label></div><div class="form-check form-check-inline"><input type="radio" id="rating_Sex_2" name="rating[Sex]" class="form-check-input" value="2" />
  414.                                             <label class="form-check-label" for="rating_Sex_2">女性</label></div></div>
  416.                                 </div>
  417.                             </div>
  418.                         {% endif %}#}
  419.                         <div class="row mb-2">
  420.                             <div class="col-3">
  421.                                 <label class="ec-label form-label required" for="rating_title">タイトル</label>
  422.                             </div>
  423.                             <div class="col">
  424.                                 <input type="text" id="rating_title" name="rating[title]" required="required" placeholder="タイトル" class="form-control" />
  425.                                 <div id='title-err' style="display: none;">
  426.                                     <span class="form-error-icon badge bg-danger text-uppercase">エラー</span>
  427.                                     <span class="form-error-message">入力されていません。</span>
  428.                                 </div>
  429.                             </div>
  430.                         </div>
  431.                         <div class="row">
  432.                             <div class="col-3">
  433.                                 <label class="ec-label form-label required" for="rating_remarks">本文</label>
  434.                             </div>
  435.                             <div class="col">
  436.                                 <textarea id="rating_remarks" name="rating[remarks]" required="required" placeholder="本文" class="form-control"></textarea>
  438.                             </div>
  439.                         </div>
  440.                     </div>
  441.                     <div class="modal-footer">
  442.                         <button id="star_submit" type="button" class="ec-inlineBtn--action">投稿する</button>
  443.                     </div>
  444.                 </form>
  445.             </div>
  446.         </div>
  447.     </div>
  448.     <div class="modal fade" id="reviewModal" tabindex="-1" role="dialog"
  449.          aria-labelledby="reviewModal" aria-hidden="true">
  450.         <div class="modal-dialog" role="document">
  451.             <div class="modal-content">
  452.                 <div class="modal-header">
  453.                     <h5 class="modal-title">{{ Product.name }}</h5>
  454.                     <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">
  456.                     </button>
  457.                 </div>
  458.                 <div class="modal-body" id='ratingList'>
  459.                 </div>
  460.             </div>
  461.         </div>
  462.     </div>
  463. </div>