Inicio » Cursos » App para Pizzería con delivery

Curso App para Pizzería con delivery

Capitulo 10 ➜ Diseño e implementación del Catálogo

Implementación del Catálogo de productos

Diseño e implementación de los productos organizados por categorías con sus precios según el tamaño de cada pizza

Diseño e implementación de los productos organizados por categorías con sus precios según el tamaño de cada pizza

Vista catalogo.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-8">
            <h1 class="text-center fs-4">CATÁLOGO</h1> 
            <div class="row">
                @foreach ($categorias as $c)
                    <div class="col-sm-12">
                        <h2 class="text-center mt-5">{{$c->nombre}}</h2>
                        <div class="row justify-content-center">
                            @forelse ($c->productos as $p)
                            <div class="col-sm-4 col-6 mt-3 mb-3">
                                <div class="card">
                                    <a href="/catalogo/{{$p->slug}}">
                                        <img src="/img/{{$p->urlfoto}}" class="card-img-top">
                                    </a>
                                    <div class="card-body text-center">
                                        @if ($p->precios->count())
                                            <p class="fw-bold fs-4" id="txtprecio{{$p->id}}">USD {{$p->precios[0]->precio}}</p>
                                            <select name="precios" id="{{$p->id}}" class="form-control precios">
                                                @foreach ($p->precios as $item)
                                                    <option value="{{$item->precio}}" data-precioid="{{$item->id}}">{{$item->nombre}}</option>
                                                @endforeach                                        
                                            </select>                                    
                                        @else
                                            <p class="fw-bold fs-4">USD {{$p->precio}}</p>
                                        @endif
                                        <a href="/catalogo/{{$p->slug}}">{{$p->nombre}}</a>
                                    </div>
                                    <div class="card-footer">
                                        <form action="{{route('agregaritem')}}" method="post">
                                            @csrf
                                            @if ($p->precios->count())
                                                <input type="hidden" name="precio_id" id="precio_{{$p->id}}" value="{{$p->precios[0]->id}}">
                                            @endif
                                            <input type="hidden" name="producto_id" value="{{$p->id}}">
                                            <input type="submit" value="AGREGAR" class="btn btn-success w-100">
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @empty
                                
                            @endforelse
                        </div>
                    </div>
                @endforeach           
            </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
        document.getElementById("precio_"+e.target.id).value =  element.options[element.selectedIndex].dataset.precioid

    })
});
</script>
@endsection

 


815 visitas

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
Extras
50 Optimizando el diseño y funcionalidades

Más cursos que pueden interesarte

Más cursos

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024