I’m trying to get the categories and it’s categories as nested items. Following code works, but the problem is when I input minimum price or maximum price value, only parent categories comes up when content changed on the page.
How can I solve this unexpected behavior?
sidebar.blade.php
<div class="bg-white p-6 border border-border-white rounded-md hidden md:flex md:flex-col md:gap-6 md:max-w-[270px] h-fit">
<div>
<p class="capitalize font-semibold">type</p>
<ul class="mt-3 flex flex-col gap-1">
<li class="flex items-center gap-2">
<input type="radio" id="any" wire:model="type" class="accent-purple w-4 h-4" value="any" wire:click="type">
<label for="any" class="capitalize">any</label>
</li>
<li class="flex items-center gap-2">
<input type="radio" id="auction" wire:model="type" class="accent-purple w-4 h-4" value="auction" wire:click="type">
<label for="auction" class="capitalize">Auction</label>
</li>
<li class="flex items-center gap-2">
<input type="radio" id="classified" wire:model="type" class="accent-purple w-4 h-4" value="classified" wire:click="type">
<label for="classified" class="capitalize">classified</label>
</li>
selected {{$type}}
</ul>
</div>
<div>
enter code here
<p class="capitalize font-semibold">category</p>
<ul class="mt-3 flex flex-col gap-1">
<li class="flex items-center gap-2">
<input type="radio" id="any" wire:model="category" class="accent-purple w-4 h-4" wire:click="category" value="0">
<label for="any" class="capitalize">any</label>
</li>
@foreach ($categories as $category)
<li class="flex items-center gap-2">
<input type="radio" id="classified" wire:model="category" class="accent-purple w-4 h-4" wire:click="category" value="{{ $category->id}}">
<label for="classified" class="capitalize">{{ __($category->name) }}</label>
</li>
@if(!is_null($category->subcategories))
<ul class="mt-1 ml-5 flex flex-col gap-1">
@foreach ($category->subcategories as $subcategory)
<li class="flex items-center gap-2">
<input type="radio" id="apperal" wire:model="category" class="accent-purple w-4 h-4" wire:click="category" value="{{ $subcategory->id}}">
<label for="apperal" class="capitalize">{{ __($subcategory->name) }}</label>
</li>
@endforeach
</ul>
@endif
@endforeach
</ul>
</div>
<div>
<p class="capitalize font-semibold">price</p>
<input type="number" wire:model="min_price" wire:model.live="min_price" id="min_price" placeholder="Min Price" class="mt-3 w-full border border-border-white rounded-md p-4 focus:outline-none focus:border-purple">
@error('min_price')
<p class="text-sm mt-1 text-red-500">{{ $message}}</p>
@enderror
<input type="number" wire:model="max_price" wire:model.live="max_price" id="max_price" placeholder="Max Price" class="mt-1 w-full border border-border-white rounded-md p-4 focus:outline-none focus:border-purple">
</div>
</div>
Sidebar.php
<?php
namespace AppLivewireListings;
use LivewireComponent;
use AppModelsCategory;
use LivewireAttributesUrl;
use LivewireAttributesValidate;
class Sidebar extends Component
{
#[Url]
public $type = 'any';
#[Url]
public $category = 'any';
#[Url, Validate]
public $min_price = '';
#[Url]
public $max_price = '';
public $categories;
public function mount()
{
$this->categories = $this->getNestedCategories();
}
private function getNestedCategories($parentId = null)
{
$categories = Category::where('parent_id', $parentId)->get();
foreach ($categories as $category) {
$category->subcategories = $this->getNestedCategories($category->id);
}
return $categories;
}
public function rules()
{
return [
'min_price' => 'numeric|between:1,999999999',
'max_price' => 'numeric|between:1,999999999',
];
}
public function render()
{
return view('livewire.listings.sidebar', [
'categories' => $this->categories,
]);
}
}
Category.php
<?php
namespace AppModels;
use AppStatus;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
use IlluminateDatabaseEloquentRelationsBelongsTo;
use IlluminateDatabaseEloquentRelationsHasMany;
class Category extends Model
{
use HasFactory;
public function Listings(): HasMany
{
return $this->hasMany(Listing::class, 'category_id');
}
public function child(): HasMany
{
return $this->hasMany(Category::class, 'parent_id');
}
public function parent(): BelongsTo
{
return $this->belongsTo(Category::class, 'parent_id');
}
protected $casts = [
'is_active' => Status::class,
];
}