templates/pages/partials/stadium_categories.html.twig line 1

Open in your IDE?
  1. <div class="component checkout-step-panel" id="stadiumCategories" data-type="stadium-categories" data-checkout-step="stadiumCategories"
  2.      {% if basket.stadiumCategory is empty %}style="display:none;"{% endif %}>
  3.     <script type="text/javascript">
  4.         function showCat1() {
  5.             document.getElementById('stadionImageCat1').style.display = 'block';
  6.             document.getElementById('stadionImageCat2').style.display = 'none';
  7.             document.getElementById('stadionImageCat3').style.display = 'none';
  8.         }
  10.         function showCat2() {
  11.             document.getElementById('stadionImageCat1').style.display = 'none';
  12.             document.getElementById('stadionImageCat2').style.display = 'block';
  13.             document.getElementById('stadionImageCat3').style.display = 'none';
  14.         }
  16.         function showCat3() {
  17.             document.getElementById('stadionImageCat1').style.display = 'none';
  18.             document.getElementById('stadionImageCat2').style.display = 'none';
  19.             document.getElementById('stadionImageCat3').style.display = 'block';
  20.         }
  21.     </script>
  22.     <div class="whitebox stadium-categories">
  23.         <form action="">
  24.             <div class="row">
  25.                 <div class="col-12">
  26.                     <h3 class="text-center strike">
  27.                         <span>Jouw <span>wedstrijdtickets</span></span>
  28.                     </h3>
  29.                 </div>
  30.                 <div class="col-12 col-md-6">
  31.                     <h4>Kies je plek in het stadion</h4>
  32.                     {% for category in match.categories %}
  33.                         <div class="vr-radio">
  34.                             <div class="form-check vr-radio-default hover-color">
  35.                                 {% if category.unavailable == 1 %}
  36.                                     <input class="form-check-input" type="radio" name="stadionCat"
  37.                                            id="stadionCat-{{ category.category.id }}" disabled="disabled"
  38.                                            value="{{ category.category.id }}">
  39.                                     <label class="form-check-label vr-stadion-check"
  40.                                            for="stadionCat-{{ category.category.id }}"
  41.                                            id="ImageCat{{ category.category.id }}">
  42.                                         <span class="description">{{ category.category.name }}{% if category.category.information|striptags is not empty %}
  43.                                                 <a class="category-tooltip"
  44.                                                    data-component="Modal"
  45.                                                    data-toggle="modal"
  46.                                                    data-target="#stadium_category_modal"
  47.                                                    data-title="{{ category.category.name }}"
  48.                                                    data-content="{{ category.category.information|raw }}"
  49.                                                 >
  50.                                         <i class="fas fa-info-circle blue"></i>
  51.                                     </a>
  52.                                             {% endif %}</span>
  53.                                         <span class="subDescription">
  54.                                                 Uitverkocht
  55.                                         </span>
  56.                                     </label>
  57.                                 {% else %}
  58.                                     <input class="form-check-input" type="radio" name="stadionCat"
  59.                                            id="stadionCat-{{ category.category.id }}" {{ basket.stadiumCategory == category.category.id ? 'checked' : '' }}
  60.                                            value="{{ category.category.id }}"
  61.                                             {% if category.price is null %} disabled="disabled" {% endif %}
  62.                                     >
  63.                                     <label class="form-check-label vr-stadion-check"
  64.                                            for="stadionCat-{{ category.category.id }}"
  65.                                            id="ImageCat{{ category.category.id }}">
  66.                                         <span class="description">{{ category.category.name }}
  67.                                             {% if category.category.information|striptags is not empty %}
  68.                                                 <a class="category-tooltip"
  69.                                                    data-component="Modal"
  70.                                                    data-toggle="modal"
  71.                                                    data-target="#stadium_category_modal"
  72.                                                    data-title="{{ category.category.name }}"
  73.                                                    data-content="{{ category.category.information|raw }}"
  74.                                                 >
  75.                                                     <i class="fas fa-info-circle blue"></i>
  76.                                                 </a>
  77.                                             {% endif %}
  78.                                         </span>
  79.                                         <span class="subDescription">
  80.                                                 {% if category.price is not null %}
  81.                                                     {% if category.price.amount == '0' %}
  82.                                                         Inbegrepen
  83.                                                     {% else %}
  84.                                                         + {{ category.price.amount/100|number_format(0) }},- p.p.
  85.                                                     {% endif %}
  86.                                                 {% else %}
  87.                                                     Uitverkocht
  88.                                                 {% endif %}
  89.                                         </span>
  90.                                     </label>
  91.                                 {% endif %}
  92.                             </div>
  93.                         </div>
  94.                     {% endfor %}
  95.                 </div>
  96.                 <div class="col-12 col-md-6">
  97.                     <div data-stadium-map>
  98.                         {% set count = 0 %}
  99.                         {% for category in match.categories %}
  100.                             <div id="stadionImageCat{{ category.getCategory().id }}"
  101.                                  data-stadium-map-rel="{{ category.getCategory().id }}"
  102.                                  class="stadionImageClass stadionImage{{ count }}" style="display: none;">
  103.                                 <img src="{{ media_asset(category.getCategory().image) }}">
  104.                             </div>
  105.                             {% set count = count +1 %}
  106.                         {% endfor %}
  107.                     </div>
  108.                 </div>
  109.                 <div class="col-12 mt-3">
  110.                     <div class="alert alert-secondary checkout-offerte-alert" role="alert">
  111.                         Liever volledig ontzorgt? Vraag een <a href="/offerteaanvraag" class="alert-link">offerte aan</a>
  112.                     </div>
  113.                 </div>
  114.                 <div class="col-12 mt-30">
  115.                     <div class="col-12 d-flex justify-content-center flex-column flex-sm-row flex-wrap align-items-center checkout-step-actions">
  116.                         <button type="button" class="is-btn checkout-prev-step mb-5 mb-sm-0 mr-sm-3 align-self-center"
  117.                                 data-scroll="matchComposer">
  118.                             <span>Vorige</span> stap
  119.                         </button>
  120.                         <button type="button"
  121.                                 class="is-btn is-background-color-primary stroke-alt select-accommodation align-self-center"
  122.                                 data-scroll="accommodationsScroll">
  123.                             Kies jouw <span>hotel</span>
  124.                         </button>
  125.                     </div>
  126.                 </div>
  127.             </div>
  128.         </form>
  129.     </div>
  130. </div>
  132. {{ include('pages/Modal/stadium_category_modal.html.twig') }}