Capitulo 11 ➜ Diseño Detalle del Producto

Diseño e implementación de la página para mostrar la características del producto 

Ruta a implementar que contiene al producto

.....
Route::get('/catalogo/{producto:slug}', [App\Http\Controllers\FrontController::class, 'producto']);
.....

Agregamos al controlador el siguiente troz de código

public function producto(Producto $producto){      
        $producto->increment("visitas");
        return view('front.producto', compact("producto") );
    }

Vista 

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">            
            <div class="row">
                <div class="col-sm-6">
                    <img src="/img/{{$producto->urlfoto}}" class="img-fluid mx-auto d-block">
                </div>
                <div class="col-sm-6 bg-light pt-5 pb-5">
                    <h2>{{$producto->nombre}}</h2>
                    @if ($producto->precios->count())
                        <p class="fw-bold fs-4" id="txtprecio{{$producto->id}}">USD {{$producto->precios[0]->precio}}</p>
                        <select name="precios" id="{{$producto->id}}" class="form-control precios">
                            @foreach ($producto->precios as $item)
                                <option value="{{$item->precio}}">{{$item->nombre}}</option>
                            @endforeach                                        
                        </select>                                    
                    @else
                        <p class="fw-bold fs-4">USD {{$producto->precio}}</p>
                    @endif
                </div>
                <div class="col-sm-12 mt-5">
                    {!!$producto->descripcion!!}
                </div>
            </div>
        </div>
    </div>
</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
        })
    });
</script>
@endsection