templates/checkout/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Checkout</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item">Apps</li>
  13.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">E-Commerce</a></li>
  14.                                         <li class="breadcrumb-item active" aria-current="page">Checkout</li>
  15.                                     </ol>
  16.                                 </div>
  17.                             </div>
  18.                             <!-- PAGE-HEADER END -->
  20.                             <!-- ROW-1 OPEN -->
  21.                             <div class="row">
  22.                                 <div class="col-xl-8 col-md-12">
  23.                                     <div class="card">
  24.                                         <div class="card-header border-bottom">
  25.                                             <h3 class="card-title">Billing Information</h3>
  26.                                         </div>
  27.                                         <div class="card-body">
  28.                                             <div class="row">
  29.                                                 <div class="col-sm-6 col-md-6">
  30.                                                     <div class="form-group">
  31.                                                         <label class="form-label">First Name <span class="text-red">*</span></label>
  32.                                                         <input type="text" class="form-control" placeholder="First name">
  33.                                                     </div>
  34.                                                 </div>
  35.                                                 <div class="col-sm-6 col-md-6">
  36.                                                     <div class="form-group">
  37.                                                         <label class="form-label">Last Name <span class="text-red">*</span></label>
  38.                                                         <input type="text" class="form-control" placeholder="Last name">
  39.                                                     </div>
  40.                                                 </div>
  41.                                                 <div class="col-md-12">
  42.                                                     <div class="form-group">
  43.                                                         <label class="form-label">Company Name <span class="text-red">*</span></label>
  44.                                                         <input type="text" class="form-control" placeholder="Company name">
  45.                                                     </div>
  46.                                                 </div>
  47.                                                 <div class="col-md-12">
  48.                                                     <div class="form-group">
  49.                                                         <label class="form-label">Email address <span class="text-red">*</span></label>
  50.                                                         <input type="email" class="form-control" placeholder="Email">
  51.                                                     </div>
  52.                                                 </div>
  53.                                                 <div class="col-md-12">
  54.                                                     <div class="form-group">
  55.                                                         <label class="form-label">Country <span class="text-red">*</span></label>
  56.                                                         <select class="form-control select2 form-select"  data-placeholder="Select">
  57.                                                             <option label="Select"></option>
  58.                                                             <option value="1">Germany</option>
  59.                                                             <option value="2">Canada</option>
  60.                                                             <option value="3">Usa</option>
  61.                                                             <option value="4">Aus</option>
  62.                                                         </select>
  63.                                                     </div>
  64.                                                 </div>
  65.                                                 <div class="col-md-12">
  66.                                                     <div class="form-group">
  67.                                                         <label class="form-label">Address <span class="text-red">*</span></label>
  68.                                                         <input type="text" class="form-control" placeholder="Home Address">
  69.                                                     </div>
  70.                                                 </div>
  71.                                                 <div class="col-sm-6 col-md-6">
  72.                                                     <div class="form-group">
  73.                                                         <label class="form-label">City <span class="text-red">*</span></label>
  74.                                                         <input type="text" class="form-control" placeholder="City">
  75.                                                     </div>
  76.                                                 </div>
  77.                                                 <div class="col-sm-6 col-md-6">
  78.                                                     <div class="form-group">
  79.                                                         <label class="form-label">Postal Code <span class="text-red">*</span></label>
  80.                                                         <input type="number" class="form-control" placeholder="ZIP Code">
  81.                                                     </div>
  82.                                                 </div>
  83.                                             </div>
  84.                                         </div>
  85.                                     </div>
  86.                                     <div class="card">
  87.                                         <div class="card-header border-bottom">
  88.                                             <h3 class="card-title">Payment Information</h3>
  89.                                         </div>
  90.                                         <div class="card-body">
  91.                                             <div class="card-pay">
  92.                                                 <ul class="tabs-menu nav checkout">
  93.                                                     <li><a href="#tab20" class="active" data-bs-toggle="tab"><i class="fa fa-credit-card"></i> Credit Card</a></li>
  94.                                                     <li><a href="#tab21" data-bs-toggle="tab"><i class="fa fa-paypal"></i>  Paypal</a></li>
  95.                                                     <li><a href="#tab22" data-bs-toggle="tab"><i class="fa fa-university"></i>  Bank Transfer</a></li>
  96.                                                 </ul>
  97.                                                 <div class="tab-content">
  98.                                                     <div class="tab-pane active show" id="tab20">
  99.                                                         <div class="bg-danger-transparent-2 text-danger br-3 mb-4" role="alert">Please Enter Valid Details</div>
  100.                                                         <div class="form-group">
  101.                                                             <label class="form-label">Card Holder Name</label>
  102.                                                             <input type="text" class="form-control" placeholder="First Name">
  103.                                                         </div>
  104.                                                         <div class="form-group">
  105.                                                             <label class="form-label">Card number</label>
  106.                                                             <div class="input-group">
  107.                                                                 <input type="text" class="form-control" placeholder="Search for...">
  108.                                                                 <span class="input-group-text btn btn-success shadow-none">
  109.                                                                     <i class="fa fa-cc-visa"></i> &nbsp; <i class="fa fa-cc-amex"></i> &nbsp;
  110.                                                                     <i class="fa fa-cc-mastercard"></i>
  111.                                                                 </span>
  112.                                                             </div>
  113.                                                         </div>
  114.                                                         <div class="row">
  115.                                                             <div class="col-sm-8">
  116.                                                                 <div class="form-group">
  117.                                                                     <label class="form-label">Expiration</label>
  118.                                                                     <div class="input-group">
  119.                                                                         <input type="number" class="form-control" placeholder="MM" name="Month">
  120.                                                                         <input type="number" class="form-control" placeholder="YYYY" name="Year">
  121.                                                                     </div>
  122.                                                                 </div>
  123.                                                             </div>
  124.                                                             <div class="col-sm-4">
  125.                                                                 <div class="form-group">
  126.                                                                     <label class="form-label">CVV <i class="fa fa-question-circle"></i></label>
  127.                                                                     <input type="number" class="form-control" required="">
  128.                                                                 </div>
  129.                                                             </div>
  130.                                                         </div>
  131.                                                         <a href="#" class="btn btn-primary">Confirm</a>
  132.                                                     </div>
  133.                                                     <div class="tab-pane" id="tab21">
  134.                                                         <p>Paypal is easiest way to pay online</p>
  135.                                                         <p><a href="#" class="btn btn-primary"><i class="fa fa-paypal"></i> Log in my Paypal</a></p>
  136.                                                         <p class="mb-0"><strong>Note:</strong> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
  137.                                                     </div>
  138.                                                     <div class="tab-pane" id="tab22">
  139.                                                         <p>Bank account details</p>
  140.                                                         <dl class="card-text">
  141.                                                         <dt>BANK: </dt>
  142.                                                         <dd> THE UNION BANK 0456</dd>
  143.                                                         </dl>
  144.                                                         <dl class="card-text">
  145.                                                         <dt>Account Number: </dt>
  146.                                                         <dd> 67542897653214</dd>
  147.                                                         </dl>
  148.                                                         <dl class="card-text">
  149.                                                         <dt>IBAN: </dt>
  150.                                                         <dd>543218769</dd>
  151.                                                         </dl>
  152.                                                         <p class="mb-0"><strong>Note:</strong> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
  153.                                                     </div>
  154.                                                 </div>
  155.                                             </div>
  156.                                         </div>
  157.                                     </div>
  158.                                 </div>
  159.                                 <div class="col-xl-4 col-md-12">
  160.                                     <div class="card cart">
  161.                                         <div class="card-header border-bottom">
  162.                                             <h3 class="card-title">Your Order</h3>
  163.                                         </div>
  164.                                         <div class="card-body">
  165.                                             <div class="d-md-flex">
  166.                                                 <div class="d-flex">
  167.                                                     <img class="img-fluid avatar-xl border p-0 br-7" src="{{absolute_url(asset('build/images/pngs/9.png'))}}" alt="img">
  168.                                                     <div class="ms-3 mt-2">
  169.                                                         <h4 class="mb-1 fw-semibold fs-14"><a href="#">Rounded Shape Digital Watch For Men</a></h4>
  170.                                                         <div class="mb-2 text-warning fs-14">
  171.                                                             <i class="fa fa-star"></i>
  172.                                                             <i class="fa fa-star"></i>
  173.                                                             <i class="fa fa-star"></i>
  174.                                                             <i class="fa fa-star-half-o"></i>
  175.                                                             <i class="fa fa-star-o"></i>
  176.                                                         </div>
  177.                                                     </div>
  178.                                                 </div>
  179.                                                 <div class="ms-auto my-auto">
  180.                                                     <span class="me-4 my-auto fs-16 fw-semibold">$438</span>
  181.                                                 </div>
  182.                                             </div>
  183.                                             <div class="d-md-flex mt-5">
  184.                                                 <div class="d-flex">
  185.                                                     <img class="img-fluid avatar-xl border p-0 br-7" src="{{absolute_url(asset('build/images/pngs/1.png'))}}" alt="img">
  186.                                                     <div class="ms-3 mt-2">
  187.                                                         <h4 class="mb-1 fw-semibold fs-14"><a href="#">Digital Camera Pro 30.2MP With Lens</a></h4>
  188.                                                         <div class="mb-2 text-warning fs-14">
  189.                                                             <i class="fa fa-star"></i>
  190.                                                             <i class="fa fa-star"></i>
  191.                                                             <i class="fa fa-star"></i>
  192.                                                             <i class="fa fa-star-half-o"></i>
  193.                                                             <i class="fa fa-star-o"></i>
  194.                                                         </div>
  195.                                                     </div>
  196.                                                 </div>
  197.                                                 <div class="ms-auto my-auto">
  198.                                                     <span class="me-4 my-auto fs-16 fw-semibold">$765</span>
  199.                                                 </div>
  200.                                             </div>
  201.                                             <div class="d-md-flex mt-5">
  202.                                                 <div class="d-flex">
  203.                                                     <img class="img-fluid avatar-xl border p-0 br-7" src="{{absolute_url(asset('build/images/pngs/6.png'))}}" alt="img">
  204.                                                     <div class="ms-3 mt-2">
  205.                                                         <h4 class="mb-1 fw-semibold fs-14"><a href="#">Wood Photo Frame(M) With Wall Decorators</a></h4>
  206.                                                         <div class="mb-2 text-warning fs-14">
  207.                                                             <i class="fa fa-star"></i>
  208.                                                             <i class="fa fa-star"></i>
  209.                                                             <i class="fa fa-star"></i>
  210.                                                             <i class="fa fa-star-o"></i>
  211.                                                             <i class="fa fa-star-o"></i>
  212.                                                         </div>
  213.                                                     </div>
  214.                                                 </div>
  215.                                                 <div class="ms-auto my-auto">
  216.                                                     <span class="me-4 my-auto fs-16 fw-semibold">$543</span>
  217.                                                 </div>
  218.                                             </div>
  219.                                             <table class="table mt-5">
  220.                                                 <tr>
  221.                                                     <td class="border-top-0">Sub Total</td>
  222.                                                     <td class="text-end border-top-0">$4,360</td>
  223.                                                 </tr>
  224.                                                 <tr>
  225.                                                     <td class="border-top-0">Discount</td>
  226.                                                     <td class="text-end border-top-0">5%</td>
  227.                                                 </tr>
  228.                                                 <tr>
  229.                                                     <td class="border-top-0">Shipping</td>
  230.                                                     <td class="text-end border-top-0">Free</td>
  231.                                                 </tr>
  232.                                                 <tr>
  233.                                                     <td class="fs-20 border-top-0">Total</td>
  234.                                                     <td class="text-end fs-20 border-top-0">$3,976</td>
  235.                                                 </tr>
  236.                                             </table>
  237.                                         </div>
  238.                                         <div class="card-footer text-end">
  239.                                             <a href="#" class="btn btn-primary">Place Order</a>
  240.                                         </div>
  241.                                     </div>
  242.                                 </div>
  243.                             </div><!-- COL-END -->
  244.                             <!-- ROW-1 CLOSED -->
  245. {% endblock %}
  247. {% block javascripts %}
  248.    {{parent()}} 
  249.         <!-- SELECT2 JS -->
  250.         <script src="{{absolute_url(asset('build/plugins/select2/select2.full.min.js'))}}"></script>
  252.         <!-- INTERNAL BOOTSTRAP-DATEPICKER JS-->
  253.         <script src="{{absolute_url(asset('build/plugins/bootstrap-datepicker/bootstrap-datepicker.js'))}}"></script>
  255.         <!-- TIMEPICKER JS -->
  256.         <script src="{{absolute_url(asset('build/plugins/time-picker/jquery.timepicker.js'))}}"></script>
  257.         <script src="{{absolute_url(asset('build/plugins/time-picker/toggles.min.js'))}}"></script>
  259.         <!-- DATEPICKER JS -->
  260.         <script src="{{absolute_url(asset('build/plugins/date-picker/date-picker.js'))}}"></script>
  261.         <script src="{{absolute_url(asset('build/plugins/date-picker/jquery-ui.js'))}}"></script>
  262.         <script src="{{absolute_url(asset('build/plugins/input-mask/jquery.maskedinput.js'))}}"></script>
  263.         
  264.         <!-- CHECKOUT JS-->
  265.         {{ encore_entry_script_tags('js/checkout') }}
  267. {% endblock %}
  269.