Capítulo 11 – Diseño Detalle del Producto – Curso App para Pizzería con delivery

Curso App para Pizzería con delivery

Capitulo 11 ➜ 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

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

988 visitas

« Capítulo 10 – Diseño e implementación del Catálogo

Capítulo 12 – Instalación del paquete del carrito de compra »

{ Curso App para Pizzería con delivery }

Compartir link con tus amigos

Descarga el código del proyecto

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

Comprar

Indice

Empezando el Proyecto

1 Planteamiento del Proyecto 2 Instalación de Laravel y configuración inicial

Panel de Administración

3 Auth y Roles de Usuario: Admin y Cliente 4 Implementación del CRUD de Categorías 5 Implementación CRUD Productos 6 Implementación CRUD Precios 7 Implementación CRUD Pedidos 8 Implementación CRUD Clientes

FrontEnd Diseño

9 Diseño de la Portada con productos 10 Diseño e implementación del Catálogo 11 Diseño Detalle del Producto

Carrito de Compra

12 Instalación del paquete del carrito de compra 13 Diseño de Notificación en la barra de menú 14 Diseño Resumen Carrito Lateral 15 Diseño de la vista Ver Carrito 16 Implementación Agregar Item 17 Incrementar Cantidad del Item 18 Decrementar la cantidad de un item 19 Remover un item del Carrito 20 Eliminar el carrito de compra 21 Confirmar y procesar el carrito de compra

API Rest

22 Planteamiento de la API Rest 23 Registro 24 Login 25 Logout 26 Categorías 27 Productos

Diseño de la App Android

28 Mockups del Aplicativo

Autenticación Android

29 Introducción a la Autenticación 30 ApiService 31 RetrofitClient 32 SessionManager 33 MainActivity 34 LoginActivity 35 RegisterActivity 36 Logout

Catálogo de Productos

37 Categorías 38 Productos 39 Detalle del Producto

Carrito de Compra Android

40 Creación de la DB dbpizza 41 Métodos de consulta a la DB 42 CarritoActivity 43 CarritoAdapter 44 AddItem 45 CarritoAll 46 UpdateItem 47 Subtotal, Impuesto y Total 48 Preparar el Pedido y enviarlo al Servidor 49 Vincular a WhatsApp y clearItems