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

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

 


576 visitas

Sigue con el curso: Capítulo 11 – Diseño Detalle del Producto

Descarga el código del proyecto

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

Comprar

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