templates/eventsforchrist/blocks/ordercontainer.html.twig line 1

Open in your IDE?
  1. <div id='orderContainer' class="container">
  2.     <div id='orderPreviewBar' class="desktop">
  3.         <div class='eventImage'>&nbsp;</div>
  4.         <div class='orderTotal'>
  5.             <div>
  6.                 <span data-lang="yes" data-lang-key="order_total_amount">Totaalbedrag:</span>
  7.                 <span class='order_price'></span>
  8.             </div>
  9.         </div>
  10.         <div class='orderPreview'>&nbsp;</div>
  11.     </div>
  12.     <div id='orderInfo'>
  13.         <div class='orderSteps desktop'>
  14.             <ul class='orderSteps'>
  15.                 <li class='selected'>
  16.                     <span>1</span>
  17.                     <span class="steplink" data-step="1" data-lang="yes" data-lang-key="amount_tickets">Aantal kaarten</span>
  18.                 </li>
  19.                 <li>
  20.                     <span>2</span>
  21.                     <span class="steplink" data-step="2" data-lang="yes" data-lang-key="personal_data">Persoonlijke gegevens</span>
  22.                 </li>
  23.                 <li>
  24.                     <span>3</span>
  25.                     <span class="steplink" data-step="3" data-lang="yes" data-lang-key="payment">Betaling</span>
  26.                 </li>
  27.             </ul>
  28.         </div>
  29.         <div class="orderHeader mobile">
  30.             <div class="orderEventDetail">
  31.                 <div class="orderEventDetailTitle">Tickets</div>
  32.                 <div class="orderEventTitle"></div>
  33.             </div>
  34.             <div class="eventImage">&nbsp;</div>
  35.         </div>
  36.         <div class='orderPage'>
  37.             <div class='orderStep1 active visited'>
  38.                 <div class='orderStep1_0'>
  39.                     <span class='order_title' data-lang="yes" data-lang-key="order_presale_code">Voor deze pre-sale is een wachtwoord vereist. Vul deze hier in:</span>
  40.                     <span class='order_couponfields'>
  41.                         <input name="password" type="password">
  42.                         <button name="activate_password" data-lang="yes" data-lang-key="order_payment_confirm_button">TOEPASSEN</button>
  43.                     </span>
  44.                 </div>
  45.                 <div class='orderStep1_1 active'>
  46.                     <span class='order_title desktop' data-lang="yes" data-lang-key="order_event_tickets_header">Voor welke evenement wilt u kaarten bestellen?</span>
  47.                     <span class='order_title mobile' data-lang="yes" data-lang-key="order_event_tickets_header_mobile">Selecteer evenement</span>
  48.                     <span class='order_datefields'><ul></ul></span>
  49.                 </div>
  50.                 <div class='orderStep1_2'>
  51.                     <span class='order_title desktop' data-lang="yes" data-lang-key="order_event_tickets_amount_header">Vul aantal kaarten in:</span>
  52.                     <span class='order_title mobile' data-lang="yes" data-lang-key="order_event_tickets_amount_header_mobile">Aantal tickets</span>
  53.                     <div>
  54.                         <span class='order_ticketfields'>&nbsp;</span>
  55.                         <span class='order_ticketimage' style='display: none;'>&nbsp;</span>
  56.                     </div>
  57.                 </div>
  58.                 <div class='orderStep1_3'>
  59.                     <span class='order_title' data-lang="yes" data-lang-key="order_event_extra_header">Wenst u nog een product mee te bestellen?</span>
  60.                                 <span class='order_extrafields'>&nbsp;</span>
  61.                 </div>
  62.                             <div class='orderStep1_4'>
  63.                                 <span class='order_title' data-lang="yes" data-lang-key="order_event_tickets_meta">Vul de gevraagde extra gegevens in voor deze tickets:</span>
  64.                                 <span class='order_metafields'>&nbsp;</span>
  65.                             </div>
  66.                 <div class='orderStep1_5'>
  67.                     <span class='order_title' data-lang="yes" data-lang-key="order_event_tickets_extra">Wat mogen we voor u toevoegen aan uw tickets?</span>
  68.                                 <span class='order_ticketextrafields'>&nbsp;</span>
  69.                 </div>
  70.                 <div class='orderStep1_6'>
  71.                     <span class='order_title' data-lang="yes" data-lang-key="order_event_order_meta">Er is extra informatie nodig bij deze bestelling:</span>
  72.                                 <span class='order_metafields'>&nbsp;</span>
  73.                 </div>
  74.                 <div class='orderStep1_7'>
  75.                     <span class='order_title' data-lang="yes" data-lang-key="order_event_order_placetickets">Voor deze tickets moeten plaatsen gekozen worden:</span>
  76.                                 <span class='order_ticket_places'>&nbsp;</span>
  77.                 </div>
  78.                 
  79.                 <div class='orderTotal mobile'>
  80.                     <div>
  81.                         <span data-lang="yes" data-lang-key="order_total_amount">Totaalbedrag:</span>
  82.                         <span class='order_price'></span>
  83.                     </div>
  84.                 </div>
  85.                 <div class='orderStepBar'>
  86.                     <div></div>
  87.                     <div>
  88.                         <button class='desktop step_desktop' onclick="nextStep(); return false;" data-lang='yes' data-lang-key='order_step2'>Ga naar Stap 2</button>
  89.                         <button class='mobile step_mobile' onclick="nextStep(); return false;" data-lang='yes' data-lang-key='order_step2_mobile'>Ga naar volgende stap</button>
  90.                     </div>                            
  91.                 </div>
  92.             </div>
  93.             <div class='orderStep2'>
  94.                 <div class='orderStep2_1 active'>
  95.                     <span class='order_title mobile' data-lang="yes" data-lang-key="order_personal_details">Persoonlijke Informatie</span>
  96.                     <div class='order_personalfields'>
  97.                     <form id="OrderPersonalDetails" class='stepForm'>
  98.                     <div class="form-step">
  99.                         <div class="form-stepcontent">
  100. {% set currentGroup = 1 %}
  101. {% for field in personal_fields %}
  102. {% if field.group != currentGroup %}
  103.                         </div>
  104.                         <div class="item-progress"><img src="/images/EFC_Voortgang_{{ currentGroup }}-{{ field_groups }}.svg" height="18px"><span>{{ currentGroup }} / {{ field_groups }}</span></div>
  105.                         <div class='orderStepBar'>
  106.                             <!--<div><span data-lang="yes" data-lang-key="order_account_login">Heeft u al een account? <a href="#" onclick='return false;'>Klik hier</a> om in te loggen.</span></div>-->
  107.                             <div></div>
  108.                             <div class="stepback">
  109.                             {% if currentGroup == 1 %}
  110.                                 {% set funcPrev = "previousStep" %}
  111.                             {% else %}
  112.                                 {% set funcPrev = "stepFormPrev" %}
  113.                             {% endif %}
  114.                             <a href="#" onclick="{{ funcPrev }}();"><img src="/images/stap-terug.svg">
  115.                                 <span class='stepback' data-lang="yes" data-lang-key="order_stepback">Stap Terug</span>
  116.                             </a>
  117.                             </div>
  118.                             <div><button onclick="stepFormNext(); return false;" data-lang='yes' data-lang-key='order_nextstep'>Volgende Stap</button></div>                            
  119.                         </div>
  120.                         </div>                                
  121.                         <div class="form-step">
  122.     <div class="form-stepcontent"> 
  123.                         {% set currentGroup = field.group %}
  124.         {% endif %}
  125.         {% set required = "" %}
  126.         {% if field.required %}
  127.             {% set required = " required='required'" %}
  128.         {% endif %}
  129.         
  130.         {% set placeholder = "" %}
  131.         <div class="form-row{% if field.class is defined %} {{ field.class }}{% endif %}">
  132.             <div class="item-title desktop" data-lang='yes' data-lang-key='order_field_{{ field.name }}'>{{ attribute(field.title, cur_lang) }}</div>
  133.             <div class="item-field">
  134.     {% if field.type == 'select' %}
  135.         <select id="form-{{field.name}}" name="{{ field.name }}">
  136.             {% for key,option in field.options %}
  137.                 {% if key == 'NL' %}
  138.                 <option value="{{ key }}" selected>{{ option }}</option>
  139.                 {% else %}
  140.                 <option value="{{ key }}">{{ option }}</option>    
  141.                 {% endif %}
  142.             {% endfor %}
  143.         </select>
  144.     {% else %}
  145.         {% if field.pattern != "" %}
  146.             <input autocomplete="{{field.autocomplete}}" id="form-mobile-{{field.name}}" class="input-field mobile {{ field.class }}" type="{{ field.type }}"{{ placeholder }} pattern="{{ field.pattern }}" data-lang="yes" data-lang-key="order_field_mobile_{{ field.name }}" placeholder="{{ field.mobiletitle }}" name="{{ field.name }}"{{ required }}>
  147.             {% if field.placeholder is defined %}
  148.                 <input id="form-desktop-{{field.name}}" class="input-field desktop {{ field.class }}" type="{{ field.type }}" placeholder="{{ attribute(field.placeholder, cur_lang) }}" pattern="{{ field.pattern }}" name="{{ field.name }}"{{ required }}>
  149.             {% else %}
  150.                 <input id="form-desktop-{{field.name}}" class="input-field desktop {{ field.class }}" type="{{ field.type }}"{{ placeholder }} pattern="{{ field.pattern }}" name="{{ field.name }}"{{ required }}>
  151.             {% endif %}
  152.         {% else %}
  153.             <input autocomplete="{{field.autocomplete}}" id="form-mobile-{{field.name}}" class="input-field mobile {{ field.class }}" type="{{ field.type }}" placeholder="{{ field.mobiletitle }}" name="{{ field.name }}"{% if field.min is defined %}min="{{field.min}}"{%endif%}>
  154.             {% if field.placeholder is defined %}
  155.                 <input id="form-desktop-{{field.name}}" class="input-field desktop {{ field.class }}" type="{{ field.type }}" placeholder="{{ attribute(field.placeholder, cur_lang) }}" name="{{ field.name }}" data-lang="yes" data-lang-key='order_field_{{ field.name }}_placeholder'>
  156.             {% else %}
  157.                 <input id="form-desktop-{{field.name}}" class="input-field desktop {{ field.class }}" type="{{ field.type }}" name="{{ field.name }}"{% if field.min is defined %}min="{{field.min}}"{%endif%}>
  158.             {% endif %}
  159.         {% endif %}
  160.     {% endif %}
  161.             <div class="error" data-lang='yes' data-lang-key='order_field_{{ field.name }}_error'>{{  attribute(field.error, cur_lang) }}</div>
  162.             </div>
  163.             <div class="item-note desktop" data-lang='yes' data-lang-key='order_field_{{ field.name }}_note'>{{  attribute(field.note, cur_lang) }}</div>
  164.         </div>
  165. {% endfor %}
  166.         </div>
  167.         <div class="item-progress desktop"><img src="/images/EFC_Voortgang_{{ currentGroup }}-{{ field_groups }}.svg" height="18px"><span>{{ currentGroup }} / {{ field_groups }}</span></div>
  168.         <div class='orderStepBar'>
  169.             <!--<div><span data-lang="yes" data-lang-key="order_account_login">Heeft u al een account? <a href="#" onclick='return false;'>Klik hier</a> om in te loggen.</span></div>-->
  170.             <div></div>
  171.             <div class="stepback">
  172.             <a href="#" onclick="stepFormPrev();"><img src="/images/stap-terug.svg">
  173.                 <span class='stepback' data-lang="yes" data-lang-key="order_stepback">Stap Terug</span>
  174.             </a>
  175.             </div>
  176.             <div><button onclick="stepFormNext(); return false;" data-lang='yes' data-lang-key='order_step3'>Ga naar stap 3</button></div>                            
  177.         </div>    
  178.         
  179.         </div>    
  180.                     </form>
  181.                     </div>
  182.                 </div>
  183.                 <div class='orderStep2_2 mobile'>
  184.                     <span class='order_commentfields mobile'><textarea id="form-mobile-comments" class="comments" name="comments" placeholder="vragen en/of opmerkingen"></textarea></span>
  185.                 </div>
  186.                 <div class='orderStep2_3 mobile'>
  187.                     <span class='order_couponfields mobile mobile-2-3'>
  188.                         <input id="form-mobile-coupon" placeholder="kortingscode" name="coupon" type="text">
  189.                     </span>
  190.                     <span class='order_couponfields mobile mobile-1-3-last'>
  191.                         <button name="activate_coupon" data-lang="yes" data-lang-key="order_payment_confirm_button">TOEPASSEN</button>
  192.                     </span>
  193.                 </div>
  194.                 <div class='orderSubmitBar active mobile'>
  195.                     <div class="mobile-1-1 orderSummary">
  196.                         <span class="orderEventTitle"></span>
  197.                         <span class="orderDateInfo"></span>
  198.                         <span class="orderTicketCount"></span>
  199.                     </div>
  200.                     <div class="mobile-1-1">
  201.                         <div class='orderTotal mobile'>
  202.                             <div>
  203.                                 <span data-lang="yes" data-lang-key="order_total_amount">Totaalbedrag:</span>
  204.                                 <span class='order_price'></span>
  205.                             </div>
  206.                         </div>
  207.                     </div>
  208.                     <div class="mobile-1-1">
  209.                         <span class='disclaimer' data-lang="yes" data-lang-key="order_payment_place">Bij het plaatsen van een bestelling worden de opgegeven emailadressen toegevoegd aan onze nieuwsbrief database, uiteraard is het mogelijk hiervan weer uit te schrijven. Eerder uitgeschreven emailadressen worden niet opnieuw toegevoegd.</span>
  210.                     </div>
  211.                     <div class="mobile-1-2 stepback"><a href="#" onclick="previousStep();"><img src="/images/stap-terug.svg"><span class='stepback' data-lang="yes" data-lang-key="order_stepback">Stap Terug</span></a></div>
  212.                     <div class="mobile-1-2"><button onclick="stepFormSave(); confirmOrder(); return false;" data-lang='yes' data-lang-key='order_payment_order_pay'>BESTELLING BETALEN</button></div>                            
  213.                 </div>
  214.             </div>
  215.             <div class='orderStep3'>
  216.                 <div class='orderStep3_1 active'>
  217.                     <span class='order_title' data-lang="yes" data-lang-key="order_payment_header">Hoe wilt u betalen?</span>
  218.                     <span class='order_paymentfields' data-lang="yes" data-lang-key="order_payment_confirm">
  219.                         Bij het bevestigen van deze bestelling wordt u doorgestuurd naar onze partner Mollie waar de betaling uitgevoerd zal worden.
  220.                     </span>
  221.                 </div>
  222.                 <div class='orderStep3_2 active'>
  223.                     <span class='order_title' data-lang="yes" data-lang-key="order_payment_discount_code">Heeft u een kortingscode?</span>
  224.                     <span class='order_couponfields desktop'><input name="coupon" type="text"><button name="activate_coupon" data-lang="yes" data-lang-key="order_payment_confirm_button">TOEPASSEN</button></span>
  225.                 </div>
  226.                 <div class='orderStep3_3 active'>
  227.                     <span class='order_title' data-lang="yes" data-lang-key="order_payment_feedback">Heeft u nog vragen/opmerkingen?</span>
  228.                     <span class='order_commentfields'><textarea class="comments" name="comments"></textarea></textarea></span>
  229.                 </div>
  230.                 <div class='orderStepBar active'>
  231.                     <div><span class='disclaimer' data-lang="yes" data-lang-key="order_payment_place">Bij het plaatsen van een bestelling worden de opgegeven emailadressen toegevoegd aan onze nieuwsbrief database, uiteraard is het mogelijk hiervan weer uit te schrijven. Eerder uitgeschreven emailadressen worden niet opnieuw toegevoegd.</span></div>
  232.                     <div class="stepback"><a href="#" onclick="previousStep();"><img src="/images/stap-terug.svg"><span class='stepback' data-lang="yes" data-lang-key="order_stepback">Stap Terug</span></a></div>
  233.         <div><button onclick="confirmOrder(); return false;" data-lang='yes' data-lang-key='order_payment_order'>BESTELLING BEVESTIGEN</button></div>                            
  234.                 </div>
  235.             </div>
  236.         </div>
  237.     </div>
  238. </div>