API tools faq
paste
Advertisement
Guest User

Cart blade

a guest
May 2nd, 2021
541
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.33 KB | None | 0 0
raw download clone embed print report
  1. <div>
  2.     <h1 class="text-center text-green-500 text-7xl">Votre panier</h1>
  3. </div>
  4. <div class="flex justify-center my-6">
  5.  
  6.     <div
  7.        class="flex flex-col w-full p-8 text-gray-800 bg-white border-2 border-green-400 shadow-lg pin-r pin-y md:w-4/5 lg:w-4/5">
  8.         <div class="flex-1">
  9.             <table class="w-full text-sm lg:text-base" cellspacing="0">
  10.                 <thead>
  11.                     <tr class="h-12 uppercase">
  12.                         <th class="hidden md:table-cell"></th>
  13.                         <th class="text-left">Produit</th>
  14.                         <th class="pl-5 text-left lg:text-right lg:pl-0">
  15.                             <span class="lg:hidden" title="Quantity">Qtd</span>
  16.                             <span class="hidden lg:inline">Quantité</span>
  17.                         </th>
  18.                         <th class="hidden text-right md:table-cell">Prix de l'unité</th>
  19.                         <th class="text-right">Prix total</th>
  20.                     </tr>
  21.                 </thead>
  22.                 @if (Cart::count() > 0)
  23.  
  24.                 <tbody>
  25.                     @foreach (Cart::content() as $item)
  26.                     <tr>
  27.                         <td class="hidden pb-4 md:table-cell">
  28.                             <a href="{{ route('product.details', ['slug' => $item->model->slug]) }}">
  29.                                 <img src="{{ $item->model->image }}" class="w-20 rounded" alt="Thumbnail">
  30.                             </a>
  31.                         </td>
  32.                         <td>
  33.                             <a href="{{ route('product.details', ['slug' => $item->model->slug]) }}">
  34.                                 <p class="mb-2 md:ml-4">{{ $item->model->title }}</p>
  35.                                 <form action="" method="POST">
  36.                                     <button type="submit" class="text-gray-700 md:ml-4">
  37.                                         <small>(Retirer le produit)</small>
  38.                                     </button>
  39.                                 </form>
  40.                             </a>
  41.                         </td>
  42.                         <td class="justify-center mt-6 md:justify-end md:flex">
  43.                             <div class="w-20 h-10">
  44.                                 <div
  45.                                    class="relative flex flex-row content-center justify-center w-full h-8 border-2 border-green-200">
  46.                                     <button wire:click.prevent="increaseQuantity('{{ $item->rowId }}')"
  47.                                         class="text-gray-500 focus:outline-none focus:text-gray-600">
  48.                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
  49.                                            stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
  50.                                             <path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z">
  51.                                             </path>
  52.                                         </svg>
  53.                                     </button>
  54.                                     <p>{{ $item->qty }}</p>
  55.                                     <button wire:click.prevent="decreaseQuantity('{{ $item->rowId }}')"
  56.                                         class="text-gray-500 focus:outline-none focus:text-gray-600">
  57.                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
  58.                                            stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
  59.                                             <path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  60.                                         </svg>
  61.                                     </button>
  62.                                 </div>
  63.                             </div>
  64.                         </td>
  65.                         <td class="hidden text-right md:table-cell">
  66.                             <span class="text-sm font-medium lg:text-base">
  67.                                 {{ $item->model->getPrice() }}
  68.                             </span>
  69.                         </td>
  70.                         <td class="text-right">
  71.                             <span class="text-sm font-medium lg:text-base">
  72.                                 {{ $item->model->getTotalPrice($item->qty) }}
  73.                             </span>
  74.                         </td>
  75.                     </tr>
  76.                     @endforeach
  77.                 </tbody>
  78.                 @else
  79.                 <p>Aucun produit dans le panier</p>
  80.                 @endif
  81.             </table>
  82.             <hr class="pb-6 mt-6">
  83.             <div class="my-4 mt-6 -mx-2 lg:flex">
  84.                 <div class="lg:px-2 lg:w-1/2">
  85.                     <div class="p-4 bg-gray-100 rounded-full">
  86.                         <h1 class="ml-2 font-bold uppercase">Coupon de réduction</h1>
  87.                     </div>
  88.                     <div class="p-4">
  89.                         <p class="mb-4 italic">Si vous avez un coupon de réduction, veuillez le mettre ici.</p>
  90.                         <div class="justify-center md:flex">
  91.                             <form action="" method="POST">
  92.                                 <div
  93.                                    class="flex items-center w-full pl-3 bg-white bg-gray-100 border rounded-full h-13">
  94.                                     <input type="coupon" name="code" id="coupon" placeholder="Apply coupon"
  95.                                        value="90off"
  96.                                        class="w-full bg-gray-100 outline-none appearance-none focus:outline-none active:outline-none" />
  97.                                     <button type="submit"
  98.                                        class="flex items-center px-3 py-1 text-sm text-white bg-gray-800 rounded-full outline-none md:px-4 hover:bg-gray-700 focus:outline-none active:outline-none">
  99.                                         <svg aria-hidden="true" data-prefix="fas" data-icon="gift" class="w-8"
  100.                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  101.                                             <path fill="currentColor"
  102.                                                d="M32 448c0 17.7 14.3 32 32 32h160V320H32v128zm256 32h160c17.7 0 32-14.3 32-32V320H288v160zm192-320h-42.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H32c-17.7 0-32 14.3-32 32v80c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-80c0-17.7-14.3-32-32-32zm-326.1 0c-22.1 0-40-17.9-40-40s17.9-40 40-40c19.9 0 34.6 3.3 86.1 80h-86.1zm206.1 0h-86.1c51.4-76.5 65.7-80 86.1-80 22.1 0 40 17.9 40 40s-17.9 40-40 40z" />
  103.                                             </svg>
  104.                                         <span class="font-medium">Appliquer le coupon</span>
  105.                                     </button>
  106.                                 </div>
  107.                             </form>
  108.                         </div>
  109.                     </div>
  110.                     <div class="p-4 mt-6 bg-gray-100 rounded-full">
  111.                         <h1 class="ml-2 font-bold uppercase">Informations du client</h1>
  112.                     </div>
  113.                     <div class="p-4">
  114.                         <p class="mb-4 italic">Merci d'ajouter respectivement, votre nom prénom complet, votre adresse
  115.                             exacte et votre numéro de téléphone.</p>
  116.                         <textarea class="w-full h-24 p-2 bg-gray-100 rounded"></textarea>
  117.                     </div>
  118.                 </div>
  119.                 <div class="lg:px-2 lg:w-1/2">
  120.                     <div class="p-4 bg-gray-100 rounded-full">
  121.                         <h1 class="ml-2 font-bold uppercase">Détails de la commande</h1>
  122.                     </div>
  123.                     <div class="p-4">
  124.                         <p class="mb-6 italic">Le prix de la livraison dépendra de votre localisation.</p>
  125.                         <div class="flex justify-between border-b">
  126.                             <div class="m-2 text-lg font-bold text-center text-gray-800 lg:px-4 lg:py-2 lg:text-xl">
  127.                                 Total hors taxe
  128.                             </div>
  129.                             <div class="m-2 font-bold text-center text-gray-900 lg:px-4 lg:py-2 lg:text-lg">
  130.                                 {{ Cart::subtotal() }}
  131.                             </div>
  132.                         </div>
  133.                         <div class="flex justify-between pt-4 border-b">
  134.                             <div class="flex m-2 text-lg font-bold text-gray-800 lg:px-4 lg:py-2 lg:text-xl">
  135.                                 <form action="" method="POST">
  136.                                     <button type="submit" class="mt-1 mr-2 lg:mt-2">
  137.                                         <svg aria-hidden="true" data-prefix="far" data-icon="trash-alt"
  138.                                            class="w-4 text-red-600 hover:text-red-800"
  139.                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  140.                                             <path fill="currentColor"
  141.                                                d="M268 416h24a12 12 0 0012-12V188a12 12 0 00-12-12h-24a12 12 0 00-12 12v216a12 12 0 0012 12zM432 80h-82.41l-34-56.7A48 48 0 00274.41 0H173.59a48 48 0 00-41.16 23.3L98.41 80H16A16 16 0 000 96v16a16 16 0 0016 16h16v336a48 48 0 0048 48h288a48 48 0 0048-48V128h16a16 16 0 0016-16V96a16 16 0 00-16-16zM171.84 50.91A6 6 0 01177 48h94a6 6 0 015.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0012-12V188a12 12 0 00-12-12h-24a12 12 0 00-12 12v216a12 12 0 0012 12z" />
  142.                                             </svg>
  143.                                     </button>
  144.                                 </form>
  145.                                 Coupon
  146.                             </div>
  147.                             <div class="m-2 font-bold text-center text-green-700 lg:px-4 lg:py-2 lg:text-lg">
  148.                                 - 230,00 DA
  149.                             </div>
  150.                         </div>
  151.                         <div class="flex justify-between pt-4 border-b">
  152.                             <div class="m-2 text-lg font-bold text-center text-gray-800 lg:px-4 lg:py-2 lg:text-xl">
  153.                                 Nouv
  154.                             </div>
  155.                             <div class="m-2 font-bold text-center text-gray-900 lg:px-4 lg:py-2 lg:text-lg">
  156.                                 1 DA
  157.                             </div>
  158.                         </div>
  159.                         <div class="flex justify-between pt-4 border-b">
  160.                             <div class="m-2 text-lg font-bold text-center text-gray-800 lg:px-4 lg:py-2 lg:text-xl">
  161.                                 Total
  162.                             </div>
  163.                             <div class="m-2 font-bold text-center text-gray-900 lg:px-4 lg:py-2 lg:text-lg">
  164.                                 {{ Cart::total() }}
  165.                             </div>
  166.                         </div>
  167.                         <a href="#">
  168.                             <button
  169.                                class="flex justify-center w-full px-10 py-3 mt-6 font-medium text-white uppercase bg-gray-800 rounded-full shadow item-center hover:bg-gray-700 focus:shadow-outline focus:outline-none">
  170.                                 <svg aria-hidden="true" data-prefix="far" data-icon="credit-card" class="w-8"
  171.                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  172.                                     <path fill="currentColor"
  173.                                        d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z" />
  174.                                     </svg>
  175.                                 <span class="ml-2 mt-5px">Confirmer la commande</span>
  176.                             </button>
  177.                         </a>
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.         </div>
  182.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!