templates/buy_ticket/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %} 
  2. {% block title %}{{event.name}}{% endblock %} 
  3. {% block body %}
  4. <script src="https://www.paypal.com/sdk/js?client-id={{clientID}}&currency=EUR&commit=false&components=buttons,hosted-fields"></script>
  5. <script>
  6.     function handleChange(input, max) {
  7.     if (input.value < 1) input.value = 1;
  8.     if (input.value > max) input.value = max;
  9. }
  10. </script>
  11. <section id="containerBuyTicket" class="container">
  12.     <section class="slogan">
  13.         {% set photo = event.getImage('detail') %}
  14.         {% if not photo %}
  15.             {% set photo = 'default.png' %}
  16.         {% endif %}
  17.         <img src="/images/event/{{ photo }}" alt="{{event.name}}"/>
  18.         <div>
  19.             <h1>{{event.name}}</h1>
  20.             <p class="eventDescription">{{event.description | raw}}</p>
  21.         </div>
  22.     </section>
  23.     <section class="pricing">
  24.         {% if entradas|length > 0 %}
  25.         {% for entrada in entradas %}
  26.         <div id="entrada-{{entrada.id}}" class="entrada" data-price="{{entrada.price}}">
  27.             <div class="block-superior">
  28.                 <p class="container-left">{{entrada.name}}</p>
  29.                 <p class="container-right">{{entrada.price}} €</p>
  30.             </div>
  31.             <div class="block-inferior">
  32.                 <div class="container-left">
  33.                     <p><i class="far fa-calendar-alt"></i>
  34.                         {{entrada.startDate | date("d/m/Y H:i")}}
  35.                     </p>
  36.                     <p><i class="fas fa-map-pin"></i>
  37.                         {{entrada.place | raw}}
  38.                     </p>
  39.                 </div>
  40.                 <div class="container-right">
  41.                     {% if numTickets[entrada.id]['sold'] + numTickets[entrada.id]['reserved'] < entrada.maxTickets %}
  42.                         {% if (entrada.maxTickets-numTickets[entrada.id][ 'sold']) < 50 %}
  43.                             <div class="alert alert-danger text-center mb-1 mb-md-2 ml-3">SOLO QUEDAN {{entrada.maxTickets-numTickets[entrada.id]['sold']-numTickets[entrada.id]['reserved']}}</div>
  44.                         {% endif %}
  45.                         {% if numTickets[entrada.id]['reserved'] > 0 %}
  46.                             <div class="alert alert-info text-center mb-1 mb-md-2 ml-3">{{numTickets[entrada.id]['reserved']}} se están vendiendo ahora.</div>
  47.                         {% endif %}
  48.                     
  49.                         <form action="/prebuy_ticket/{{entrada.id}}" method="POST" class="form-style form-alternative">
  50.                             {% if shop %}
  51.                             <div class="send-to-email">
  52.                                 <input type="email" name="altEmail" class="form-control" id="altEmail-{{entrada.id}}" placeholder="{{'Email To' |trans}}"/>
  53.                                 <input type="text" name="altName" class="form-control" id="altName-{{entrada.id}}" placeholder="{{'Name To' |trans}}"/>
  54.                             </div>
  55.                             {% endif %}
  56.                             <div class="block-quantity-button">
  57.                                 <div class="quantity">
  58.                                     <div class="quantity-buttons">
  59.                                         <div class="quantity-up">+</div>
  60.                                         <div class="quantity-down">-</div>
  61.                                     </div>
  62.                                     
  63.                                 {% if entrada.maxTickets - numTickets[entrada.id]['reserved'] - numTickets[entrada.id]['sold'] >= entrada.maxBuy %}
  64.                                     <input type="number" class="form-control" id="inputQuantity-{{entrada.id}}" name="quantity" value="1" min="0" max="{{entrada.maxBuy}}" onchange="handleChange(this,{{entrada.maxBuy}});">
  65.                                 {% else %}
  66.                                     <input type="number" class="form-control" id="inputQuantity-{{entrada.id}}" name="quantity" value="1" min="0" max="{{entrada.maxTickets - numTickets[entrada.id]['reserved'] - numTickets[entrada.id]['sold']}}" onchange="handleChange(this,{{entrada.maxTickets - numTickets[entrada.id]['reserved'] - numTickets[entrada.id]['sold']}});">
  67.                                 {% endif %}
  68.                                 
  69.                                 </div>
  70.     
  71.                                 {% if shop %}
  72.                                     <button type="submit" name="cash" class="form-control buy btn btn-primary">{{'Send' | trans}}</button>
  73.                                 {% else %}
  74.                                     <button  type="submit" name="tpv" class="buy comprarboton btn btn-primary">{{'buy' | trans}}</button>
  75.                                 {% endif %}
  76.                             </div>
  77.                         </form>
  78.                         
  79.                         {% if paypal and not shop %}
  80.                             <div id="paypal-entrada-{{entrada.id}}" data-entrada-id="{{entrada.id}}" class="paypal-button"></div>
  81.                         {% endif %}
  82.                     {% else %}
  83.                         <div class="alert alert-danger text-center">AGOTADAS</div>
  84.                     {% endif %}
  85.     
  86.                 </div>
  87.             </div>
  88.         </div>
  89.         {% endfor %}
  90.         {% else %}
  91.             <div class="alert alert-warning">Aún no están las entradas a la venta. Vuelve pronto a EntradasyTickets.com para conseguirlas.</div>
  92.         {% endif %}
  93.     </section>
  94. </section>
  95. {% endblock %} 
  96. {% block javascripts %} 
  97. {{ parent() }}
  98. <script src="/js/paypalPayment.js"></script>
  99. <script type="text/javascript">
  100. $(document).ready(function() {
  101.     $("body").on("submit", "form", function() {
  102.         $(this).submit(function() {
  103.             return false;
  104.         });
  105.         return true;
  106.     });
  107.     //CUSTOMIZING THE ARROWS FROM THE INPUT TYPE NUMBER
  108.     $('.quantity').each(function() {
  109.         let input = $(this).find('input[type="number"]');
  110.         let btnUp = $(this).find('.quantity-up');
  111.         let btnDown = $(this).find('.quantity-down');
  112.         let min = input.attr('min');
  113.         let max = input.attr('max');
  114.         btnUp.click(function() {
  115.             let oldValue1 = parseInt(input.val());
  116.             let newValue1;
  117.             if (oldValue1 >= max) {
  118.                 newValue1 = oldValue1;
  119.             } else {
  120.                 newValue1 = oldValue1 + 1;
  121.             }
  122.             input.val(newValue1);
  123.             input.trigger("change");
  124.         });
  125.         btnDown.click(function() {
  126.             let oldValue2 = parseInt(input.val());
  127.             let newValue2;
  128.             if (oldValue2 <= min) {
  129.                 newValue2 = oldValue2;
  130.             } else {
  131.                 newValue2 = oldValue2 - 1;
  132.             }
  133.             input.val(newValue2);
  134.             input.trigger("change");
  135.         });
  136.     });
  137. });
  138. </script>
  139. {% endblock %}