templates/components/google_avis.html.twig line 1

Open in your IDE?
  1. <style>
  2. @media screen and (max-width: 480px) {
  3.     .row .note-google .jq-star{
  4.         width: 30px !important;
  5.         height: 30px !important;
  6.     }
  8.     .note-google h2{
  9.         font-size: 24px !important;
  10.     }
  11. }
  12. @media screen and (max-width: 1700px) {
  13.     .note-google .jq-star{
  14.         width: 40px !important;
  15.         height: 40px !important;
  16.     }
  17. }
  19. .note-google h2{
  20.     font-size: 32px 
  21. }
  22. </style>
  24. <section class=" p-20"
  25.     style="background-color:{{centreGroupe.centregroupecss.bg1}};border-bottom: 1px solid rgba(120,130,140,0.13);">
  26.     <div class="row">
  27.         <div class={{centre.ctrparametrecentre.pcavisgoogle ? "col-lg-4" :"col-lg-6"}}>
  28.             <h2 class="PN-Black PN-color1">
  29.                 Coordonnées
  30.             </h2>
  31.             {# <div id="map_{{key}}" style="height: 500px; width:100%"></div> #}
  32.             {% if array_centres[key]['avis']['result'] is defined %}
  33.                 <iframe
  34.                         src="https://maps.google.com/maps?&q={{array_centres[key].avis.result.name|replace({' ' : '+'})}},{{array_centres[key].avis.result.formatted_address|replace({' ' : '+'})}}&output=embed"
  35.                         width="100%" height="500px"></iframe>
  36.             {% endif %}
  38.         </div>
  39.         <div class={% if centre.ctrparametrecentre.pcavisgoogle %} "col-lg-3 p-t-30" {% else %} "col-lg-6 p-t-30" {%
  40.             endif %}>
  42.             <h4 class="PN-Black PN-color1">Adresse</h4>
  44.             <p class=" PN-color1">
  45.                 {{centre.ctradresse.adrrue}} <br>
  46.                 {% if centre.ctradresse.adrcomplement %}
  47.                     {{centre.ctradresse.adrcomplement}} <br>
  48.                 {% endif %}
  49.                 {{centre.ctradresse.adrcodepostal}} {{centre.ctradresse.adrville}}
  50.             </p>
  52.             <h4 class="PN-Black PN-color1 p-t-20">Contact</h4>
  53.             <a href="tel:{{centre.ctrtelephone}}">
  54.                 <h4 class="PN-color1"><span class="mdi mdi-phone mdi-rotate-45"> </span>{{centre.ctrtelephone}}</h4>
  55.             </a>
  56.             <a href="mailto:{{centre.ctremail}}">
  57.                 <h4 class="PN-color1"><span class="mdi mdi-email"> </span>{{centre.ctremail}}</h4>
  58.             </a>
  59.             <h4 class="PN-Black PN-color1 p-t-20">Horaires</h4>
  61.             {% set trans_day_hash = {
  62.             "Monday": "Lundi",
  63.             "Tuesday": "Mardi",
  64.             "Wednesday": "Mercredi",
  65.             "Thursday": "Jeudi",
  66.             "Friday": "Vendredi",
  67.             "Saturday": "Samedi",
  68.             "Sunday": "Dimanche"
  69.             }
  70.             %}
  72.             {% for key1,row in array_centres[key]['Horaires'] %}
  74.                 {% if row.matin.ouvert or row.apres_midi.ouvert %}
  75.                     <h4 class=" 0-0 {% if trans_day_hash[" now"|date('l')]==key1 %} text-info {% else %} PN-color1 {% endif %}">
  76.                     {{key1}} : <span class="  ">
  77.                     {% if row.matin.ouvert %}
  78.                         {{row.matin.ouverture|date("H:i")}}
  79.                         {% if row.apres_midi.ouverture|date("H:i") != row.matin.fermeture|date("H:i") or row.apres_midi.ouvert == false%}
  80.                             - {{row.matin.fermeture|date("H:i")}}
  81.                         {% endif %}
  82.                         {% if row.apres_midi.ouvert and row.apres_midi.ouverture|date("H:i") != row.matin.fermeture|date("H:i") %}
  83.                             et
  84.                         {% endif %}
  85.                     {% endif %}
  87.                     {% if row.apres_midi.ouvert %}
  88.                         {% if row.apres_midi.ouverture|date("H:i") != row.matin.fermeture|date("H:i") or row.matin.ouvert == false %}
  89.                             {{row.apres_midi.ouverture|date("H:i")}}
  90.                         {% endif %}
  91.                         - {{row.apres_midi.fermeture|date("H:i")}}
  92.                     {% endif %}
  93.                     </span></h4>
  94.                 {% endif %}
  95.             {% endfor %}
  96.         </div>
  97.         {% if centre.ctrparametrecentre.pcavisgoogle %}
  99.         <div class="col-lg-5 row">
  100.             <div class="col-lg-12">
  101.                 <h2 class="PN-Black PN-color1 m-b-20">
  102.                     Ce que pensent nos clients sur google
  103.                 </h2>
  104.             </div>
  105.             <div class="col-lg-12">
  106.                 <h4 class="PN-Black PN-color1">
  107.                     {% if array_centres[key]['avis'] %}
  108.                         {% if array_centres[key]['avis']['result'] is defined %}
  109.                             {{array_centres[key]['avis']['result']['name']}}
  110.                         {% endif %}
  112.                     {% endif %}
  113.                 </h4>
  114.             </div>
  115.             <div class="rating col-lg-8 d-flex align-items-center note-google">
  116.                 <h2 class="PN-Black PN-color1 p-r-10">
  117.                     {% if array_centres[key]['avis'] %}
  118.                         {% if array_centres[key]['avis']['result'] is defined %}
  119.                             {{array_centres[key]['avis']['result']['rating']}}</h2>
  120.                         {% endif %}
  121.                     {% endif %}
  122.                 <div class="stars_{{key}} p-r-10"></div>
  123.                 <div>
  124.                     <h4 class=" PN-color1 p-r-20">
  125.                         {% if array_centres[key]['avis'] %}
  126.                             {% if array_centres[key]['avis']['result'] is defined %}
  127.                                 {{array_centres[key]['avis']['result']['user_ratings_total']}} Avis</h4>
  128.                             {% endif %}
  129.                         {% endif %}
  130.                 </div>
  131.             </div>
  132.             <div class="col-lg-4">
  133.                 {% if array_centres[key]['avis'] %}
  134.                     {% if array_centres[key]['avis']['result'] is defined %}
  135.                         <a href="{{array_centres[key]['avis']['result']['url']}}" target="_blank"
  136.                            class="btn btn-outline-custom-bg2 PN-colorbg1 btn-rounded p-l-20 border-0"
  137.                            style="font-size: 15px;background-color: white;color:{{centreGroupe.centregroupecss.bg1}}">
  138.                         <span style="display: flex;align-items: center;"> Plus d'avis
  139.                             <i class="mdi mdi-open-in-new mdi-24px"></i></span>
  140.                         </a>
  141.                     {% endif %}
  142.                 {% endif %}
  143.             </div>
  145.             <div class="col-lg-12 row p-t-20" style="display: flex;justify-content: flex-end;">
  147.                 {% set nb_reviews = 0 %}
  148.                 {% if array_centres[key]['avis'] %}
  149.                     {% if array_centres[key]['avis']['result'] is defined %}
  150.                         {% for row in array_centres[key]['avis']['result']['reviews'] %}
  151.                             {% set nb_reviews = nb_reviews + 1 %}
  152.                             {% if nb_reviews < 5 %} <div class="col-lg-12 col-xl-6  row p-t-10 ">
  153.                                 <div class="btn-rounded row "
  154.                                      style="background-color:white;border-radius: 25px;margin-right: 25px;">
  156.                                     <div class="col-auto">
  157.                                         <img src="{{row.profile_photo_url}}" alt="" width="60px">
  158.                                     </div>
  159.                                     <div class="col-auto">
  160.                                         <p class="PN-Light PN-blue PN-Bold m-0" style="font-size: 12px;">
  161.                                             {{row.relative_time_description}}</p>
  162.                                         <p class="PN-Light PN-blue m-0" style="font-size: 12px;">{{row.author_name}}</p>
  163.                                         <div class="stars_{{key}}_{{nb_reviews}} p-r-10"></div>
  164.                                     </div>
  166.                                     <div class="col-lg-12">
  167.                                         <p class="PN-Light PN-blue m-0" style="font-size: 12px;">{{row.text}}</p>
  168.                                     </div>
  169.                                 </div>
  170.                             </div>
  171.                             {% endif %}
  172.                         {% endfor %}
  173.                     {% endif %}
  174.             {% endif %}
  175.         </div>
  176.         {% endif %}
  178.     </div>
  180. </section>
  182. <script>
  183.   
  184. document.addEventListener('DOMContentLoaded', function () {
  185.     function afficheStar(rating, className, starSize) {
  186.         $("."+className).starRating({
  187.             initialRating: rating,
  188.             strokeColor: 'gold',
  189.             useGradient: false,
  190.             strokeWidth: 0,
  191.             starSize: starSize,
  192.             readOnly: true
  193.         });
  194.     }
  196.     for (let i = 0; i < $('#countCentre').data('countcentres'); i++) {
  197.         var lat = $('#infocentre_' + i).data('coordonneegps').split(',')[0]
  198.         var lng = $('#infocentre_' + i).data('coordonneegps').split(',')[1]
  199.     //    initMap(i, lat, lng)
  200.         afficheStar($('#infocentre_' + i).data('rating'), 'stars_' + i, 50)
  201.         for (let x = 0; x < $('#infocentreavis_' + i).text().split('|').length; x++) {
  202.             afficheStar($('#infocentreavis_' + i).text().split('|')[x], 'stars_' + i + '_' + (x + 1), 20)
  203.         }
  204.     }
  205. });
  207. </script>