Last active
June 27, 2024 07:59
-
-
Save Log1x/d45d69fe3b943768457fb3e9945416e5 to your computer and use it in GitHub Desktop.
Post Search component example using Acorn v4 and Livewire 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@extends('layouts.app') | |
@section('content') | |
<x-hero title="Welcome to Sage" /> | |
<x-container> | |
<livewire:post-search lazy /> | |
</x-container> | |
@endsection |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<input | |
wire:model.live="search" | |
type="text" | |
placeholder="Search for a post..." | |
class="w-full p-3 text-lg border border-gray-300 rounded" | |
> | |
@empty($posts) | |
<div class="mt-4"> | |
No posts found. | |
</div> | |
@endempty | |
@if ($posts) | |
<div class="mt-4"> | |
Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total{{ $search ? " for {$search}." : '.' }} | |
</div> | |
<ul class="mt-4 space-y-2"> | |
@foreach ($posts as $post) | |
<li> | |
<a href="{{ $post['url'] }}" class="text-lg text-blue-500 hover:text-blue-600"> | |
{{ $post['title'] }} | |
</a> | |
</li> | |
@endforeach | |
</ul> | |
@if ($hasPrevious || $hasNext) | |
<div class="flex justify-between mt-4"> | |
@if ($hasPrevious) | |
<button | |
wire:click="previousPage" | |
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600" | |
> | |
← Previous | |
</button> | |
@endif | |
@if ($hasNext) | |
<button | |
wire:click="nextPage" | |
class="px-4 py-2 mt-4 ml-auto text-white bg-blue-500 rounded hover:bg-blue-600" | |
> | |
Next → | |
</button> | |
@endif | |
</div> | |
@endif | |
@endif | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App\Livewire; | |
use Livewire\Attributes\Url; | |
use Livewire\Component; | |
use WP_Query; | |
class PostSearch extends Component | |
{ | |
/** | |
* The posts. | |
*/ | |
public array $posts = []; | |
/** | |
* The WordPress query. | |
*/ | |
protected ?WP_Query $query; | |
/** | |
* The post range. | |
*/ | |
public string $range = ''; | |
/** | |
* The search query. | |
*/ | |
#[Url('query')] | |
public string $search = ''; | |
/** | |
* The page. | |
*/ | |
#[Url] | |
public int $page = 1; | |
/** | |
* The total posts. | |
*/ | |
public int $totalPosts = 0; | |
/** | |
* The total pages. | |
*/ | |
public int $totalPages = 1; | |
/** | |
* The amount of posts to show per page. | |
*/ | |
protected int $amount = 5; | |
/** | |
* Render the component. | |
* | |
* @return \Illuminate\View\View | |
*/ | |
public function render() | |
{ | |
$this->query = new WP_Query([ | |
'post_type' => 'post', | |
'post_status' => 'publish', | |
'paged' => $this->page, | |
'posts_per_page' => $this->amount, | |
's' => $this->search, | |
]); | |
$this->totalPages = $this->query->max_num_pages ?? 1; | |
$this->totalPosts = $this->query->found_posts ?? 0; | |
$this->page = min(max(1, $this->page), $this->totalPages); | |
$start = ($this->page - 1) * $this->amount + 1; | |
$end = min($this->totalPosts, $this->page * $this->amount); | |
$this->range = "{$start}-{$end}"; | |
$this->posts = $this->query ? collect($this->query->posts) | |
->map(fn ($post) => [ | |
'title' => get_the_title($post), | |
'url' => get_permalink($post), | |
])->all() : []; | |
return view('livewire.post-search', [ | |
'hasPrevious' => $this->page > 1, | |
'hasNext' => $this->page < $this->totalPages, | |
]); | |
} | |
/** | |
* Go to the next page. | |
*/ | |
public function nextPage() | |
{ | |
$this->page = min($this->totalPages, $this->page + 1); | |
} | |
/** | |
* Go to the previous page. | |
*/ | |
public function previousPage() | |
{ | |
$this->page = max(1, $this->page - 1); | |
} | |
} |
I messed around a little bit inside of custom metaboxes inside of /wp-admin/ but not with the actual editor.
This is amazing.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This i very nice, compact and clean. Well done sir! 🥇
Have you tried livewire with gutenberg and if so, do they play nice?