Good afternoon, how to display post data by category in laravel livewire? here I want to try to display post by category data in the following way but it still doesn't work:
web.php
Route::get('category/{category:slug}',[FrontController::class, 'category'])->name('category');
FrontController.php
public $search;
public function category(Category $category)
{
$categories = Category::all();
$general = General::find(1);
$locale = App::currentLocale();
$category_id = $category->id;
$search = request("search");
$posts = Post::where([
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate(12);
if ($this->search !== null) {
$posts = Post::where([
['title','like', '%' . $this->search . '%'],
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate(12);
}
// dd($category_id);
$tags = Tag::all();
$top = Post::where('status','PUBLISH')->orderBy('views','desc')->limit(5)->get();
return view ('front.category',compact('categories','category_id','general','locale','posts','tags','top'));
}
category.blade.php
@extends('layouts.front')
@section('content')
<main id="main">
<section class="post-category">
<div class="container-fluid">
<div class="row mt-3">
<div class="col-lg-3 col-md-12 col-sm-12 d-none d-lg-block">
<div class="sticky-top" style="top: 90px;">
<div class="card mb-3 rounded-3">
<div class="card-body">
<a href="#" target="_blank" rel="noreferrer">
<img src="{{ asset('front/img/ads.png') }}" alt="..." height="300" width="279" class="card-img-top" />
</a>
</div>
</div>
<div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.category') }}
</div>
<ul class="list-group list-group-flush">
@foreach ($categories as $category)
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="{{ route('category', $category->slug) }}">{{ $category->name }}</a>
</li>
@endforeach
</ul>
</div>
<div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
Tags
</div>
<div class="p-3 overflow-auto" style="max-height: 42vh">
<div class="nav tag-cloud">
@foreach ($tags as $tag)
<a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="category_id" value="{{ $category_id }}">
<livewire:category-index>
<div class="col-lg-3 col-md-12 col-sm-12">
<div class="sticky-top" style="top: 90px;">
<div class="card rounded-3 shadow-lg mb-3">
<div class="card-body">
<img src="{{ asset('front/img/ads1.png') }}" height="117" width="279" class="card-img-top" alt="...">
</div>
</div>
<div class="bg-light shadow bg-body rounded-3 mb-3">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.top_article') }}
</div>
<ul class="list-group list-group-flush mb-2">
@foreach ($top as $top)
<li class="list-group-item">
<a href="{{ route('blogShow', $top->slug) }}">{{ $top->title }}</a>
<div class="d-flex justify-content-between mt-3">
<small class="text-muted">{{ Carbon\Carbon::parse($top->created_at)->format("d F, Y") }}</small>
<small class="text-muted">{{ $top->views }} views </small>
</div>
</li>
@endforeach
</ul>
</div>
<div class="d-flex flex-column mb-3 bg-light shadow bg-body rounded d-lg-none d-xl-none">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.category') }}
</div>
<ul class="list-group list-group-flush">
@foreach ($categories as $category)
<li class="list-group-item d-flex justify-content-between align-items-center">
<a href="{{ route('category', $category->slug) }}">{{ $category->name }}</a>
</li>
@endforeach
</ul>
</div>
<div class="d-flex flex-column bg-light bg-body shadow-lg rounded-3 d-lg-none d-xl-none">
<div class="card-header bg-primary bg-gradient text-white fw-bold fs-5">
{{ __('sentence.tag') }}
</div>
<div class="p-3 overflow-auto" style="max-height: 42vh">
<div class="nav tag-cloud">
@foreach ($tags as $tag)
<a href="{{ route('tag', $tag->slug) }}">{{ $tag->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
@endsection
@push('scripts')
@livewireScripts
<script type="text/javascript">
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('category-index');
}
};
</script>
<script>
document.getElementById('load-more').onclick = function() {
window.livewire.emit('category-index');
};
</script>
@endpush
livewire\CategoryIndex.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\{Category, Post};
use Illuminate\Support\Facades\App;
class CategoryIndex extends Component
{
public $limitPerPage = 10;
public $search;
protected $listeners = [
'category-index' => 'CategoryIndex'
];
protected $updatesQueryString = [
['search' => ['except' => '']],
];
public function CategoryIndex()
{
$this->limitPerPage = $this->limitPerPage + 6;
}
public function render()
{
$locale = App::currentLocale();
$category_id = request('category_id');
$posts = Post::where([
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate($this->limitPerPage);
if ($this->search !== null) {
$posts = Post::where([
['title','like', '%' . $this->search . '%'],
['lang',$locale],
['category_id',$category_id],
['status','PUBLISH'],
])->latest()->paginate($this->limitPerPage);
}
$this->emit('postStore');
dd($category_id);
return view('livewire.category-index', ['posts' => $posts]);
}
}
livewire\category-index.blade.php
<div class="col-lg-6 col-md-12 col-sm-12">
<div id="section-title" class="section-title p-1 pt-3">
<h2 class="text-center fw-bold">{{ trans('sentence.recent_posts')}}</h2>
</div>
<div class="form-group has-search mb-3">
<span class="bi bi-search form-control-feedback"></span>
<input type="text" wire:model="search" class="form-control" placeholder="{{ __('sentence.search_form') }}">
</div>
@foreach ($posts as $data)
<div class="card bg-light shadow bg-body rounded-3 mb-2">
<div class="card-header bg-primary text-white d-flex justify-content-between">
<small>by {{$data->admin->name}}</small>
<small>{{ Carbon\Carbon::parse($data->created_at)->format("d F, Y") }}</small>
</div>
<div class="card-body">
<h2 class="card-title">
<a href="{{ route('blogShow', $data->slug) }}">{{ $data->title }}</a>
</h2>
<div class="card-footer bg-body d-flex justify-content-between align-items-center pb-0 px-0">
<div class="d-flex my-1">
@foreach ($data->tags as $tag)
<a href="{{ route('tag', $tag->slug) }}" class="badge {{ $tag->bg }} me-1 shadow-sm text-white">{{ $tag->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
@endforeach
@if ($posts->count() == 0)
<div class="alert alert-danger" role="alert">
Data not found!
</div>
@endif
@if($posts->count() >= 10)
<div class="text-center d-md-none d-lg-none d-xl-none">
<button id="load-more" class="btn btn-primary my-3">
Load More
</button>
</div>
@endif
</div>
If I add($category_id); in FrontController.php the id of that category appears, but if I try to dd in livewire\CategoryIndex.php it shows null. what is the correct way to display posts by category? thank you
Livewire components work slightly differently to blade views, they do not automatically inherit variables from their parents.
What you need to do is pass your category_id to the Livewire component.
class CategoryIndex extends Component
{
public $categoryId;
}
<livewire:category-index :categoryId="$category_id" />