Ajax-Filterung

Alle Shoporama-Shops haben einen integrierten /ajax-Endpunkt, der Produkte im JSON-Format zurückgibt. Dadurch ist es möglich, dynamische Filter, Lazy Loading und Infinite Scroll ohne Neuladen der Seite zu erstellen, was dem Kunden ein schnelles und modernes Erlebnis bietet.

Dieser Artikel richtet sich in erster Linie an Entwickler und diejenigen, die ihr eigenes Theme erstellen oder anpassen. Wenn Sie das Delaware-Theme verwenden, steht Ihnen die Ajax-Filterung bereits von Haus aus zur Verfügung und Sie müssen den Endpunkt nicht selbst aufrufen.

Wie man den Endpunkt aufruft

Ein einfacher Aufruf, der Produkte aus einer oder mehreren Kategorien abruft:

fetch('/ajax?categories=123&limit=24') .then(response => response.json()) .then(products => { products.forEach(p => console.log(p.name, p.price))); });

Standardmäßig gibt der Endpunkt ein JSON-Array mit Produkten zurück. Wenn Sie Metadaten und Paginierung einschließen möchten, fügen Sie include_meta=1 und include_pagination=1 hinzu. Sie erhalten dann stattdessen ein Objekt mit Produkten, Metadaten und Paginierung.

Verfügbare Parameter

Mehrere der Parameter nehmen durch Pipes getrennte Werte an, so dass Sie nach mehreren Dingen gleichzeitig filtern können. Zum Beispiel: categories=12|34|56.

Beispiel: Kategorie, Preisspanne und Farbe

Abrufen von roten Produkten zwischen 100 und 500 Kr. aus zwei Kategorien, sortiert nach Preis aufsteigend:

const params = new URLSearchParams({ categories: '12|34', price_range: '100|500', attribute_tags: 'red', sort: 'price', sort_order: 'asc', limit: 24 }); fetch('/ajax?' + params) .then(r => r.json()) .then(products => renderProducts(products));

Beispiel: Mit zusätzlichen Feldern filtern und Metadaten erhalten

Erweiterungsfelder werden mit der ID des Erweiterungsfeldes in Klammern angegeben. Sie finden die ID unter Einstellungen → Erweiterte Felder im Admin. Beispiel: Erweiterungsfeld 5 (z.B. "Material") sollte entweder "Baumwolle" oder "Leinen" sein:

// extension[5]=cotton|linen fetch('/ajax?categories=12&extension[5]=' + encodeURIComponent('cotton|linen') + '&include_meta=1&include_pagination=1&limit=24') .then(r => r.json()) .then(data => { console.log(data.products); console.log(data.meta.attributes); console.log(data.pagination); });

Felder für jedes Produkt in der Antwort

Jedes Produkt im Array products hat unter anderem die folgenden Felder:

• product_id, own_id, name, description, list_description
• Preis, real_price, sale_price, price_dk (Dänisch formatiert)
• stock, attr_stock, variant_stock, stock_string_de
• marke_name, lieferanten_id, lieferanten_name, profil_name
• kategorie_id, kategorie_name
• thumbnail (200x200 fit), thumbnails (Array mit allen Bildern in 200x200), url
• avg_rating, online_since, delivery_time, delivery_time_not_in_stock, approx_shipping
• hat_Kampagnen, kampagnen_info
• meta_values (nur ausgefüllt, wenn Sie meta=... senden)

Wenn der Händler die Option "Lagerbestand über Ajax ausblenden" aktiviert hat, werden Lagerbestand, attr_stock und Lagermengen in variant_stock auf Null gesetzt, so dass die Lagerbestandszahlen nicht an die Öffentlichkeit gelangen.

Zwischenspeicherung

Der Endpunkt wird auf dem Server für 12 Stunden pro eindeutiger URL zwischengespeichert. Die Antwort wird außerdem mit den richtigen Last-Modified- und Expires-Headern gesendet, so dass Browser und Zwischenspeicher eine schnelle 304 Not Modified zurückgeben können, wenn der Inhalt unverändert ist. Dies sorgt für kurze Antwortzeiten, bedeutet aber auch, dass Änderungen an einem Produkt erst dann wirksam werden, wenn der Cache abgelaufen ist. Sie können einen Cache-Neubau für eine bestimmte URL erzwingen, indem Sie rebuild=1 hinzufügen.

Lesen Sie mehr im Artikel Cache in Shoporama, der sich mit den Cache-Ebenen im Allgemeinen beschäftigt.

Implementierung in Ihr Theme

Um eine komplette ajax-gefilterte Produktliste zu erstellen, muss der Entwickler normalerweise

1. Die Filter-UI mit Checkboxen oder Dropdowns basierend auf meta.attributes, meta.brands und meta.categories erstellen
2. auf Änderungen in den Filtern achten und sie in einen Abfrage-String kompilieren
3. Aufruf von /ajax mit den ausgewählten Parametern
4. Dynamische Aktualisierung der Produktliste und Anzeige der Paginierung auf der Grundlage von pagination.total

Häufig gestellte Fragen

Wo finde ich die ID eines zusätzlichen Feldes oder Attributwertes?

Im Admin unter Einstellungen → Erweiterte Felder für Extrafelder und unter Einstellungen → Profile für Attributwerte. Die IDs erscheinen in der Liste oder in der URL, wenn Sie ein Feld bearbeiten.

Warum erhalte ich keine Ergebnisse, wenn ich category_id=123 verwende?

Weil der Parameter nicht existiert. Ändern Sie ihn in categories=123 (Plural). Dies ist einer der häufigsten Fehler, wenn Sie zum ersten Mal eine Ajax-Filterung erstellen. Überprüfen Sie auch, dass Sie nicht price_from/price_to oder extra_field[...] verwenden, die ebenfalls nicht existieren.

Meine Änderungen an einem Produkt werden in /ajax nicht angezeigt. Was sollte ich tun?

Der Endpunkt wird für 12 Stunden zwischengespeichert. Warten Sie, oder rufen Sie die URL mit &rebuild=1 ab, um eine neue Generierung dieser bestimmten URL zu erzwingen.

Wirken sich viele Ajax-Aufrufe auf die Geschwindigkeit meiner Website aus? (Mikkel, Entwickler)

Der Cache sorgt dafür, dass wiederholte Aufrufe schnell sind. Achten Sie jedoch darauf, dass Sie nicht für jeden Tastendruck in einem Suchfeld einen neuen Aufruf machen. Verwenden Sie "debounce", damit Sie nur dann aufrufen, wenn der Benutzer 200-300 ms pausiert. Der Browser verwendet auch If-Modified-Since, so dass unveränderte Antworten als 304 kommen und fast keine Bandbreite verwendet wird.

Bekomme ich das gleiche Ergebnis wie auf der Kategorieseite?

Ziemlich genau. /ajax beachtet die gleichen Regeln, die ProductFactory auf Kategorieseiten verwendet, so dass sich Filterung, Sortierung und Sichtbarkeit (z. B. versteckte Produkte) gleich verhalten.

Kann ich eine Suche über /ajax durchführen? (Sofie, neue Mitarbeiterin)

/ajax akzeptiert keine Freitext-Suchparameter. Verwenden Sie für die Suche Shoporamas speziellen Such-Endpunkt im Thema (typischerweise /search) oder filtern Sie nach product_ids, wenn Sie die Suche selbst durchführen und nur Daten über eine bekannte Produktliste abrufen möchten.

Wie viele Produkte kann ich mit einem einzigen Aufruf abrufen? (Jonas, Skala)

Es gibt keine feste Grenze im Code, aber um die JSON-Nutzlast klein und die Antwort schnell zu halten, sollten Sie die Zahl auf ein paar hundert pro Aufruf beschränken. Verwenden Sie Limit und Offset auf die Seitenzahl, oder holen Sie den nächsten Stapel nur, wenn der Benutzer scrollt.

Werden die Lagerbestände meiner Kunden öffentlich zugänglich sein? (Malene, Marketing)

Grundsätzlich enthält die Antwort den Lagerbestand. Wenn Sie sie ausblenden möchten (damit Konkurrenten oder Roboter nicht sehen können, wie viel Sie auf Lager haben), kann Ihr Entwickler die Option "Lagerbestand über Ajax ausblenden" im Webshop aktivieren, woraufhin die Bestandsfelder als Null gesendet werden.

Kann ich /ajax als eine "echte" REST-API verwenden? (Mikkel, Entwickler)

Nein, es ist ein öffentlicher, cache-freundlicher Produkt-Endpunkt für die Front-End-Nutzung. Wenn Sie auf einer tieferen Ebene erstellen, aktualisieren oder integrieren müssen, verwenden Sie stattdessen die eigentliche REST-API, für die ein API-Schlüssel erforderlich ist.

Sollte ich mir Sorgen machen, dass die Filterung für Kunden in verschiedenen Sprachen unterschiedlich funktioniert?

Der Endpunkt läuft im gleichen Webshop-Kontext wie die Startseite, so dass Preise, Währung und Sichtbarkeit dem Webshop folgen, den der Aufruf umrahmt. Wenn Sie mehrere Webshops oder Sprachen haben, denken Sie daran, dass jeder Webshop seine eigene URL und damit seinen eigenen /ajax-Cache hat.

Möchten Sie, dass wir Ihnen helfen, die Ajax-Filterung in Ihr Thema einzubauen, oder haben Sie technische Fragen? Schreiben Sie an support@shoporama.dk.