custom/plugins/HemoReviews/src/Resources/views/storefront/component/product/hemo-review.html.twig line 1

Open in your IDE?
  1. <div class="col-sm-12 hemo-reviews">
  2.     {% set remoteClickOptions = {
  3.         selector: "#review-tab",
  4.         scrollToElement: true
  5.     } %}
  6. <div class="row" style="padding-left: 1rem; padding-right: 1rem; padding-top: 2rem">
  7.     <b style="display: block">Kundenbewertungen({{ reviews|length}})</b>
  8.     <style>
  9.         .bg-reviews{
  10.             background: darkgrey;
  11.         }
  12.         .color{
  13.             background: #8c1e2f;
  14.         }
  15.     </style>
  16.     <div style="display: flex; width: 100%;">
  17.         <div style="width: 40%; display: flex; justify-content: flex-start">
  18.             <b>{{ product.ratingAverage }}/5</b>
  19.         </div>
  20.         <div style="width: 60%; display: flex; justify-content: flex-end">
  21.             <div class="product-rating">
  22.                 {% if product.ratingAverage %}
  23.                     {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
  24.                         points: product.ratingAverage,
  25.                         style: 'text-primary'
  26.                     } %}
  27.                 {% endif %}
  28.             </div>
  29.         </div>
  30.     </div>
  31.     {% set maxpoint = reviews.elements|length %}
  32.     {% set fivepoint = 0 %}
  33.     {% set fourpoint = 0 %}
  34.     {% set threepoint = 0 %}
  35.     {% set twopoint = 0 %}
  36.     {% set onepoint = 0 %}
  37.     {% for review in reviews.elements %}
  38.         {% if review.points >= 5 %} {% set fivepoint = fivepoint + 1 %} {% endif %}
  39.         {% if (review.points < 5) and (review.points >= 4) %} {% set fourpoint = fourpoint + 1 %} {% endif %}
  40.         {% if review.points < 4 and review.points >= 3 %} {% set threepoint = threepoint + 1 %} {% endif %}
  41.         {% if review.points < 3 and review.points >= 2 %} {% set twopoint = twopoint + 1 %} {% endif %}
  42.         {% if review.points < 2 and review.points >= 1 %} {% set onepoint = onepoint + 1 %} {% endif %}
  44.     {% endfor %}
  46.     <div style="width: 100%; position: relative; display: block; height: 20px">
  47.         <span style="position: absolute; top: -10px">5</span> 
  48.         <div class="5point bg-reviews" style="margin-left: 20px; height: 2px;">
  49.             <div class="color" style="width:{% if fivepoint > 0 %}{{ (fivepoint / maxpoint) * 100 }}{% else %}{{ 0 }}{% endif %}%; height: 2px"  ></div> </div>
  50.     </div>
  51.     <div style="width: 100%; position: relative; display: block; height: 20px">
  52.         <span style="position: absolute; top: -10px">4</span>
  53.         <div class="4point bg-reviews" style="margin-left: 20px; height: 2px;">
  54.             <div class="color" style="width:{% if fourpoint > 0 %}{{ (fourpoint / maxpoint) * 100 }}{% else %}{{ 0 }}{% endif %}%; height: 2px" ></div> </div>
  55.     </div>
  56.     <div style="width: 100%; position: relative; display: block; height: 20px">
  57.         <span style="position: absolute; top: -10px">3</span>
  58.         <div class="3point bg-reviews" style="margin-left: 20px; height: 2px;">
  59.             <div class="color" style="width:{% if threepoint > 0 %}{{ (threepoint / maxpoint) * 100 }}{% else %}{{ 0 }}{% endif %}%; height: 2px" ></div> </div>
  60.     </div>
  61.     <div style="width: 100%; position: relative; display: block; height: 20px">
  62.         <span style="position: absolute; top: -10px">2</span>
  63.         <div class="2point bg-reviews" style="margin-left: 20px; height: 2px;">
  64.             <div class="color"style="width:{% if twopoint > 0 %}{{ (twopoint / maxpoint) * 100 }}{% else %}{{ 0 }}{% endif %}%; height: 2px"  ></div> </div>
  65.     </div>
  66.     <div style="width: 100%; position: relative; display: block; height: 20px">
  67.         <span style="position: absolute; top: -10px">1</span>
  68.         <div class="1point bg-reviews" style="margin-left: 20px; height: 2px;">
  69.             <div class="color" style="width:{% if onepoint > 0 %}{{ (onepoint / maxpoint) * 100 }}{% else %}{{ 0 }}{% endif %}%; height: 2px" ></div> </div>
  70.     </div>
  71.     <a
  72.             
  73.        class="product-detail-reviews-link btn btn-secondary"
  74.        data-offcanvas-tabs="true"
  75.        data-remote-click="true"
  76.        data-remote-click-options='{{ remoteClickOptions|json_encode }}'
  77.        href="{{ seoUrl('frontend.detail.page', {'productId': product.id}) }}?tab=review-tab-pane"
  78.        aria-controls="review-tab-pane">
  79.         {{ "detail.reviewLinkText"|trans({'%count%': maxpoint})|sw_sanitize }}
  80.     </a>
  81. </div>
  82.    
  83. </div>