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

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