Produktfilter mit JavaScript und PHP für deinen E-Commerce-Shop

HTML-Grundstruktur für Filter und Produktliste

<form id="filter-form">
<label>
	Kategorie:
	<select name="category">
		<option value="">Alle</option>
		<option value="shirts">Shirts</option>
		<option value="hosen">Hosen</option>
	</select>
</label>
<label>
	Preis:
	<select name="price">
		<option value="">Alle</option>
		<option value="low">Unter 50€</option>
		<option value="medium">50–100€</option>
		<option value="high">Über 100€</option>
	</select>
</label>
</form>

<div id="product-list"></div>

Wir starten mit einer einfachen HTML-Struktur, bestehend aus einem Formular zur Filterung und einem Container für die Produktliste.

AJAX-Request bei Filteränderung

Das Formular löst bei jeder Änderung einen AJAX-Request aus, um die Produktliste zu aktualisieren.

document.getElementById("filter-form").addEventListener("change", function () {
	const formData = new FormData(this);
	
	fetch("get_products.php", {
		method: "POST",
		body: formData
	})
	.then(response => response.text())
	.then(html => {
		document.getElementById("product-list").innerHTML = html;
	})
	.catch(err => console.error("Fehler beim Laden der Produkte:", err));
});

Mit dieser JavaScript-Funktion holen wir bei jeder Filteränderung neue Produktdaten vom Server. Die Ergebnisse werden direkt auf der Seite angezeigt.

Serverseitige Verarbeitung in PHP

Der Server filtert Produkte je nach Anfrageparameter und gibt HTML zurück.

<?php
	$category = $_POST['category'] ?? '';
	$price = $_POST['price'] ?? '';

	$products = [
		["name" => "Blaues Shirt", "category" => "shirts", "price" => 29],
		["name" => "Schwarze Hose", "category" => "hosen", "price" => 89],
		["name" => "Designer-Shirt", "category" => "shirts", "price" => 120],
	];

	$filtered = array_filter($products, function ($product) use ($category, $price) {
		if ($category && $product['category'] !== $category) return false;
		
		if ($price === 'low' && $product['price'] >= 50) return false;
		if ($price === 'medium' && ($product['price'] < 50 || $product['price'] > 100)) return false;
		if ($price === 'high' && $product['price'] <= 100) return false;
		
		return true;
	});

	foreach ($filtered as $item) {
		echo "<div class='product'>{$item['name']} – {$item['price']}€</div>";
	}

Die Datei get_products.php wertet die POST-Daten aus, filtert die Produktliste und gibt sie als HTML zurück.

Verbesserung der Performance durch Debouncing

let debounceTimer;
document.getElementById("filter-form").addEventListener("change", function () {
	clearTimeout(debounceTimer);
	debounceTimer = setTimeout(() => {
		const formData = new FormData(this);
		fetch("get_products.php", {
			method: "POST",
			body: formData
		})
		.then(response => response.text())
		.then(html => {
			document.getElementById("product-list").innerHTML = html;
		});
	}, 300);
});

Mit Debouncing vermeiden wir zu viele schnelle Requests bei mehreren schnellen Änderungen.

Fazit: Dynamische Produktfilter verbessern UX und Conversion

Ein dynamischer Produktfilter sorgt für bessere Benutzerführung und höhere Conversion-Raten. Mit JavaScript und PHP lässt sich ein performantes und leicht anpassbares Filtersystem für jeden E-Commerce-Shop realisieren.