➜ 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
1525 visitas
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¡Qué aprenderás?
tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner
