themes/webapicTheme/templates/bundles/SyliusShopBundle/Order/thankYou.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  2. {% import "@SyliusShop/Common/Macro/money.html.twig" as money %}     
  4. {% block content %}
  5.     <div class="ui hidden divider"></div>
  6.     <div class="thankyou-ctn">
  7.         <div class="center aligned sixteen wide column">
  8.             {% set lastPayment = order.payments.last() %}
  9.             
  11.             <h1 class="ui icon header">
  12.                 <i class="circular rocket icon"></i>
  13.                 <div class="content waitingPayment" id="sylius-thank-you" {{ sylius_test_html_attribute('thank-you') }}>
  14.                     {{ 'sylius.ui.wait'|trans }}
  15.                 </div>
  16.                 <div class="content successPayment" id="sylius-thank-you" {{ sylius_test_html_attribute('thank-you') }}>
  17.                     {{ 'sylius.ui.thank_you'|trans }}
  18.                     <div class="sub header">{{ 'sylius.ui.placed_an_order'|trans }}</div>
  19.                 </div>
  20.             </h1>
  21.            
  22.             {{ sylius_template_event('sylius.shop.order.thank_you.after_message', {'order': order}) }}
  24.             {% if lastPayment != false and lastPayment.method.code == 'HIPAY_CARD' and lastPayment.state != 'completed' %}
  25.                 <div id="sylius-payment-steps" data-url="{{ path('app_order_payment_status', {'id': lastPayment.id}) }}" class="ui segment" {{ sylius_test_html_attribute('payment-method-instructions') }} >
  26.                     {%  if lastPayment.state != 'completed' %}
  27.                         <div class="lds-roller-ctn">
  28.                             <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
  29.                         </div>
  30.                         <span id="payment-processing">{{ 'app.hipay.payment_pending'|trans }}</span>
  31.                     {% else %}
  32.                         <span id="payment-processing" style="color: #2A439B;">{{ 'app.hipay.payment_success' | trans }}</span>
  33.                     {% endif %}
  34.                 </div>                
  35.             {% endif %}
  37.             {% if lastPayment != false %}
  38.                 {%  if lastPayment.method.instructions is not null %}
  39.                      <div id="sylius-payment-method-instructions" class="ui segment errorPayment" {{ sylius_test_html_attribute('payment-method-instructions') }}>
  40.                         {{ 'sylius.ui.payment_error'|trans }}
  41.                         <br/><br/><br/>
  42.                         <a href="{{ path('sylius_shop_order_again', {'tokenValue': order.tokenValue}) }}" id="sylius-show-order-in-account" class="ui large blue button" {{ sylius_test_html_attribute('show-order-in-account') }}>
  43.                             {{ 'app.front.commande.again'|trans }}
  44.                         </a>
  45.                     </div>    
  46.                     <div id="sylius-payment-method-instructions" class="ui segment successPayment" {{ sylius_test_html_attribute('payment-method-instructions') }}>
  48.                         {#%  if lastPayment.method.id == 4 or lastPayment.method.id == 3 %#}
  49.                             {# {{ 'app.front.commande.num'|trans }}  : {{ order.number }} #}
  50.                             {# <br/> #}
  51.                             Total:  {% set price = money.convertAndFormat(order.total) %}
  52.                             {{ price }}
  53.                         {#% endif %#}
  55.                         <br/><br/>
  56.                         {{ lastPayment.method.instructions|nl2br }}
  57.                         <br/>
  58.                       
  59.                     </div>
  60.                 {% endif %}
  61.                 <div class="ui hidden divider"></div>
  62.             {% endif %}
  64.              {# {{ form_start(form, {'action': path('sylius_shop_order_show', {'tokenValue': order.tokenValue}), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
  65.                  {{ form_widget(form) }}
  67.                 {{ form_row(form.orderComment) }}
  68.             {{ form_end(form, {'render_rest': false}) }} #}
  69.             {# {{ dump(form.vars) }} #}
  70.             {% if form.vars.submitted == false %}
  71.                 <div class="form_app_site_comment_order successPayment">
  73.                     {{ form_start(form, {'action': path('app_shop_order_thank_you', {'token_value': order.tokenValue}), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
  74.                     
  75.                         {{ form_widget(form) }}
  76.                         {# {{ form_row(form._token) }} #}
  77.                         <div class="ctn-liens">
  78.                             <button type="submit" class="lien-bleu" id="sylius-pay-link" {{ sylius_test_html_attribute('pay-link') }}>
  79.                                 <i class="check icon"></i> {{ 'app.front.global.valider'|trans }}
  80.                             </button>
  81.                         </div>
  83.                     {{ form_end(form, {'render_rest': false}) }}
  85.                 </div>
  86.             {% endif %}
  88.             <div class="ui hidden divider"></div>
  90.             {% if order.customer.user is not null %}
  91.                 {# <a href="{{ path('sylius_shop_account_order_show', {'number': order.number}) }}" id="sylius-show-order-in-account" class="ui large blue button" {{ sylius_test_html_attribute('show-order-in-account') }}>{{ 'sylius.ui.view_order'|trans }}</a> #}
  92.             
  93.                 <a href="/account/orders/" id="sylius-show-order-in-account" class="ui large blue button" {{ sylius_test_html_attribute('show-order-in-account') }}>
  94.                     {{ 'app.front.commande.all'|trans }}
  95.                 </a>{% else %}
  96.                 {% if lastPayment.state != 'completed' %}
  97.                     <a href="{{ path('sylius_shop_order_show', {'tokenValue': order.tokenValue}) }}" id="payment-method-page" class="ui large blue button" {{ sylius_test_html_attribute('payment-method-page') }}>{{ 'sylius.ui.change_payment_method'|trans }}</a>
  98.                 {% endif %}
  99.                 <a href="{{ path('sylius_shop_register_after_checkout', {'tokenValue': order.tokenValue}) }}" class="ui large green button" {{ sylius_test_html_attribute('create-an-account') }}>
  100.                     <i class="signup icon"></i>
  101.                     {{ 'sylius.ui.create_an_account'|trans }}
  102.                 </a>
  103.             {% endif %}
  104.         </div>
  105.     </div>
  107.     {# {{ dump(order) }} #}
  109.     <script type="text/javascript">
  110.         $(document).ready(function() {
  111.             $('.errorPayment').hide();
  112.             $('.waitingPayment').hide();
  113.             $('.successPayment').hide();
  114.             let paymentStatus = "{{ lastPayment.state }}";
  115.             const paymentMethod = "{{ lastPayment.method.code }}";
  116.             if(paymentStatus != 'completed' && paymentMethod == 'HIPAY_CARD') {
  117.                 $('.waitingPayment').show();
  118.                 let url = $('#sylius-payment-steps').data('url');
  119.                 let interval = setInterval(function() {
  120.                     $.ajax({
  121.                         url: url,
  122.                         type: 'GET',
  123.                         success: function(data) {
  124.                             paymentStatus = data.success;
  125.                             if(paymentStatus == 'completed') {
  126.                                 $('.successPayment').show();
  127.                                 $('.errorPayment').hide();
  128.                                 $('.waitingPayment').hide();
  129.                                 clearInterval(interval);
  130.                                 $('#payment-processing').html("{{ 'app.hipay.payment_success' | trans }}");
  131.                                 $('#payment-processing').css('color', '#2A439B');
  132.                                 $('.lds-roller-ctn').hide();
  133.                             }
  134.                             else if(paymentStatus != 'processing' && paymentStatus != 'authorized') {
  135.                                 $('.errorPayment').show();
  136.                                 clearInterval(interval);
  137.                                 $('#payment-processing').html("{{ 'app.hipay.payment_error' | trans }}");
  138.                                 $('#payment-processing').css('color', '#FF6254');
  139.                                 $('.lds-roller-ctn').hide();
  140.                             }
  141.                         }
  142.                     });
  143.                 }, 1000);
  144.             }
  145.             else {
  146.                 $('.successPayment').show();
  147.             }
  148.             // Google Tag Manager
  149.             if (typeof dataLayer === 'undefined') {
  150.                 dataLayer = [];
  151.             }
  152.             
  153.             dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  154.             dataLayer.push({
  155.                 event: "purchase",
  156.                 ecommerce: {
  157.                     transaction_id: {{  order.number }},
  158.                     value: {{ order.total/100|replace({'€': '',',': '.'}) }},
  159.                     tax: 20.00,
  160.                     currency: "EUR",
  161.                     items: [
  162.                         {% for item in order.items %}                        
  163.                             {
  164.                                 item_id: {{ item.variant.id }},
  165.                                 item_name: "{{ item.variant.name }}",
  166.                                 index: {{ loop.index0 }},
  167.                                 item_brand: "PPMC",
  168.                                 price: {{ item.unitPrice/100|replace({'€': '',',': '.'}) }},
  169.                                 quantity: {{ item.quantity }}
  170.                             },                        
  171.                         {% endfor %}
  172.                     ]
  173.                 }
  174.             });
  175.         });
  176.     </script>
  178. {% endblock %}