Inicio » Cursos » App para Pizzería con delivery

Empezando el Proyecto

Panel de Administración

FrontEnd Diseño

Carrito de Compra

API Rest

Diseño de la App Android

Autenticación Android

Catálogo de Productos

Carrito de Compra Android

Extras

Curso App para Pizzería con delivery

Lección: 11 ➜ Diseño Detalle del Producto

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

Lección 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

 


403 visitas

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