Optimizimi dhe Zgjerimi i Filtrit të Produkteve me Livewire – Pjesa 4

Në këtë pjesë të fundit do të shtojmë ndarjen në faqe, treguesit e ngarkimit dhe animacionet. Më pas do të kontrollojmë query-t dhe reagimin ndaj ndryshimeve në filtra.

Pjesa 3: Përmirësimi i Filtrit të Produkteve me Livewire: Veçori të Avancuara

Çfarë Do Të Mësojmë

• Implementimi i pagination për performancë më të mirë.
• Optimizimi i query-ve Eloquent për filtrimin e produkteve.
• Implementimi i treguesve të ngarkimit për feedback më të mirë.
• Debounce në inputet e përdoruesit për të reduktuar përditësimet e panevojshme.

Shtimi i Pagination

Për aplikacione me shumë produkte, pagination është thelbësore. Livewire e bën të thjeshtë shtimin e pagination me konfigurime minimale.

Përditësimi i Klasës së Komponentit

Modifikoni klasën ProductFilter për të përdorur pagination. Shtoni trajtën WithPagination:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination; // Importoni trajtën
use App\Models\Product;

class ProductFilter extends Component {
    use WithPagination; // Përdorni trajtën

    public $category = '';
    public $availability = '';
    public $minPrice = 0;
    public $maxPrice = 10000;

    public function clearFilters() {
        $this->category = '';
        $this->availability = '';
        $this->minPrice = 0;
        $this->maxPrice = 10000;
    }

    public function render() {
        $products = Product::query()
            ->when($this->category, function ($query) {
                $query->where('category', $this->category);
            })
            ->when($this->availability, function ($query) {
                $query->where('available', $this->availability === 'available');
            })
            ->when($this->minPrice, function ($query) {
                $query->where('price', '>=', $this->minPrice);
            })
            ->when($this->maxPrice, function ($query) {
                $query->where('price', '<=', $this->maxPrice);
            })
            ->paginate(9); // Paginoni rezultatet

        return view('livewire.product-filter', ['products' => $products]);
    }

    public function updating($property) {
        $this->resetPage(); // Rivendosni në faqen 1 kur një filtër përditësohet
    }
}

Trajta WithPagination menaxhon logjikën e pagination. Metoda resetPage() siguron që komponenti të rivendoset në faqen e parë kur përditësohen filtrat.

Përditësimi i Shabllonit Blade

Shtoni kontrollet e pagination te skedari product-filter.blade.php:

<div>
    <!-- Filtrat (mbeten të njëjtat) -->

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach ($products as $product)
            <div class="bg-gray-100 border rounded p-4 text-center">
                <h3 class="font-bold">{{ $product->name }}</h3>
                <p>Kategoria: {{ $product->category }}</p>
                <p>Çmimi: ${{ number_format($product->price, 2) }}</p>
                <p>Statusi: {{ $product->available ? 'Disponueshme' : 'Jo Disponueshme' }}</p>
            </div>
        @endforeach
    </div>

    <!-- Kontrollet e Pagination -->
    <div class="mt-6">
        {{ $products->links() }} <!-- Shfaqni linket e pagination -->
    </div>
</div>

Implementimi i Treguesve të Ngarkimit

Për t’u dhënë përdoruesve feedback ndërsa produktet ngarkohen, Livewire ofron direktivën wire:loading. Shtoni një tregues ngarkimi te shablloni:

<div wire:loading wire:target="category, availability, minPrice, maxPrice"
    class="text-center text-blue-500 font-semibold">
    Po ngarkohen produktet...
</div>

Optimizimi i Query-ve Eloquent

Query-t e optimizuara janë baza e një aplikacioni të performuar mirë. Le të rishikojmë komponentin ProductFilter për të siguruar që query-t janë sa më efikase.

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Product;

class ProductFilter extends Component {
    use WithPagination;

    public $category = '';
    public $availability = '';
    public $minPrice = 0;
    public $maxPrice = 10000;

    public function render() {
        $products = Product::query()
            ->when($this->category, fn ($query) => $query->where('category', $this->category))
            ->when($this->availability, fn ($query) => $query->where('available', $this->availability === 'available'))
            ->when($this->minPrice, fn ($query) => $query->where('price', '>=', $this->minPrice))
            ->when($this->maxPrice, fn ($query) => $query->where('price', '<=', $this->maxPrice))
            ->orderBy('created_at', 'desc')
            ->paginate(9);

        return view('livewire.product-filter', compact('products'));
    }
}

Debounce në Inputet e Përdoruesit

Për fushat si minPrice dhe maxPrice, përdorni modifier-in debounce për të vonuar përditësimet derisa përdoruesi të ndalojë së shkruari:

<input type="number" wire:model.change.debounce.500ms.number="minPrice" placeholder="Çmimi Minimal" class="border rounded p-2 w-24" />
<input type="number" wire:model.change.debounce.500ms.number="maxPrice" placeholder="Çmimi Maksimal" class="border rounded p-2 w-24" />

Testimi i Optimizimeve

Për të testuar optimizimet e performancës:

• Mbushni databazën me një numër të madh produktesh.
• Shkoni te faqja /products.
• Testoni secilën opsion filtri dhe sigurohuni që rezultatet janë të shpejta dhe të sakta.
• Verifikoni që pagination funksionon pa probleme dhe përditëson rezultatet në mënyrë dinamike.

Në Përfundim

Filtri tani përfshin ndarjen në faqe dhe debounce për inputet. Testojeni me një katalog më të madh dhe kontrolloni query-t që krijohen kur ndryshojnë filtrat.

Ndani progresin tuaj ose pyesni për çdo paqartësi në komentet më poshtë.