---
title: "Optimizimi i filtrit të produkteve me Livewire"
description: "Mësoni si të optimizoni filtrin e produkteve me Livewire në Laravel: pagination, tregues ngarkimi wire:loading dhe optimizim i query-ve Eloquent."
url: "https://sajdoko.al/blog/optimizimi-dhe-zgjerimi-i-filtrit-te-produkteve-me-livewire/"
language: "sq"
content_signal: "ai-train=no, search=yes, ai-input=yes"
---
# Optimizimi dhe Zgjerimi i Filtrit të Produkteve me Livewire – Pjesa 4

 18 Nëntor 2024·5 minuta lexim·[Development](https://sajdoko.al/blog/category/development-sq/)     

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](https://sajdoko.al/blog/permiresimi-i-filtrit-te-produkteve-me-livewire-vecori-te-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 AppHttpLivewire;

use LivewireComponent;
use LivewireWithPagination; // Importoni trajtën
use AppModelsProduct;

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 AppHttpLivewire;

use LivewireComponent;
use LivewireWithPagination;
use AppModelsProduct;

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ë.

  

- [Development](https://sajdoko.al/blog/category/development-sq/)
- [Laravel](https://sajdoko.al/blog/category/laravel-sq/)

   

## Keni një projekt në mendje?

 

Na shkruani dhe përgjigjemi me një vlerësim konkret brenda një dite pune.

  [Kontakto →](https://sajdoko.al/kontakt/)     

## Lini një koment [Anulo](https://sajdoko.al/blog/optimizimi-dhe-zgjerimi-i-filtrit-te-produkteve-me-livewire/?format=markdown#respond)

      

## Postime Së Fundi

- [Softuer për menaxhimin e flotës: çfarë ju duhet përveç GPS-it?](https://sajdoko.al/blog/softuer-menaxhimi-flotes-pervec-gps/)
- [CRM me porosi apo platformë standarde SaaS: Llogaritja e kostove dhe efikasitetit për biznesin](https://sajdoko.al/blog/crm-me-porosi-apo-platforma-standarde-per-biznesin/)
- [Zhvillimi software nearshore në Shqipëri: Pse kompanitë evropiane po zgjedhin inxhinierët shqiptarë](https://sajdoko.al/blog/zhvillimi-software-nearshore-ne-shqiperi-avantazhet-e-tregut/)
- [Integrimi i pagesave me kartë në Shqipëri (2026): krahasimi i bankave, komisionet dhe si funksionon teknikisht](https://sajdoko.al/blog/pagesa-online-me-karte-shqiperi/)
- [Optimizimi i arkëtimit dhe performancës në WooCommerce: Si të eliminoni vonesat gjatë blerjes](https://sajdoko.al/blog/optimizimi-i-checkout-dhe-ngarkeses-ne-woocommerce/)

## Komente Së Fundi

S’ka komente për shfaqje.