Capitulo 16 ➜ Implementación Agregar Item

Implementación de la funcionalidad Agregar un Item al Carrito de Compra desde la ruta, el controlador CarritoControler el método agregarItem, y la vista

Vista  catalago.blade.php

...
<div class="card-body text-center">
@if ($p->precios->count())
 <p class="fw-bold fs-4" id="txtprecio{{$p->id}}">USD {{$p->precios[0]->precio}}</p>
 <select name="precios" id="{{$p->id}}" class="form-control precios">
 @foreach ($p->precios as $item)
  <option value="{{$item->precio}}" data-precioid="{{$item->id}}">{{$item->nombre}}</option>
 @endforeach                                        
 </select>                                    
@else
 <p class="fw-bold fs-4">USD {{$p->precio}}</p>
@endif
 <a href="/catalogo/{{$p->slug}}">{{$p->nombre}}</a>
</div>
...
<div class="card-footer">
   <form action="{{route('agregaritem')}}" method="post">
      @csrf
      @if ($p->precios->count())
      <input type="hidden" name="precio_id" id="precio_{{$p->id}}" value="{{$p->precios[0]->id}}">
      @endif
      <input type="hidden" name="producto_id" value="{{$p->id}}">
      <input type="submit" value="AGREGAR" class="btn btn-success w-100">
   </form>
</div>
...

<script>
var selectprecios = document.querySelectorAll(".precios")
selectprecios.forEach(element => {
    document.getElementById(element.id).addEventListener("change",e=>{
        document.getElementById("txtprecio"+e.target.id).textContent = "USD "+e.target.value
        document.getElementById("precio_"+e.target.id).value =  element.options[element.selectedIndex].dataset.precioid

    })
});
</script>

Ruta routes/web.php

// carrito
Route::post('/agregaritem', [App\Http\Controllers\CarritoController::class, 'agregarItem'])->name("agregaritem");
Route::get('/vercarrito', [App\Http\Controllers\CarritoController::class, 'verCarrito'])->name("vercarrito");

Controlador

?php

namespace App\Http\Controllers;

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

class CarritoController extends Controller
{
    public function agregaritem(Request $request){

        $producto   = Producto::find($request->producto_id);
        $precio     = Precio::find($request->precio_id);
        $_precio    = $producto->precio;
        $_nombre    = "";
        if(!empty($precio)){
            $_precio = $precio->precio;
            $_nombre = $precio->nombre; //nombre del tamaño de la pizzas  personal - mediana - 
        }

        Cart::add([
            'id' => $producto->id,
            'name' => $producto->nombre,
            'price' =>$_precio,
            'qty' =>1,
            'weight' => 1,
            'options' => [
                'urlfoto' =>$producto->urlfoto,
                'nombre' => $_nombre,
            ]
        ]);
        return redirect()->back()->with("success","$producto->nombre !Se ha agregado correctamente al carrito");
    }
    
    public function verCarrito(){
        return view('front.carrito');
    }
}

Vista  app.blade.php

...
<!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        @if (Cart::content()->count())
                        <li class="nav-item">
                        <a class="nav-link position-relative" href="/vercarrito" >                            
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
                                <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                            </svg>
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                              {{Cart::content()->count()}}
                              <span class="visually-hidden">unread messages</span>
                            </span>
                        </a>
                        </li>
                        @endif
.......