Inicio » Blog » Laravel

18 septiembre, 2020

Crear Carrito de Compras en Laravel

Desarrollo de carrito de compras en Laravel: Diseño y programación de un carrito de compras personalizados con Laravel para tiendas en línea.

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

¿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 15802 veces

Descarga el código fuente Laravel

Recurso descargado 96 veces

USD 5.00

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Laravel 9 Página Web para Negocio Laravel 9 Página Web para Negocio

Curso Laravel 9 Avanzado Desarrollo Web Administrable para negocio

Descarga del código fuente

USD 33.00

Aprende más sobre Laravel

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023