templates/checkout/checkout.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Les trésors de Luna - Contact{% endblock %}
  5. {% block javascripts %}
  6.   <script type="module" src="{{asset('js/buying.js')}}"></script>
  7.   <script type="module" src="{{asset('js/classes/Cart.js')}}"></script>
  8.   <script type="module" src="{{asset('js/payment.js')}}"></script>
  9.   <script type="module" src="{{asset('js/classes/PaymentDataManager.js')}}"></script>
  10. {% endblock javascripts %}
  12. {% block body %}
  14. <body>
  16.   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  17.     <defs>
  18.       <symbol xmlns="http://www.w3.org/2000/svg" id="link" viewBox="0 0 24 24">
  19.         <path fill="currentColor"
  20.           d="M12 19a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm0-4a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm-5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm7-12h-1V2a1 1 0 0 0-2 0v1H8V2a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9h16Zm0-11H4V6a1 1 0 0 1 1-1h1v1a1 1 0 0 0 2 0V5h8v1a1 1 0 0 0 2 0V5h1a1 1 0 0 1 1 1ZM7 15a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm0 4a1 1 0 1 0-1-1a1 1 0 0 0 1 1Z" />
  21.       </symbol>
  22.       <symbol xmlns="http://www.w3.org/2000/svg" id="arrow-right" viewBox="0 0 24 24">
  23.         <path fill="currentColor"
  24.           d="M17.92 11.62a1 1 0 0 0-.21-.33l-5-5a1 1 0 0 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l5-5a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76Z" />
  25.       </symbol>
  26.       <symbol xmlns="http://www.w3.org/2000/svg" id="category" viewBox="0 0 24 24">
  27.         <path fill="currentColor"
  28.           d="M19 5.5h-6.28l-.32-1a3 3 0 0 0-2.84-2H5a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1h4.56a1 1 0 0 1 .95.68l.54 1.64a1 1 0 0 0 .95.68h7a1 1 0 0 1 1 1Z" />
  29.       </symbol>
  30.       <symbol xmlns="http://www.w3.org/2000/svg" id="calendar" viewBox="0 0 24 24">
  31.         <path fill="currentColor"
  32.           d="M19 4h-2V3a1 1 0 0 0-2 0v1H9V3a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7h16Zm0-9H4V7a1 1 0 0 1 1-1h2v1a1 1 0 0 0 2 0V6h6v1a1 1 0 0 0 2 0V6h2a1 1 0 0 1 1 1Z" />
  33.       </symbol>
  34.       <symbol xmlns="http://www.w3.org/2000/svg" id="heart" viewBox="0 0 24 24">
  35.         <path fill="currentColor"
  36.           d="M20.16 4.61A6.27 6.27 0 0 0 12 4a6.27 6.27 0 0 0-8.16 9.48l7.45 7.45a1 1 0 0 0 1.42 0l7.45-7.45a6.27 6.27 0 0 0 0-8.87Zm-1.41 7.46L12 18.81l-6.75-6.74a4.28 4.28 0 0 1 3-7.3a4.25 4.25 0 0 1 3 1.25a1 1 0 0 0 1.42 0a4.27 4.27 0 0 1 6 6.05Z" />
  37.       </symbol>
  38.       <symbol xmlns="http://www.w3.org/2000/svg" id="plus" viewBox="0 0 24 24">
  39.         <path fill="currentColor"
  40.           d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z" />
  41.       </symbol>
  42.       <symbol xmlns="http://www.w3.org/2000/svg" id="minus" viewBox="0 0 24 24">
  43.         <path fill="currentColor" d="M19 11H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2Z" />
  44.       </symbol>
  45.       <symbol xmlns="http://www.w3.org/2000/svg" id="cart" viewBox="0 0 24 24">
  46.         <path fill="currentColor"
  47.           d="M8.5 19a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 8.5 19ZM19 16H7a1 1 0 0 1 0-2h8.491a3.013 3.013 0 0 0 2.885-2.176l1.585-5.55A1 1 0 0 0 19 5H6.74a3.007 3.007 0 0 0-2.82-2H3a1 1 0 0 0 0 2h.921a1.005 1.005 0 0 1 .962.725l.155.545v.005l1.641 5.742A3 3 0 0 0 7 18h12a1 1 0 0 0 0-2Zm-1.326-9l-1.22 4.274a1.005 1.005 0 0 1-.963.726H8.754l-.255-.892L7.326 7ZM16.5 19a1.5 1.5 0 1 0 1.5 1.5a1.5 1.5 0 0 0-1.5-1.5Z" />
  48.       </symbol>
  49.       <symbol xmlns="http://www.w3.org/2000/svg" id="check" viewBox="0 0 24 24">
  50.         <path fill="currentColor"
  51.           d="M18.71 7.21a1 1 0 0 0-1.42 0l-7.45 7.46l-3.13-3.14A1 1 0 1 0 5.29 13l3.84 3.84a1 1 0 0 0 1.42 0l8.16-8.16a1 1 0 0 0 0-1.47Z" />
  52.       </symbol>
  53.       <symbol xmlns="http://www.w3.org/2000/svg" id="trash" viewBox="0 0 24 24">
  54.         <path fill="currentColor"
  55.           d="M10 18a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1ZM20 6h-4V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v1H4a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2ZM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h-4Zm7 14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8h10Zm-3-1a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1Z" />
  56.       </symbol>
  57.       <symbol xmlns="http://www.w3.org/2000/svg" id="star-outline" viewBox="0 0 15 15">
  58.         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
  59.           d="M7.5 9.804L5.337 11l.413-2.533L4 6.674l2.418-.37L7.5 4l1.082 2.304l2.418.37l-1.75 1.793L9.663 11L7.5 9.804Z" />
  60.       </symbol>
  61.       <symbol xmlns="http://www.w3.org/2000/svg" id="star-solid" viewBox="0 0 15 15">
  62.         <path fill="currentColor"
  63.           d="M7.953 3.788a.5.5 0 0 0-.906 0L6.08 5.85l-2.154.33a.5.5 0 0 0-.283.843l1.574 1.613l-.373 2.284a.5.5 0 0 0 .736.518l1.92-1.063l1.921 1.063a.5.5 0 0 0 .736-.519l-.373-2.283l1.574-1.613a.5.5 0 0 0-.283-.844L8.921 5.85l-.968-2.062Z" />
  64.       </symbol>
  65.       <symbol xmlns="http://www.w3.org/2000/svg" id="search" viewBox="0 0 24 24">
  66.         <path fill="currentColor"
  67.           d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7a7 7 0 0 1-7 7Z" />
  68.       </symbol>
  69.       <symbol xmlns="http://www.w3.org/2000/svg" id="user" viewBox="0 0 24 24">
  70.         <path fill="currentColor"
  71.           d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19ZM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4Z" />
  72.       </symbol>
  73.       <symbol xmlns="http://www.w3.org/2000/svg" id="close" viewBox="0 0 15 15">
  74.         <path fill="currentColor"
  75.           d="M7.953 3.788a.5.5 0 0 0-.906 0L6.08 5.85l-2.154.33a.5.5 0 0 0-.283.843l1.574 1.613l-.373 2.284a.5.5 0 0 0 .736.518l1.92-1.063l1.921 1.063a.5.5 0 0 0 .736-.519l-.373-2.283l1.574-1.613a.5.5 0 0 0-.283-.844L8.921 5.85l-.968-2.062Z" />
  76.       </symbol>
  78.     </defs>
  79.   </svg>
  81.   <div class="preloader-wrapper">
  82.     <div class="preloader">
  83.     </div>
  84.   </div>
  86.   <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasCart" aria-labelledby="My Cart">
  87.     <div class="offcanvas-header justify-content-center">
  88.       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  89.     </div>
  90.     <div class="offcanvas-body">
  91.       <div class="order-md-last">
  92.         <h4 class="d-flex justify-content-between align-items-center mb-3">
  93.           <span class="text-primary">Your cart</span>
  94.           <span class="badge bg-primary rounded-circle pt-2">3</span>
  95.         </h4>
  96.         <ul class="list-group mb-3">
  97.           <li class="list-group-item d-flex justify-content-between lh-sm">
  98.             <div>
  99.               <h6 class="my-0">Grey Hoodie</h6>
  100.               <small class="text-body-secondary">Brief description</small>
  101.             </div>
  102.             <span class="text-body-secondary">$12</span>
  103.           </li>
  104.           <li class="list-group-item d-flex justify-content-between lh-sm">
  105.             <div>
  106.               <h6 class="my-0">Dog Food</h6>
  107.               <small class="text-body-secondary">Brief description</small>
  108.             </div>
  109.             <span class="text-body-secondary">$8</span>
  110.           </li>
  111.           <li class="list-group-item d-flex justify-content-between lh-sm">
  112.             <div>
  113.               <h6 class="my-0">Soft Toy</h6>
  114.               <small class="text-body-secondary">Brief description</small>
  115.             </div>
  116.             <span class="text-body-secondary">$5</span>
  117.           </li>
  118.           <li class="list-group-item d-flex justify-content-between">
  119.             <span class="fw-bold">Total (USD)</span>
  120.             <strong>$20</strong>
  121.           </li>
  122.         </ul>
  124.         <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
  125.       </div>
  126.     </div>
  127.   </div>
  129.   <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasSearch"
  130.     aria-labelledby="Search">
  131.     <div class="offcanvas-header justify-content-center">
  132.       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  133.     </div>
  134.     <div class="offcanvas-body">
  136.       <div class="order-md-last">
  137.         <h4 class="text-primary text-uppercase mb-3">
  138.           Search
  139.         </h4>
  140.         <div class="search-bar border rounded-2 border-dark-subtle">
  141.           <form id="search-form" class="text-center d-flex align-items-center" action="" method="">
  142.             <input type="text" class="form-control border-0 bg-transparent" placeholder="Search Here" />
  143.             <iconify-icon icon="tabler:search" class="fs-4 me-3"></iconify-icon>
  144.           </form>
  145.         </div>
  146.       </div>
  147.     </div>
  148.   </div>
  152.   <section id="banner" class="py-3" style="background: #F9F3EC;">
  153.     <div class="container">
  154.       <div class="hero-content py-5 my-3">
  155.         <h2 class="display-1 mt-3 mb-0">Information de livraison </h2>
  156.         <nav class="breadcrumb">
  157.           <a class="breadcrumb-item nav-link" href="{{path('app_home')}}">Accueil</a>
  158.           <span class="breadcrumb-item active" aria-current="page">Paiement</span>
  159.         </nav>
  160.       </div>
  161.     </div>
  162.   </section>
  164.   <section class="shopify-cart checkout-wrap">
  165.     <div class="container py-5 my-5">
  166.       <form class="form-group">
  167.         <div class="row d-flex flex-wrap">
  168.           <div class="col-lg-6">
  169.             <h2 class="text-dark pb-3">Adresse de facturation</h2>
  170.             <div class="billing-details">
  171.               {% if app.user %}
  172.               
  173.                 {% if app.user.isVerified %}
  174.                   <label for="fname">Nom*</label>
  175.                   <input type="text" id="fname" name="firstname" required class="form-control mt-2 mb-4 ps-3" value="{{app.user.firstName}}">
  176.                   <label for="lname">Prénom*</label>
  177.                   <input type="text" id="lname" name="lastname" required class="form-control mt-2 mb-4 ps-3" value="{{app.user.surname}}">
  178.                   {#
  179.                   <label for="cname">Company Name(optional)*</label>
  180.                   <input type="text" id="cname" name="companyname" class="form-control mt-2 mb-4">
  181.                   <label for="cname">Country / Region*</label>
  182.                   
  183.                   <select class="form-select form-control mt-2 mb-4" aria-label="Default select example">
  184.                     <option selected="" hidden="">United States</option>
  185.                     <option value="1">UK</option>
  186.                     <option value="2">Australia</option>
  187.                     <option value="3">Canada</option>
  188.                   </select>
  189.                   #}
  190.                   <label for="address">Adresse*</label>
  191.                   <input type="text" id="adr" name="address" placeholder="Rue"
  192.                     class="form-control mt-3 ps-3 mb-3" value="{{app.user.adress}}">
  193.                   <label for="additional-address-information">Informations supplémentaire</label>
  194.                   <input type="text" id="adri" name="additional-address-information" placeholder="N° d'appartement, code, etc."
  195.                     class="form-control ps-3 mb-4" value="{{app.user.additionalAdressInformation}}">
  196.                   <label for="city">Ville*</label>
  197.                   <input type="text" id="city" name="city" class="form-control mt-3 ps-3 mb-4" value="{{app.user.city}}">
  198.                   {#
  199.                   <label for="state">State *</label>
  200.                   <select class="form-select form-control mt-2 mb-4" aria-label="Default select example">
  201.                     <option selected="" hidden="">Florida</option>
  202.                     <option value="1">New York</option>
  203.                     <option value="2">Chicago</option>
  204.                     <option value="3">Texas</option>
  205.                     <option value="3">San Jose</option>
  206.                     <option value="3">Houston</option>
  207.                   </select>
  208.                   #}
  209.                   <label for="zip">Code postal*</label>
  210.                   <input type="text" id="zip" name="zip" class="form-control mt-2 mb-4 ps-3" value="{{app.user.zipCode}}">
  211.                   <label for="email">Téléphone</label>
  212.                   <input type="text" id="phone" name="phone" class="form-control mt-2 mb-4 ps-3" value="{{app.user.phone}}">
  213.                   <label for="email">Email*</label>
  214.                   <input type="text" id="email" name="email" class="form-control mt-2 mb-4 ps-3" required value="{{app.user.email}}">
  215.                   {% else %}
  216.                     <p><a href="{{path('generate_confirmation_list')}}">Veuillez confirmer votre email via le mail de confirmation qui vous a été envoyé à votre addresse mail.</a></p>
  217.                     
  218.                 {% endif %}
  219.                 
  220.               {% else %}
  222.               <p><a href="{{path('account')}}">Veuillez vous connecter ou créer un compte en cliquant sur ce <strong style="color: lightcoral">lien</strong>.</a></p>
  224.               {% endif %}   
  225.             </div>
  226.           </div>
  227.           <div class="col-lg-6">
  228.             <h2 class="text-dark pb-3">Information Additionnelle</h2>
  229.             <div class="billing-details">
  230.               <label for="additional-delivery-information">Instruction supplémentaire (optionnel)</label>
  231.               <textarea id="additional_information" class="form-control pt-3 pb-3 ps-3 mt-2" style="text-transform: none;"
  232.                 placeholder="Instructions à laisser au livreur"></textarea>
  233.             </div>
  234.             <div class="your-order mt-5">
  235.               
  236.               {% if totalPrice != 0 %}
  237.                 <h2 class="display-7 text-dark pb-3">Total à payer</h2>
  238.                 <div class="total-price">
  239.                   <table cellspacing="0" class="table">
  240.                     <tbody>
  241.                       <tr class="subtotal border-top border-bottom pt-2 pb-2 text-uppercase">
  242.                         <th>Sous total</th>
  243.                         <td data-title="Subtotal">
  244.                           <span class="price-amount amount ps-5">
  245.                             <bdi>
  246.                               {{totalPrice | number_format(2, ',', '')}}
  247.                               <span class="price-currency-symbol">€</span>
  248.                             </bdi>
  249.                           </span>
  250.                         </td>
  251.                       </tr>
  252.                       <tr class="weight border-top border-bottom pt-2 pb-2">
  253.                         <th>Frais de port</th>
  254.                         <td data-title="weight">
  255.                           <span class="weight-amount amount ps-5">
  256.                             <bdi>
  257.                               {{weightPrice | number_format(2, ',', '')}} € ({{totalWeight}})
  258.                             </bdi>
  259.                           </span>
  260.                         </td>
  261.                       </tr>
  262.                       <tr class="order-total border-bottom pt-2 pb-2 text-uppercase">
  263.                         <th>Total</th>
  264.                         <td data-title="Total">
  265.                           <span class="ttc-price-amount amount ps-5">
  266.                             <bdi>
  267.                               <span class="price-currency-symbol"></span>{{ttcPrice | number_format(2, ',', '')}}€</bdi>
  268.                           </span>
  269.                         </td>
  270.                       </tr>
  271.                     </tbody>
  272.                   </table>
  273.                   <div class="list-group mt-5 mb-3">
  274.                     <label class="list-group-item d-flex gap-2 border-0">
  275.                       <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios"
  276.                         id="listGroupRadios1" value="" checked="">
  277.                       <span>
  278.                         <strong class="text-uppercase">Livraison postal</strong>
  279.                         <small class="d-block text-body-secondary">Nous vous envoyons vortre commande, emballé par nos soins, via La Poste</small>
  280.                       </span>
  281.                     </label>
  282.                     {#
  283.                     <label class="list-group-item d-flex gap-2 border-0">
  284.                       <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios"
  285.                         id="listGroupRadios2" value="">
  286.                       <span>
  287.                         <strong class="text-uppercase">Check payments</strong>
  288.                         <small class="d-block text-body-secondary">Please send a check to Store Name, Store Street, Store
  289.                           Town, Store State / County, Store Postcode.</small>
  290.                       </span>
  291.                     </label>
  292.                     <label class="list-group-item d-flex gap-2 border-0">
  293.                       <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios"
  294.                         id="listGroupRadios3" value="">
  295.                       <span>
  296.                         <strong class="text-uppercase">Cash on delivery</strong>
  297.                         <small class="d-block text-body-secondary">Pay with cash upon delivery.</small>
  298.                       </span>
  299.                     </label>
  300.                     <label class="list-group-item d-flex gap-2 border-0">
  301.                       <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios"
  302.                         id="listGroupRadios3" value="">
  303.                       <span>
  304.                         <strong class="text-uppercase">Paypal</strong>
  305.                         <small class="d-block text-body-secondary">Pay via PayPal; you can pay with your credit card if
  306.                           you don’t have a PayPal account.</small>
  307.                       </span>
  308.                     </label>
  309.                     #}
  310.                   </div>
  311.                   <div class="form-error-messages hide">Error messages</div>
  312.                   <a id="payment-button" href="{{path('payment')}}" type="submit" name="submit" class="btn btn-dark btn-lg rounded-1 w-100">Payer</a>
  313.                 </div>
  314.                 {% else %}
  315.                 <div class="d-flex justify-content-center" style="background-color: lightgrey;">
  316.                   <h6 class="m-5 fs-5">Le panier est vide !</h6>
  317.                 </div>
  318.               {% endif %}
  320.             </div>
  321.           </div>
  322.         </div>
  323.       </form>
  324.     </div>
  325.   </section>
  330. </body>
  332. </html>
  334. {% endblock body %}