---
title: "Logjika bazë e një filtri produktesh me Livewire"
description: "Ndërtimi i logjikës bazë të filtrit të produkteve me Livewire dhe Laravel: layout-i, komponentët, rrugëzimi dhe shablloni Blade me Tailwind CSS."
url: "https://sajdoko.al/blog/ndertimi-i-logjikes-baze-te-nje-filtri-produktesh-me-livewire/"
language: "sq"
content_signal: "ai-train=no, search=yes, ai-input=yes"
---
# Ndërtimi i Logjikës Bazë të një Filtri Produktesh me Livewire – Pjesa 2

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

Në këtë pjesë do të krijojmë route-in, strukturën e përbashkët dhe ndërfaqen e filtrimit të produkteve. Do të përdorim Livewire për përditësimet e filtrave dhe TailwindCSS për stilimin.

 

**Pjesa 1:** [Krijimi i një Sistemi Filtrimi Produktesh në Kohë Reale me Livewire në Laravel](https://sajdoko.al/blog/krijimi-i-nje-sistemi-filtrimi-produktesh-ne-kohe-reale-me-livewire-ne-laravel/)

 

## Konfigurimi i Layout-it të Aplikacionit

 

Përpara se të kalojmë te komponenti i filtrimit, le të krijojmë një strukturë të përbashkët për aplikacionin tonë. Kjo do të na ndihmojë të ripërdorim të njëjtën strukturë në të gjitha faqet. Laravel vjen me TailwindCSS të përfshirë, kështu që do ta përdorim atë për stilim.

 

Krijoni një skedar të ri për layout në `resources/views/layouts/app.blade.php`:

 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Filtering</title>
    @vite('resources/css/app.css')
    @livewireStyles
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <header class="mb-6">
            <h1 class="text-3xl font-bold text-center">Aplikacioni për Filtrimin e Produkteve</h1>
        </header>
        <main>
            @yield('content')
        </main>
    </div>
    @livewireScripts
</body>
</html>
```

  

Kjo strukturë përfshin TailwindCSS për stilim dhe shton seksione për stilimet dhe skriptet e Livewire. Gjithashtu, përcakton një direktivë `@yield('content')` për të injektuar përmbajtje specifike të faqeve.

 

## Instalimi i Varësive dhe Ndërtimi i Aseteve me Vite

 

Para se të ekzekutojmë aplikacionin, duhet të instalojmë dhe ndërtojmë asetet e frontend-it. Laravel përdor Vite për menaxhimin e skedarëve CSS dhe JavaScript, prandaj është e rëndësishme të sigurohemi që këto janë të konfiguruara si duhet.

 

- Ekzekutoni komandën e mëposhtme për të instaluar varësitë e nevojshme Node.js:

 

```
npm install
```

 

- Pasi instalimi të përfundojë, ndërtoni asetet duke ekzekutuar:

 

```
npm run build
```

 

- Alternativisht, nëse jeni në modalitet zhvillimi dhe dëshironi HMR (Hot Module Replacement), ekzekutoni:

 

```
npm run dev
```

  

Procesi i ndërtimit gjeneron asetet e nevojshme në direktorinë `public/build`, duke përfshirë skedarin manifest të Vite që Laravel përdor për të ngarkuar skedarët CSS dhe JavaScript.

 

## Krijimi i Pamjes për Produktet

 

Më pas, krijoni një view Blade për faqen e produkteve në `resources/views/products.blade.php`. Kjo view do të zgjerojë layout-in dhe do të përfshijë komponentin Livewire `ProductFilter`:

 

```
@extends('layouts.app')

@section('content')
    <div class="bg-white shadow rounded p-4">
        <h2 class="text-xl font-semibold mb-4">Shfleto Produktet</h2>
        @livewire('product-filter')
    </div>
@endsection
```

  

## Përcaktimi i Route-ve

 

Për të parë pamjen e produkteve, përcaktoni një route në `routes/web.php`:

 

```
Route::get('/products', function () {
    return view('products');
})->name('products.index');
```

 

Kjo route do të shfaqë pamjen `products` kur përdoruesit vizitojnë `/products`.

 

## Konfigurimi i Komponentit ProductFilter

 

Hapni `app/Http/Livewire/ProductFilter.php` dhe azhornoni atë si më poshtë:

 

```
<?php

namespace AppHttpLivewire;

use LivewireComponent;
use AppModelsProduct;

class ProductFilter extends Component
{
    public $category = '';
    public $availability = '';

    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');
            })
            ->get();

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

  

## Dizajnimi i Shabllonit ProductFilter

 

Tani, dizajnoni shabllonin e komponentit Livewire për të shfaqur listën e produkteve dhe opsionet e filtrimit. Hapni `resources/views/livewire/product-filter.blade.php` dhe shtoni kodin e mëposhtëm:

 

```
<div>
    <!-- Filtrat -->
    <div class="flex gap-4 mb-6">
        <select wire:model="category" class="border rounded p-2">
            <option value="">Të Gjitha Kategoritë</option>
            <option value="electronics">Elektronikë</option>
            <option value="fashion">Moda</option>
            <option value="home">Shtëpi</option>
        </select>

        <select wire:model="availability" class="border rounded p-2">
            <option value="">Të Gjitha Disponueshmëritë</option>
            <option value="available">Disponueshme</option>
            <option value="unavailable">Jo Disponueshme</option>
        </select>
    </div>

    <!-- Produktet -->
    <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>
</div>
```

  

## Testimi i Aplikacionit

 

Startoni serverin e zhvillimit Laravel:

 

```
php artisan serve
```

 

Vizitoni [http://localhost:8000/products](http://localhost:8000/products). Ju duhet të shihni një faqe të stiluar me filtra dhe një rrjet produktesh që përditësohen në mënyrë dinamike bazuar në zgjedhjet tuaja.

  

## Hapat e Radhës

 

Route-i, struktura e aplikacionit dhe filtri bazë janë gati. Më pas do të shtojmë filtrimin sipas çmimit dhe debounce për inputet.

 

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

 

**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/)

  

- [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/ndertimi-i-logjikes-baze-te-nje-filtri-produktesh-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.