Facebook
From haris, 2 Years ago, written in PHP.
Embed
Download Paste or View Raw
Hits: 78
  1. @extends('layouts.front')
  2.  
  3. @section('content')
  4.     <!-- entry-header-area-start -->
  5.     <div class="entry-header-area mt-60">
  6.         <div class="container">
  7.             <div class="row">
  8.                 <div class="col-lg-12">
  9.                     <div class="entry-header-title">
  10.                         <h2>Cart</h2>
  11.                     </div>
  12.                 </div>
  13.             </div>
  14.         </div>
  15.     </div>
  16.     <!-- entry-header-area-end -->
  17.     <!-- cart-main-area-start -->
  18.     <div class="cart-main-area mb-70">
  19.         <div class="container">
  20.             <div class="row">
  21.                 <div class="col-lg-12">
  22.                     <form action="#">
  23.                         <div class="table-content table-responsive mb-15 border-1">
  24.                             <table>
  25.                                 <thead>
  26.                                     <tr>
  27.                                         <th>NO</th>
  28.                                         <th class="product-thumbnail">{{ __('messages.label_photo') }}</th>
  29.                                         <th class="product-name">{{ __('messages.label_product') }}</th>
  30.                                         <th class="product-price">{{ __('messages.label_price') }}</th>
  31.                                         <th class="product-quantity">{{ __('messages.label_qty') }}</th>
  32.                                         <th class="product-subtotal">Total</th>
  33.                                         <th class="product-remove">{{ __('messages.label_action') }}</th>
  34.                                     </tr>
  35.                                 </thead>
  36.                                 <tbody>
  37.                                     @php
  38.                                         $total = 0;
  39.                                     @endphp
  40.                                     @foreach ($items as $key=> $item)
  41.                                         @php
  42.                                             $price = $item->product->is_discount == 1 ? $item->product->price_striked : $item->product->price;
  43.                                             $subtotal = $item->quantity * $price;
  44.                                             $total += $subtotal;
  45.                                         @endphp
  46.                                         <tr id="{{ $item->id }}">
  47.                                             <th>{{ $items->firstItem()+$key }}</th>
  48.                                             <td class="product-thumbnail"><a href="#"><img
  49.                                                         src="{{ MyHelper::get_uploaded_file_url($item->product->thumbnail) }}"
  50.                                                         alt="foto produk" /></a>
  51.                                             </td>
  52.                                             <td class="product-name">
  53.                                                 <a href="{{ route('product.show', $item->product->slug) }}">{{ $item->product->name }}</a>
  54.                                             </td>
  55.                                             <td class="product-price"><span class="amount">
  56.                                                     @if ($item->product->is_discount)
  57.                                                         <span class="old-price"
  58.                                                             style="font-size: 14px !important;"><span
  59.                                                                 style="font-size: 14px !important;">Rp</span>
  60.                                                             {{ MyHelper::rupiah($item->product->price) }}</span> <br>
  61.                                                         <span style="font-size:18px !important;"><span
  62.                                                                 style="font-size: 16px !important;">Rp</span>
  63.                                                             {{ MyHelper::rupiah($item->product->price_striked ?? 0) }}</span>
  64.                                                     @else
  65.                                                         <span style="font-size:18px !important;"><span
  66.                                                                 style="font-size: 16px !important;">Rp</span>
  67.                                                             {{ MyHelper::rupiah($item->product->price) }}</span>
  68.                                                     @endif
  69.                                                 </span></td>
  70.                                             <td class="product-quantity"><input class="quantities" type="number"
  71.                                                     id="{{ $item->id }}" value="{{ $item->quantity }}">
  72.                                                 <button type="button" class="btn-icon btn-update-qty"
  73.                                                     id="{{ $item->id }}">
  74.                                                     <i class="fa fa-floppy-o"></i>
  75.                                                 </button>
  76.                                             </td>
  77.                                             <td class="product-subtotal">Rp
  78.                                                 <span
  79.                                                     id="subtotal_{{ $item->id }}">{{ MyHelper::rupiah($subtotal) }}</span>
  80.                                             </td>
  81.                                              @empty
  82.                                                                 <tr>
  83.                                                                     <td colspan="6">Belum ada Transaksi</td>
  84.                                                                 </tr>
  85.                                             <td class="product-remove"><button class="delete_cart" type="button"
  86.                                                     id="{{ $item->id }}"><i class="fa fa-times"></i></button></td>
  87.                                         </tr>
  88.                                     @endforeach
  89.                                 </tbody>
  90.                             </table>
  91.  
  92.                               <div class="pull-right">
  93.                                                     {{ $items->links() }}
  94.                                                     </div>
  95.                         </div>
  96.                     </form>
  97.                 </div>
  98.             </div>
  99.             <div class="row">
  100.                 <div class="col-lg-8 col-md-6 col-12">
  101.                     <div class="buttons-cart mb-30">
  102.                         <ul>
  103.                             <li><a href="{{ route('welcome') }}">{{ __('messages.continue_shopping') }}</a></li>
  104.                         </ul>
  105.                     </div>
  106.                 </div>
  107.                 <div class="col-lg-4 col-md-6 col-12">
  108.                     <div class="cart_totals">
  109.                         <h2>Total</h2> <br>
  110.                         <table>
  111.                             <tbody>
  112.                                 <tr class="order-total">
  113.                                     <th>Total</th>
  114.                                     <td>
  115.                                         <strong>
  116.                                             <span class="amount" id="total_amount">Rp
  117.                                                 {{ MyHelper::rupiah($total) }}</span>
  118.                                         </strong>
  119.                                     </td>
  120.                                 </tr>
  121.                             </tbody>
  122.                         </table>
  123.                         <br><br>
  124.                         <div class="wc-proceed-to-checkout text-right">
  125.                             <a href="{{ route('checkout') }}">Checkout</a>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.     </div>
  132.     <!-- cart-main-area-end -->
  133. @endsection
  134.  
  135. @push('js')
  136.     <script>
  137.  
  138.  
  139.         $(document).ready(function() {
  140.             var user_id = '{{ auth()->user()->id }}';
  141.             var the_total = 0;
  142.  
  143.             $(document).on('click', '.delete_cart', function(e) {
  144.                 var cart_id = $(this).attr('id');
  145.                 var the_data = {
  146.                     cart_id: cart_id,
  147.                     user_id: user_id
  148.                 };
  149.                 e.preventDefault();
  150.  
  151.                 swal({
  152.                     title: 'Hapus dari keranjang?',
  153.                     text: "Apakah anda yakin menghapus barang ini dari keranjang anda?",
  154.                     icon: 'warning',
  155.                     buttons: {
  156.                         confirm: {
  157.                             text: 'Ya!',
  158.                             className: 'btn btn-success'
  159.                         },
  160.                         cancel: {
  161.                             visible: true,
  162.                             className: 'btn btn-danger'
  163.                         }
  164.                     }
  165.                 }).then((Delete) => {
  166.                     if (Delete) {
  167.                         // do ajax delete
  168.                         $.ajax({
  169.                             type: "POST",
  170.                             url: "{{ route('v1.delete_cart_item') }}",
  171.                             data: the_data,
  172.                             dataType: "json",
  173.                             headers: {
  174.                                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  175.                             },
  176.                             success: function(res) {
  177.                                 if (res.data.is_success == true) {
  178.                                     var sessionMessage = res.meta.message;
  179.                                     toastr.options = {
  180.                                         "closeButton": true,
  181.                                         "debug": false,
  182.                                         "newestOnTop": false,
  183.                                         "progressBar": true,
  184.                                         "positionClass": "toast-bottom-right",
  185.                                         "preventDuplicates": false,
  186.                                         "onclick": null,
  187.                                         "showDuration": "300",
  188.                                         "hideDuration": "1000",
  189.                                         "timeOut": "5000",
  190.                                         "extendedTimeOut": "1000",
  191.                                         "showEasing": "swing",
  192.                                         "hideEasing": "linear",
  193.                                         "showMethod": "fadeIn",
  194.                                         "hideMethod": "fadeOut"
  195.                                     }
  196.  
  197.                                     $(document).ready(function onDocumentReady() {
  198.                                         toastr.success(sessionMessage);
  199.                                     });
  200.                                     $('tr#' + cart_id).fadeOut();
  201.                                     reCalculateTotal(user_id)
  202.                                     reloadCartItems(user_id);
  203.                                 } else {
  204.                                     const el = document.createElement('div')
  205.                                     el.innerHTML =
  206.                                         "Silahkan <a href='{{ route('register') }}'>Registrasi</a> dahulu untuk melanjutkan"
  207.                                     swal({
  208.                                         title: 'Registrasi Dahulu',
  209.                                         content: el,
  210.                                         icon: 'warning',
  211.                                         buttons: {
  212.                                             confirm: {
  213.                                                 className: 'btn btn-warning'
  214.                                             }
  215.                                         }
  216.                                     });
  217.                                 }
  218.                             },
  219.                             error: function(res) {
  220.                                 console.log(res);
  221.                                 swal({
  222.                                     title: 'Gagal',
  223.                                     text: res.metamessage,
  224.                                     icon: 'error',
  225.                                     buttons: {
  226.                                         confirm: {
  227.                                             className: 'btn btn-warning'
  228.                                         }
  229.                                     }
  230.                                 });
  231.                             }
  232.                         })
  233.  
  234.  
  235.                     } else {
  236.                         swal.close();
  237.                     }
  238.                 });
  239.             })
  240.  
  241.             $(document).on('click', '.btn-update-qty', function(e) {
  242.                 var cart_id = $(this).attr('id');
  243.                 var new_qty = $(this).siblings().val();
  244.                 e.preventDefault();
  245.                 var the_data = {
  246.                     cart_id: cart_id,
  247.                     new_qty: new_qty,
  248.                     user_id: user_id
  249.                 };
  250.                 var thisButton = $(this);
  251.                 thisButton.addClass('onloading');
  252.                 $.ajax({
  253.                     type: "POST",
  254.                     url: "{{ route('v1.update_cart_qty') }}",
  255.                     data: the_data,
  256.                     dataType: "json",
  257.                     headers: {
  258.                         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  259.                     },
  260.                     success: function(res) {
  261.                         // console.log(res);
  262.                         setTimeout(function() {
  263.                             thisButton.removeClass('onloading');
  264.                         }, 1000)
  265.                         if (res.data.is_success == true) {
  266.                             var sessionMessage = res.meta.message;
  267.                             toastr.options = {
  268.                                 "closeButton": true,
  269.                                 "debug": false,
  270.                                 "newestOnTop": false,
  271.                                 "progressBar": true,
  272.                                 "positionClass": "toast-bottom-right",
  273.                                 "preventDuplicates": false,
  274.                                 "onclick": null,
  275.                                 "showDuration": "300",
  276.                                 "hideDuration": "1000",
  277.                                 "timeOut": "5000",
  278.                                 "extendedTimeOut": "1000",
  279.                                 "showEasing": "swing",
  280.                                 "hideEasing": "linear",
  281.                                 "showMethod": "fadeIn",
  282.                                 "hideMethod": "fadeOut"
  283.                             }
  284.  
  285.                             $(document).ready(function onDocumentReady() {
  286.                                 toastr.success(sessionMessage);
  287.                             });
  288.  
  289.                             $('#subtotal_' + cart_id).text(res.data.new_subtotal)
  290.                             reCalculateTotal(user_id);
  291.                             reloadCartItems(user_id);
  292.                         } else {
  293.                             const el = document.createElement('div')
  294.                             el.innerHTML =
  295.                                 "Silahkan <a href='{{ route('register') }}'>Registrasi</a> dahulu untuk melanjutkan"
  296.                             swal({
  297.                                 title: 'Registrasi Dahulu',
  298.                                 content: el,
  299.                                 icon: 'warning',
  300.                                 buttons: {
  301.                                     confirm: {
  302.                                         className: 'btn btn-warning'
  303.                                     }
  304.                                 }
  305.                             });
  306.                         }
  307.                     },
  308.                     error: function(res) {
  309.                         console.log(res);
  310.                         swal({
  311.                             title: 'Gagal',
  312.                             text: res.meta.message,
  313.                             icon: 'error',
  314.                             buttons: {
  315.                                 confirm: {
  316.                                     className: 'btn btn-warning'
  317.                                 }
  318.                             }
  319.                         });
  320.                     }
  321.                 })
  322.             })
  323.         })
  324.     </script>
  325. @endpush
  326.