templates/bundles/OdiseoSyliusBlogPlugin/Shop/Evenement/show.html.twig line 1

Open in your IDE?
  2. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% block metatags %}
  4.     {% if article.categories[0].code == 'article' %}
  5.         <script>
  6.           window.location.href = "{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug': article.translations.toArray()['fr_FR'].slug}) }}";
  7.         </script>
  8.     {% endif %}
  9.     {% if article.metaKeywords is not empty %}
  10.         <meta name="keywords" content="{{ article.metaKeywords }}"/>
  11.     {% endif %}
  12.     {% if article.metaDescription is not empty %}
  13.         <meta name="description" content="{{ article.metaDescription }}"/>
  14.     {% endif %}
  15. {% endblock %}
  17. {% block content %}
  19.     {% block blog_article %}
  20.         <div class="container-h">
  21.             <div class="ui grid" id="container-show-evenement">
  22.                 <div class="container-show-event-inside">
  23.                     <div class="container-left">
  24.                         <div class="ui items">
  25.                             <div class="item">
  26.                                 <div class="content">
  27.                                     <div class="image-destock">
  28.                                         {% if article.images|length > 0 %}
  29.                                             <div class="image-div-evenement">
  30.                                             </div>
  31.                                             <div class="container-image-evenement">
  32.                                                 <div class="first-image-evenement">
  33.                                                     <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" class="ui image" alt="{{ article.images[0].path }}">
  34.                                                 </div>
  35.                                                 {% if article.images|length > 1 %}
  36.                                                     <div class="second-image-evenement">
  37.                                                         <img src="{{ article.images[1].path|imagine_filter(filter|default('sylius_large')) }}" class="ui image" alt="{{ article.images[1].path }}">
  38.                                                     </div>
  39.                                                     {% endif %}
  40.                                                 {% if article.images|length > 2  %}
  41.                                                     <div class="third-image-evenement">
  42.                                                         <img src="{{ article.images[2].path|imagine_filter(filter|default('sylius_large')) }}" class="ui image" alt="{{ article.images[2].path }}">
  43.                                                     </div>
  44.                                                 {% endif %}
  45.                                             </div>
  46.                                         {% endif %}
  47.                                     </div>
  49.                                     <div class="image-responsive">
  50.                                         {% if article.images|length > 0 %}
  51.                                             <script>
  52.                                               function changeImage(index) {
  53.                                                 // Récupérer toutes les images de la galerie
  54.                                                 var images = document.querySelectorAll('.header-image-event-container #card-image-header-event');
  56.                                                 // Réinitialiser la classe "active" pour tous les points
  57.                                                 var points = document.querySelectorAll('.point');
  58.                                                 points.forEach(function(point) {
  59.                                                   point.classList.remove('active');
  60.                                                 });
  62.                                                 // Cacher toutes les images de la galerie
  63.                                                 images.forEach(function(image) {
  64.                                                   image.style.display = 'none';
  65.                                                 });
  67.                                                 console.log(images[index - 1])
  68.                                                 // Afficher l'image correspondante à l'index spécifié
  69.                                                 images[index - 1].style.display = 'block';
  71.                                                 // Ajouter la classe "active" au point correspondant à l'index spécifié
  72.                                                 points[index - 1].classList.add('active');
  73.                                               }
  74.                                             </script>
  76.                                             <div class="header-image-event-container">
  77.                                             {% for image in article.images %}
  78.                                                     <img src="{{ image.path|imagine_filter(filter|default('sylius_large')) }}" class="ui image" alt="{{ image.path }}" id="card-image-header-event">
  79.                                             {% endfor %}
  80.                                             </div>
  81.                                             <div class="points-header-image-event">
  82.                                                 <span class="point active" onclick="changeImage(1)"></span>
  83.                                                 <span class="point" onclick="changeImage(2)"></span>
  84.                                                 <span class="point" onclick="changeImage(3)"></span>
  85.                                             </div>
  86.                                         {% else %}
  88.                                         {% endif %}
  89.                                     </div>
  90.                                         <div class="description-evenement">
  91.                                             <div class="description-title">
  92.                                                 <h1>{{ article.title }}</h1>
  93.                                                 {% set month =  article.DateEvenement|date('F') %}
  94.                                                 {% set translation = 'sylius.ui.' ~ month %}
  95.                                                 <div class="desc-date">
  96.                                                     <div class="date-product-show">
  97.                                                         <i class="calendar alternate outline icon"></i>
  98.                                                         <span>
  99.                                                               {{ article.DateEvenement|date('j') }} {{ translation|trans }}, {{ article.DateEvenement|date('Y') }}
  100.                                                         </span>
  101.                                                     </div>
  102.                                                     <div class="place-product-show">
  103.                                                         <i class="map marker alternate icon"></i>
  104.                                                         <span>{{ article.articleLocation.location }}</span>
  105.                                                     </div>
  106.                                                 </div>
  107.                                             </div>
  108.                                             <div class="description-text-and-localisation">
  109.                                                 <div>
  110.                                                     <h4>Description</h4>
  111.                                                     <div class="description-text">
  112.                                                         {{ article.content|raw }}
  113.                                                     </div>
  114.                                                 </div>
  115.                                                 <div>
  116.                                                     <h4>Localisation</h4>
  117.                                                     <div id='map'></div>
  118.                                                     <script>
  119.                                                       mapboxgl.accessToken = '{{ token_mapbox }}';
  120.                                                       var map = new mapboxgl.Map({
  121.                                                         container: 'map',
  122.                                                         style: 'mapbox://styles/mapbox/streets-v11',
  123.                                                         center: [{{ article.articleLocation.latitude }}, {{ article.articleLocation.longitude }}], // starting position
  124.                                                         zoom: 9 // starting zoom
  125.                                                       });
  127.                                                       // Ajouter un marqueur au centre de la carte
  128.                                                       new mapboxgl.Marker()
  129.                                                         .setLngLat([{{ article.articleLocation.latitude }}, {{ article.articleLocation.longitude }}])
  130.                                                         .addTo(map);
  131.                                                     </script>
  132. {#                                                    <div class="share-sm">#}
  133. {#                                                        <h4>Partager:</h4>#}
  134. {#                                                        <ul>#}
  135. {#                                                            <li>#}
  136. {#                                                                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">#}
  137. {#                                                                    <path d="M24.9294 8.07328C24.916 7.06344 24.7269 6.06364 24.3708 5.11861C24.0619 4.32148 23.5901 3.59754 22.9857 2.99305C22.3812 2.38856 21.6572 1.91681 20.8601 1.60794C19.9272 1.25775 18.9417 1.0684 17.9454 1.04794C16.6628 0.990609 16.2561 0.974609 13.0001 0.974609C9.74409 0.974609 9.32676 0.974609 8.05343 1.04794C7.05764 1.06855 6.07256 1.2579 5.14009 1.60794C4.34284 1.9166 3.61879 2.38827 3.01427 2.99279C2.40975 3.5973 1.93808 4.32135 1.62943 5.11861C1.27854 6.05079 1.08959 7.03609 1.07076 8.03194C1.01343 9.31594 0.996094 9.72261 0.996094 12.9786C0.996094 16.2346 0.996094 16.6506 1.07076 17.9253C1.09076 18.9226 1.27876 19.9066 1.62943 20.8413C1.9386 21.6383 2.41062 22.362 3.01534 22.9663C3.62006 23.5706 4.34418 24.042 5.14143 24.3506C6.07134 24.7149 7.05659 24.9178 8.05476 24.9506C9.33876 25.0079 9.74543 25.0253 13.0014 25.0253C16.2574 25.0253 16.6748 25.0253 17.9481 24.9506C18.9443 24.931 19.9299 24.7421 20.8628 24.3919C21.6597 24.0827 22.3834 23.6108 22.9879 23.0064C23.5923 22.402 24.0642 21.6782 24.3734 20.8813C24.7241 19.9479 24.9121 18.9639 24.9321 17.9653C24.9894 16.6826 25.0068 16.2759 25.0068 13.0186C25.0041 9.76261 25.0041 9.34928 24.9294 8.07328ZM12.9921 19.1359C9.58676 19.1359 6.82809 16.3773 6.82809 12.9719C6.82809 9.56661 9.58676 6.80794 12.9921 6.80794C14.6269 6.80794 16.1947 7.45736 17.3507 8.61334C18.5067 9.76931 19.1561 11.3371 19.1561 12.9719C19.1561 14.6067 18.5067 16.1746 17.3507 17.3305C16.1947 18.4865 14.6269 19.1359 12.9921 19.1359ZM19.4014 8.01728C19.2126 8.01745 19.0256 7.98039 18.8512 7.90822C18.6767 7.83605 18.5182 7.73019 18.3847 7.59668C18.2512 7.46318 18.1453 7.30466 18.0731 7.13019C18.001 6.95573 17.9639 6.76875 17.9641 6.57994C17.9641 6.39128 18.0013 6.20446 18.0735 6.03015C18.1457 5.85585 18.2515 5.69747 18.3849 5.56407C18.5183 5.43066 18.6767 5.32484 18.851 5.25264C19.0253 5.18044 19.2121 5.14328 19.4008 5.14328C19.5894 5.14328 19.7762 5.18044 19.9506 5.25264C20.1249 5.32484 20.2832 5.43066 20.4166 5.56407C20.55 5.69747 20.6559 5.85585 20.7281 6.03015C20.8003 6.20446 20.8374 6.39128 20.8374 6.57994C20.8374 7.37461 20.1948 8.01728 19.4014 8.01728Z" fill="black"/>#}
  138. {#                                                                </svg>#}
  139. {#                                                            </li>#}
  140. {#                                                            <li>#}
  141. {#                                                                <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">#}
  142. {#                                                                    <path d="M27.3337 2.73337C26.3314 3.16816 25.2716 3.45559 24.187 3.5867C25.3312 2.90313 26.1887 1.82775 26.6003 0.560035C25.5251 1.20012 24.348 1.6511 23.1203 1.89337C22.2997 1.00346 21.2069 0.411097 20.0134 0.209171C18.8199 0.00724411 17.593 0.20718 16.5254 0.777621C15.4577 1.34806 14.6096 2.25674 14.114 3.36115C13.6184 4.46556 13.5034 5.70322 13.787 6.88003C11.6129 6.77007 9.48625 6.20397 7.5452 5.21852C5.60415 4.23306 3.89212 2.85029 2.52033 1.16004C2.03918 2.00026 1.78635 2.9518 1.78699 3.92004C1.78529 4.81921 2.00595 5.70486 2.42933 6.49812C2.85272 7.29138 3.46568 7.96765 4.21366 8.4667C3.3443 8.44305 2.49351 8.20977 1.73366 7.7867V7.85337C1.74017 9.11322 2.18165 10.3322 2.98341 11.304C3.78517 12.2758 4.898 12.9409 6.13366 13.1867C5.658 13.3315 5.16416 13.4078 4.66699 13.4134C4.32285 13.4093 3.97956 13.3781 3.64033 13.32C3.99221 14.4038 4.67316 15.3509 5.58843 16.0296C6.50369 16.7083 7.60776 17.0848 8.74699 17.1067C6.82326 18.6204 4.44817 19.4465 2.00033 19.4534C1.55464 19.4548 1.10931 19.4281 0.666992 19.3734C3.16623 20.987 6.07874 21.8437 9.05366 21.84C11.1066 21.8614 13.1432 21.4734 15.0445 20.6988C16.9458 19.9242 18.6737 18.7785 20.1273 17.3287C21.5808 15.8788 22.7309 14.1539 23.5104 12.2546C24.2899 10.3553 24.683 8.31967 24.667 6.2667V5.56003C25.7133 4.77978 26.6156 3.82327 27.3337 2.73337Z" fill="black"/>#}
  143. {#                                                                </svg>#}
  144. {#                                                            </li>#}
  145. {#                                                            <li>#}
  146. {#                                                                <svg width="14" height="26" viewBox="0 0 14 26" fill="none" xmlns="http://www.w3.org/2000/svg">#}
  147. {#                                                                    <path d="M3.264 25.6667H8.59733V14.9867H13.4027L13.9307 9.68004H8.59733V7.00004C8.59733 6.64642 8.73781 6.30728 8.98786 6.05723C9.23791 5.80718 9.57705 5.66671 9.93067 5.66671H13.9307V0.333374H9.93067C8.16256 0.333374 6.46687 1.03575 5.21662 2.286C3.96638 3.53624 3.264 5.23193 3.264 7.00004V9.68004H0.597336L0.0693359 14.9867H3.264V25.6667Z" fill="black"/>#}
  148. {#                                                                </svg>#}
  149. {#                                                            </li>#}
  150. {#                                                        </ul>#}
  151. {#                                                    </div>#}
  152.                                                 </div>
  153.                                             </div>
  154.                                         </div>
  155.                                 </div>
  156.                             </div>
  157.                         </div>
  158.                     </div>
  159.                 </div>
  161.             </div>
  162.         </div>
  163.         <div id="div-evenement-similary">
  164.             {% include '@OdiseoSyliusBlogPlugin/Shop/_sidebarEvenement.html.twig' %}
  165.         </div>
  166.     {% endblock %}
  167.     <style>
  168.         #main-container{
  169.             padding-bottom: 0 !important;
  170.         }
  171.     </style>
  172. {% endblock %}