Pagination und Sortierung mit searchCriteria

247 Produkte auf einmal zu laden wäre weder schnell noch sinnvoll darstellbar – Zeit, searchCriteria richtig zu nutzen: Seiten blättern und nach Feldern sortieren.

Die wichtigsten searchCriteria-Parameter

searchCriteria[pageSize] – wie viele Produkte pro Seite (wir nutzen bereits Kapitel 7).
searchCriteria[currentPage] – welche Seite, beginnend bei 1 (NICHT 0!).
searchCriteria[sortOrders][0][field] – nach welchem Feld sortiert wird, z. B. name oder price.
searchCriteria[sortOrders][0][direction] – ASC oder DESC.

fetchProducts() um Pagination und Sortierung erweitern

src/api/magentoApi.js

const BASE_URL = import.meta.env.VITE_MAGENTO_BASE_URL;
const ACCESS_TOKEN = import.meta.env.VITE_MAGENTO_ACCESS_TOKEN;
const SEITENGROESSE = 12;

async function magentoFetch(path) {
  const response = await fetch(`${BASE_URL}${path}`, {
    headers: {
      Authorization: `Bearer ${ACCESS_TOKEN}`,
    },
  });

  if (!response.ok) {
    throw new Error(`Magento API Fehler: ${response.status}`);
  }

  return response.json();
}

export async function fetchProducts({ seite = 1, sortierFeld = 'name', richtung = 'ASC' } = {}) {
  const params = new URLSearchParams({
    'searchCriteria[pageSize]': SEITENGROESSE,
    'searchCriteria[currentPage]': seite,
    'searchCriteria[sortOrders][0][field]': sortierFeld,
    'searchCriteria[sortOrders][0][direction]': richtung,
  });

  const data = await magentoFetch(`/products?${params.toString()}`);
  return {
    produkte: data.items,
    gesamtAnzahl: data.total_count,
    seitenAnzahl: Math.ceil(data.total_count / SEITENGROESSE),
  };
}

URLSearchParams übernimmt die korrekte URL-Kodierung automatisch – deutlich weniger fehleranfällig als manuelles String-Zusammenbauen mit Template Literals.

components/Pagination.jsx

src/components/Pagination.jsx

function Pagination({ aktuelleSeite, seitenAnzahl, onSeiteWechseln }) {
  return (
    <div>
      <button
        onClick={() => onSeiteWechseln(aktuelleSeite - 1)}
        disabled={aktuelleSeite <= 1}
      >
        Zurück
      </button>
      <span>
        {' '}Seite {aktuelleSeite} von {seitenAnzahl}{' '}
      </span>
      <button
        onClick={() => onSeiteWechseln(aktuelleSeite + 1)}
        disabled={aktuelleSeite >= seitenAnzahl}
      >
        Weiter
      </button>
    </div>
  );
}

export default Pagination;

ProductListPage.jsx: Pagination integrieren

src/pages/ProductListPage.jsx

import { useEffect, useState } from 'react';
import { fetchProducts } from '../api/magentoApi';
import Pagination from '../components/Pagination';

function ProductListPage() {
  const [produkte, setProdukte] = useState([]);
  const [seitenAnzahl, setSeitenAnzahl] = useState(1);
  const [aktuelleSeite, setAktuelleSeite] = useState(1);
  const [ladend, setLadend] = useState(true);

  useEffect(() => {
    setLadend(true);
    async function laden() {
      const ergebnis = await fetchProducts({ seite: aktuelleSeite });
      setProdukte(ergebnis.produkte);
      setSeitenAnzahl(ergebnis.seitenAnzahl);
      setLadend(false);
    }
    laden();
  }, [aktuelleSeite]);

  if (ladend) {
    return <p>Lade Produkte...</p>;
  }

  return (
    <div>
      <h1>Produkte</h1>
      <ul>
        {produkte.map((produkt) => (
          <li key={produkt.sku}>
            {produkt.name} — {produkt.price} €
          </li>
        ))}
      </ul>
      <Pagination
        aktuelleSeite={aktuelleSeite}
        seitenAnzahl={seitenAnzahl}
        onSeiteWechseln={setAktuelleSeite}
      />
    </div>
  );
}

export default ProductListPage;

[aktuelleSeite] als Abhängigkeit des useEffect sorgt dafür, dass beim Seitenwechsel automatisch neu geladen wird – GENAU dasselbe Muster wie bei [sku] in "React für Einsteiger" Kapitel 22.

Tipp: Testen Sie: Hat Ihr Shop mehr als 12 Produkte, sollten "Weiter"/"Zurück" jetzt TATSÄCHLICH unterschiedliche Produkte laden – ein guter Moment, um in Ihrem Magento-Admin nachzuschauen, ob die angezeigte Reihenfolge mit sortierFeld: 'name' übereinstimmt.