Inicio » Cursos » App para Pizzería con delivery

Curso App para Pizzería con delivery

Capitulo 11 ➜ Diseño Detalle del Producto

Diseño Detalle del Producto

Detalle del Producto Laravel

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

 


540 visitas

Sigue con el curso: Capítulo 12 – Instalación del paquete del carrito de compra

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

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