public function index() { $blogs = Blog::all(); $categories = Category:all(); return view('blog', compact('blogs', 'categories')); }
Tenemos algo como el siguiente código en la página del blog. Primero obtenemos todas las categorías disponibles , luego una lista de todos los blogs .
@extends('layouts.app') @section('content') <div class="container"> <div class="category-filter" id="filter"> <div class="category-filter_item active">All</div> @foreach($categories as $category) <div class="category-filter_item">{{ $category->title }}</div> @endforeach </div> @foreach($blogs as $blog) <div class="blog-list {{ $blog->category_id}}"> <h2 class="blog_title">{{ $blog->title }}</h2> </div> @endforeach </div> @endsection
¿Puede ayudarnos a sugerir una función de filtrado que, al elegir una categoría específica, muestre todos los blogs de esta categoría por ID?
document.querySelectorAll('.category-filter_item').forEach(el => { el.addEventListener('click', () => { document .querySelector('.category-filter_item.active') .classList.remove('active'); el.classList.add('active');
Podría usar ajax en su caso enviando una solicitud ajax a su backend y usted maneja los datos, luego devuelve una respuesta, este es un ejemplo de una función en el controlador.
public function ajaxResponse(Request $request){ if ($request->ajax()) { $cat_id = $request->input('cat'); $blogs = Blog::query(); if ($cat_id != null) { $blogs->whereHas("categories", function ($query) use ($cat_id) { $query->whereIn('category_id', explode(',', $cat_id)); })->get(); } $blogs = $blogs->get(); $blog = view('articles.ajaxblogs', ['blogs' => $blogs])->render(); } return response()->json(['blog' => $blog]); }
Asegúrese de incluir la identificación de la categoría en la solicitud.