Curso App para Pizzería con delivery
Diseño e implementación de la página para mostrar la características 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
403 visitas
Descarga el código fuente del proyecto adquiriendo el curso completo
Descargar ahora© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023
