Category Page
Schieberegler #
Kategorieseiten werden verwendet, wenn ein Kunde nach einer bestimmten Art von Produkt sucht, aber nicht nach einem bestimmten Produkt wie T-Shirts, Sofas oder Laufschuhen. Hätte er ein bestimmtes Produkt im Sinn, hätte er höchstwahrscheinlich zuerst über die Suchfunktion danach gesucht.
Kategorien haben in der Regel viele Produkte, so dass es schwierig sein kann, sich in ihnen zurechtzufinden, aber viele Kunden suchen nach denselben wenigen Produkten in den Kategorien. Diese ausgewählten Produkte sind in der Regel für jeden Kunden gleich, so dass es sich dabei wahrscheinlich um die meistverkauften Produkte handelt. Das liegt daran, dass die Bestseller dem Kunden ein Gefühl der Sicherheit vermitteln - wenn das Produkt bei anderen beliebt war, ist das ein Beweis für seinen Wert.
Indem Sie diese Artikel oben auf der Kategorieseite als eine Gruppe von Empfehlungen platzieren, erleichtern Sie Ihren Kunden die Navigation. Es ist wahrscheinlich, dass diese Produkte das Interesse neuer Kunden wecken und somit die Chancen auf eine Konversion erhöhen.
Vollständige Kategorieseite #
Clerk kann verwendet werden, um alle Ergebnisse auf einer Kategorieseite darzustellen, was eine intelligente Sortierung der Ergebnisse ermöglicht und mit Merchandising ein hohes Maß an Kontrolle darüber bietet, welche Produkte vorrangig behandelt werden.
Dieser Artikel beschreibt die Verwendung unserer API und der Clerk.js-Bibliothek als zwei verschiedene Möglichkeiten, dieses Rendering durchzuführen.
API-Endpunkte #
Unsere Endpunkte für Kategorieempfehlungen funktionieren genauso wie unser Endpunkt für die Suchseite. Der einzige Unterschied besteht darin, dass sich diese Endpunkte auf eine Kategorie-ID und nicht auf eine Suchanfrage stützen.
Aus diesem Grund können sie zum Rendern aller Produkte auf Kategorieseiten verwendet werden, indem die vorhandene Webshop-Logik zum Abrufen von Produkten durch Clerks API ersetzt wird. Wenn Sie eine serverseitige API-Einrichtung verwenden, können Sie in der Regel das bestehende Styling beibehalten, indem Sie einfach die Produktdaten von Clerk abrufen, während Sie die visuellen Elemente durch den Webshop-Code rendern.
Dies sind die beiden verfügbaren Endpunkte:
- recommendations/category/popular
(Rangfolge der meistverkauften Artikel - ändert sich gelegentlich) - recommendations/category/trending
(Sortiert nach Produkten, die sich im Trend befinden - ändert sich häufig)
Welcher Endpunkt am besten geeignet ist, hängt von der Art des Unternehmens ab.
Viele Modegeschäfte mit häufig wechselndem Bestand nutzen in der Regel die neuesten Produkte am besten aus. Geschäfte mit Katalogen, in denen die Kunden dazu neigen, dieselben Artikel mehrmals zu kaufen, wie z. B. bei Nahrungsergänzungsmitteln oder Lebensmittelläden, sollten in der Regel Bestseller verwenden.
API-Endpunkt-Parameter #
Hier eine Aufschlüsselung, was die einzelnen Argumente beim Aufruf eines Kategorie-Endpunkts bewirken
- Schlüssel": Der öffentliche Schlüssel für den Shop
Limit: Die Anzahl der Produkte, die zurückgegeben werden sollenKategorie: Die ID der aktuell durchsuchten Kategorie- Offset": Der Index, bei dem die Ergebnismenge beginnen soll. Wird zusammen mit
limitfür die Paginierung verwendet. orderby: Ein Attribut, nach dem die Ergebnisse sortiert werden. Wenn nicht gesendet, wird Clerk nach den meistverkauften Artikeln sortieren.- Ordnung": Kann entweder
ascoderdescsein. Sortiert die Produkte in aufsteigender oder absteigender Reihenfolge - Attribute": Eine Liste von Attributen, die Clerk zurückgeben soll. Nützlich für schnelle Setups, bei denen alle Produktdaten von Clerk zurückgegeben werden. Wenn nicht gesetzt, gibt Clerk nur die Produkt-IDs zurück
- Filter": Eine Zeichenkette, die Clerk so konfiguriert, dass nur eine Teilmenge von Produkten zurückgegeben wird. Wird zusammen mit vorhandenen Filtern auf der Seite oder Clerks “Facetten” verwendet, um Kunden die Möglichkeit zu geben, die Ergebnisse einzugrenzen.
- Facetten": Eine Liste von Attributen, die als Produktoptionen zurückgegeben werden, die dann in einen Filter umgewandelt werden können, wenn ein Besucher sie auswählt
- Bezeichnungen": Die mit der Kategorieseite verbundene(n) Bezeichnung(en). Wird für die Identifizierung der Leistung in my.clerk.io verwendet
Besucher: Die Besucher-ID des aktuellen Besuchers, der die Seite besucht
Filterung der Ergebnisse #
- Wenn Sie
facetsin der Anfrage angeben, gibt Clerk eine Liste der möglichen Filteroptionen für diese Ergebnismenge zurück. Wenn z.B. das billigste Produkt in der Kategorie €10 und das teuerste €500 ist, könnte der niedrigste Preisbereich €10-50 sein und der höchste €450+ oder ähnlich. Eine Kategorie könnte 10 verschiedene Marken haben und eine andere nur 3 in den Facetten. - Wenn ein Besucher eine Option auswählt, sollte diese in einen Filter umgewandelt werden, der beim nächsten API-Aufruf gesendet wird. Z.B.
filter='(Preis > 10 und Preis < 100) und Marke="Swarovski"' - Wir empfehlen, eine grafische Oberfläche auf der Grundlage von Clerks-Facetten zu erstellen und diese als auswählbare Optionen aufzulisten, da so automatisch verfolgt werden kann, welche Optionen in jeder Kategorie verfügbar sind.
- Es kann auch eine bestehende Filter-GUI verwendet werden, sofern die Auswahlmöglichkeiten der Besucher in eine Filterzeichenfolge umgewandelt werden können
- <x id=“872”/>Lesen Sie mehr über Filter hier<x id=“961”/>
Paginierung der Ergebnisse #
- Die Parameter
limitundoffsetwerden zusammen für die Paginierung verwendet limitsteuert die Anzahl der Produkte, die bei jedem Aufruf zurückgegeben werden- Offset" steuert den Startpunkt in der vollständigen Liste der Ergebnisse
- Der erste Aufruf sollte
offset: 0haben, und jeder weitere Aufrufoffset: offset + limit- Seite 1:
Limit: 60,Offset: 0 - Seite 2:
Limit: 60,Offset: 60 - Seite 3:
Limit: 60,Offset: 120 - … und so weiter
- Seite 1:
- Der Schlüssel
countaus der API-Antwort enthält die Gesamtanzahl der Produkte in der Kategorie, unabhängig vonlimit. Er kann verwendet werden, um die Anzahl der Seiten zu berechnen, indemcountdurchlimitdividiert und aufgerundet wird. Zum Beispiel: “Seiten = ceil(count / limit)`
Beispiel für eine vollständige API-Anfrage und -Antwort #
Hier ist ein vollständiges Beispiel für einen Aufruf und eine Antwort zur Anzeige von Produkten in einer Kategorie.
Es ist eine konfigurierte Anzeige:
- Produkte aus der Kategorie mit der ID 13
- 50 Produkte auf der zweiten Seite mit Limit und Offset von 50
- Produkte mit dem Typ “Star Wars” unter Verwendung von Filtern
- Geordnet nach Preis niedrig-hoch mit orderby Preis mit aufsteigender Reihenfolge
- Facetten für den Preis und die Kategorie
// Request
curl --request POST \
--url 'https://api.clerk.io/v2/recommendations/category/popular' \
--header 'accept: application/json' \
--header 'content-type: application/json'
-d '{"key": "Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c",
"limit": 50,
"category": 13,
"offset": 50,
"orderby": "price",
"order": "asc",
"attributes": ["id","name","image","price", "url"],
"filter": "type = \"Star Wars\"",
"facets": ["price", "category"]
"labels": ["Category Page Grid - Popular"],
"visitor": "xfgu47fd2"
}'
// Response
{
"status": "ok",
"result": [
27988,
25629,
22482,
26994,
27001,
28098,
22484,
25623,
27746,
28097
],
"count": 11,
"facets": {
"categories": [
{
"type": "unit",
"name": "Home Accessories",
"value": 81,
"count": 1
},
{
"type": "unit",
"name": "Swarovski",
"value": 3436,
"count": 5
},
{
"type": "unit",
"name": "Home Accessories",
"value": 3418,
"count": 5
}
],
"price": [
{
"type": "range",
"name": "50 - 99",
"min": 50,
"max": 99.99,
"count": 1
},
{
"type": "range",
"name": "100 - 149",
"min": 100,
"max": 149.99,
"count": 3
},
{
"type": "range",
"name": "200 - 249",
"min": 200,
"max": 249.99,
"count": 1
},
{
"type": "range",
"name": "300 <",
"min": 299.99,
"max": 383,
"count": 6
}
]
},
"product_data": [
{
"id": 27988,
"image": "https://warstars.com/images/star_wars_tie_fighter_ornament.jpg",
"name": "Swarovski Star Wars Tie Fighter Ornament ",
"price": 76,
"url": "https://warstars.com/products/star_wars_tie_fighter_ornament"
},
{
"id": 25629,
"image": "https://warstars.com/images/swarovski_star_wars_mandalorian_the_child.jpg",
"name": "Swarovski Star Wars Mandalorian, The Child",
"price": 112.5,
"url": "https://warstars.com/products/star_wars_mandalorian_the_child"
},
{
"id": 22482,
"image": "https://warstars.com/images/swarovski_star_wars_master_yoda.jpg",
"name": "Swarovski Star Wars Master Yoda",
"price": 131.52,
"url": "https://warstars.com/products/star_wars_master_yoda"
},
{
"id": 26994,
"image": "https://warstars.com/images/swarovski_star_wars_ewok_wicket.jpg",
"name": "Swarovski Star Wars Ewok Wicket",
"price": 132,
"url": "https://warstars.com/products/star_wars_ewok_wicket"
},
{
"id": 27001,
"image": "https://warstars.com/images/swarovski_star_wars_han_solo.jpg",
"name": "Swarovski Star Wars Han Solo",
"price": 212.5,
"url": "https://warstars.com/products/star_wars_han_solo"
},
{
"id": 28098,
"image": "https://warstars.com/images/swarovski_star_wars_boba_fett.jpg",
"name": "Swarovski Disney Star Wars Boba Fett",
"price": 300,
"url": "https://warstars.com/products/star_wars_boba_fett"
},
{
"id": 22484,
"image": "https://warstars.com/images/swarovski_star_wars_darth_vader.jpg",
"name": "Swarovski Star Wars Darth Vader",
"price": 320,
"url": "https://warstars.com/products/star_wars_darth_vader"
},
{
"id": 25623,
"image": "https://warstars.com/images/swarovski_star_wars_x_wing_starfighter.jpg",
"name": "Swarovski Star Wars X-Wing Starfighter",
"price": 320,
"url": "https://warstars.com/products/star_wars_x_wing_starfighter"
},
{
"id": 27746,
"image": "https://warstars.com/images/swarovski_star_wars_chewbacca.jpg",
"name": "Swarovski Star Wars Chewbacca",
"price": 340,
"url": "https://warstars.com/products/star_wars_chewbacca"
},
{
"id": 28097,
"image": "https://warstars.com/images/swarovski_star_wars_obi_wan_kenobi.jpg",
"name": "Swarovski Disney Star Wars Obi-Wan Kenobi",
"price": 350,
"url": "https://warstars.com/products/star_wars_obi_wan_kenobi"
}
]
}
Clerk.js verwenden #
Clerk.js ist eine Bibliothek, die es einfach macht, Clerks API aufzurufen, Tracking und Styling anzuwenden.
- Die Einrichtung funktioniert sehr ähnlich, obwohl die API-Aufrufe vom Frontend aus erfolgen, unter Verwendung von HTML-Snippets
- Wenn Sie das Skript Clerk.js in Ihren Header einbinden, können Sie Snippets direkt in Ihrem Frontend verwenden.
- Wenn Sie Erweiterungen oder Plugins (z.B. für Magento2 oder WooCommerce) verwenden, ist Clerk.js wahrscheinlich bereits enthalten
- Clerk.js durchsucht die Website nach Snippets mit der Klasse
clerkund führt API-Aufrufe mit den Parameterndata-durch - Das Styling kann mit der Liquid Templating Language innerhalb des Snippets erfolgen.
- Clerk.js kann die Paginierung ohne zusätzlichen Code handhaben, indem mit dieser Funktion mehr Ergebnisse auf die Seite geladen werden, wenn man auf eine Schaltfläche klickt:
Clerk('content', '#SNIPPET_ID', 'more', LIMIT); - Facetten-HTML wird erzeugt, indem das Snippet mit den Facetten, ihren Übersetzungen und einem Ziel-HTML-Block, in den sie eingefügt werden sollen, konfiguriert wird. Lesen Sie hier mehr über Clerk.js-Facetten
Beispiel für ein vollständiges Snippet:
<div id="clerk-category-filters"></div>
<span
id="clerk-category-products"
class="clerk"
data-category="113"
data-facets-target="#clerk-category-filters"
data-facets-attributes='["price","categories"]'
data-facets-titles='{"price": "Pricing", "categories": "Collections", "brand": "Vendor"}'
data-facets-price-prepend="€"
data-facets-in-url="true"
data-facets-view-more-text="View More"
data-facets-searchbox-text="Search for ">
<div class="product-search-result-list">
{% for product in products %}
<div class="product">
<h2 class="product-name">{{ product.name }}</h2>
<img src="{{ product.image }}" title="{{ product.name }}" />
<div class="price">${{ product.price | money }}</div>
<a href="{{ product.url }}">Buy Now</a>
</div>
{% endfor %}
{% if count > products.length %}
<div class="clerk-load-more-button"
onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
Show More Results
</div>
{% endif %}
</div>
</span>