Crear Carrito de Compras en Laravel

¿Cómo programar un carrito de compra o shopping cart en Laravel?

Base de datos:

CREATE TABLE `products` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `price` decimal(7,2) NOT NULL,
  `image` varchar(255) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Volcado de datos para la tabla `products`
--

INSERT INTO `products` (`id`, `name`, `price`, `image`, `created_at`, `updated_at`) VALUES
(1, 'Polo Blanco', '15.00', '1.jpg', NULL, NULL),
(2, 'Pantalon Jeans', '340.00', '2.jpg', NULL, NULL),
(3, 'Blusa de Encaje', '35.00', '3.jpg', NULL, NULL),
(4, 'Casaca Jeans', '46.00', '4.jpg', NULL, NULL);

Bien, implementar un carrito de compra en una aplicación web sin usar Laravel  es necesario escribir código en PHP muy extenso. 

Laravel nos facilita este proceso con el uso de paquetes de terceros que tiene el desarrollo y la lógica implementandos y que podemos adecuar a nuestro desarrollo ya sea en un proyecto personal o profesional.

Luego, un carrito de compra nos permite ir acumulando en sesiones o cookies los productos que hayamos elegido para finalmente mostrar el detalle en una lista de productos con atributos como:

• El número u orden de Item
• El nombre del producto
• Una foto
• Precio
• Cantidad del producto

Finalmente  nos permite tener los cálculos  de los precios totales, Impuestos.

Empezando a programar el carrito de compra Laravel

Bien ahora empecemos a implementar un carrito de compra en una aplicación Laravel

Contextualizando, debemos tener instalado Laravel con la configuración a una base de datos MYSQL. Además de haber implementando un modelo Productos con su correspodiente migración. Incluimos Bootstrap y la distribución de las plantillas Blade correspondientes.

Paso 1. Desde el perfil del Paquete en GitHub https://github.com/darryldecode/laravelshoppingcart podemos acceder a el proceso de configuración de dicho paquete.

En la terminal digitar el siguiente comando Artisan y presionar enter:

composer require "darryldecode/cart"

Luego realizar la configuración en el archivo config/app.php

1. Abrimos config/app.php y agregamos la siguiente linea en provider.: Darryldecode\Cart\CartServiceProvider::class
2. Agremos el siguiente alias: 'Cart' => Darryldecode\Cart\Facades\CartFacade::class
3. Opcionalmente podemos configurar: php artisan vendor:publish --provider="Darryldecode\Cart\CartServiceProvider" --tag="config"

Finalmente pues ya tenemos instalado el paquete listo para usar.

MOSTRAR LOS PRODUCTOS 

CONTROLLER:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Producto;

class FrontController extends Controller
{

    public function index(){

        $productos    =   Producto::all();
        return view('welcome',compact('productos'));

    }
}

VISTA:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
       <div class="col-sm-3 bg-light">
           @if (count(Cart::getContent()))
               <a href="{{route('cart.checkout')}}"> VER CARRITO <span class="badge badge-danger">{{count(Cart::getContent())}}</span></a>
           @endif

       </div>
       <div class="col-sm-9">
            <div class="row  justify-content-center">
                @forelse ($productos as $item)
                <div class="col-4 border p-5 mt-5 text-center">
                    <h1>{{$item->nombre}}</h1>
                    <P>$ {{$item->precio}}</P>
                    <form action="{{route('cart.add')}}" method="post">
                        @csrf
                        <input type="hidden" name="producto_id" value="{{$item->id}}">
                        <input type="submit" name="btn"  class="btn btn-success" value="ADD TO CART">
                    </form>
                </div>
            @empty
                
            @endforelse
            </div>
       </div>
    </div>
</div>
@endsection

RUTA:

Route::get('/', 'FrontController@index' );

CARRITO DE COMPRA:

Nuestro Controller tiene el siguiente código:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Cart;
use App\Producto;


class CartController extends Controller
{
    
    public function add(Request $request){
       
        $producto = Producto::find($request->producto_id);

        Cart::add(
            $producto->id, 
            $producto->nombre, 
            $producto->precio, 
            1,
            array("urlfoto"=>$producto->urlfoto)
           
        );
        return back()->with('success',"$producto->nombre ¡se ha agregado con éxito al carrito!");
   
    }

    public function cart(){
        
        return view('checkout');
    }

    public function removeitem(Request $request) {
        //$producto = Producto::where('id', $request->id)->firstOrFail();
        Cart::remove([
        'id' => $request->id,
        ]);
        return back()->with('success',"Producto eliminado con éxito de su carrito.");
    }

    public function clear(){
        Cart::clear();
        return back()->with('success',"The shopping cart has successfully beed added to the shopping cart!");
    }

}

Definimos nuestras rutas en route/web.php

Route::post('/cart-add',    'CartController@add')->name('cart.add');

Route::get('/cart-checkout','CartController@cart')->name('cart.checkout');

Route::post('/cart-clear',  'CartController@clear')->name('cart.clear');

Route::post('/cart-removeitem',  'CartController@removeitem')->name('cart.removeitem');

Las vistas tienen el siguiente código:

Vista  checkout

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
       <div class="col-sm-12 bg-light">
           @if (count(Cart::getContent()))
            <table class="table table-striped">
                <thead>
                    <th>ID</th>
                    <th>NOMBRE</th>
                    <th>PRECIO</th>
                    <th>CANTIDAD</th>
                </thead>
                <tbody>
                    @foreach (Cart::getContent() as $item)
                        <tr>
                            <td>{{$item->id}}</td>
                            <td>{{$item->name}}</td>
                            <td>{{$item->price}}</td>
                            <td>{{$item->quantity}}</td>
                            <td>
                                <form action="{{route('cart.removeitem')}}" method="POST">
                                    @csrf
                                    <input type="hidden" name="id" value="{{$item->id}}">
                                    <button type="submit" class="btn btn-link btn-sm text-danger">x</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @else
                <p>Carrito vacio</p>
           @endif

       </div>
       
    </div>
</div>
@endsection

Si deseas lleva el curso TIENDA DELIVERY CON CARRITO DE COMPRA

Leido 16365 veces