Recommendations

Category Page

Wie Sie unsere Logik der Kategorieempfehlungen nutzen, um alle Produkte auf Kategorieseiten anzuzeigen.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.

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 für eine Konversion erhöhen.

Vollständige Kategorieseite #

Clerk kann verwendet werden, um alle Ergebnisse auf einer Kategorieseite darzustellen, so dass eine intelligente Sortierung der Ergebnisse möglich ist, und die Verwendung von Merchandising bietet ein hohes Maß an Kontrolle darüber, welche Produkte vorrangig behandelt werden.

Dieser Artikel beschreibt die Verwendung unserer API und der Clerk.js-Bibliothek als zwei verschiedene Möglichkeiten, dieses Rendering zu handhaben.

API-Endpunkte #

Unsere Empfehlungen der Kategorie Endpunkte funktionieren genauso wie der Endpunkt unserer Suchseite. Der einzige Unterschied besteht darin, dass diese Endpunkte auf eine Kategorie-ID und nicht auf eine Suchanfrage angewiesen sind.

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 im Trend liegen - ändert sich häufig)

Welcher Endpunkt am besten zu verwenden ist, hängt von der Art des Unternehmens ab.

Viele Modegeschäfte mit häufig wechselnden Beständen profitieren in der Regel am meisten von trendigen Produkten. Geschäfte mit Katalogen, in denen die Kunden dazu neigen, dieselben Artikel mehrmals zu kaufen, wie z. B. Nahrungsergänzungsmittel oder Lebensmittelgeschäfte, sollten in der Regel die Bestseller verwenden.

API-Endpunkt-Parameter #

Im Folgenden wird erläutert, was die einzelnen Argumente beim Aufruf eines Kategorie-Endpunkts bewirken

key: Der öffentliche Schlüssel für den Shop
limit: Die Anzahl der Produkte, die zurückgegeben werden sollen
category: Die ID der aktuell durchsuchten Kategorie
offset: Der Index, bei dem die Ergebnismenge beginnen soll. Wird mit limit für die Paginierung verwendet.
orderby: Ein Attribut, nach dem die Ergebnisse sortiert werden. Wenn es nicht gesendet wird, sortiert Clerk nach den meistverkauften Artikeln
order: Kann entweder asc oder desc sein. Sortiert die Produkte in aufsteigender oder absteigender Reihenfolge
attributes: 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 Produkt-IDs zurück
filter: Eine Zeichenkette, die Clerk so konfiguriert, dass nur eine Teilmenge von Produkten zurückgegeben wird. Wird zusammen mit bestehenden Filtern auf der Seite oder Clerks facets verwendet, um Kunden die Möglichkeit zu geben, die Ergebnisse einzugrenzen
facets: 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
labels: Die Bezeichnung(en), die mit der Kategorieseite verbunden sind. Wird für die Identifizierung der Leistung in meinem.clerk.io
visitor: Die Besucher-ID des aktuellen Besuchers, der die Seite besucht

Ergebnisse filtern #

Wenn Sie facets in der Anfrage senden, 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 € und der höchste 450 €+ oder ähnlich sein. 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=’(price > 10 and price < 100) and brand=”Swarovski"'
Wir empfehlen, eine grafische Oberfläche zu erstellen, die auf den Facetten von Clerks basiert und diese als auswählbare Optionen auflistet, da dies automatisch den Überblick darüber behält, welche Optionen in jeder Kategorie verfügbar sind.
Es ist auch möglich, eine bestehende Filter-GUI zu verwenden, sofern die Auswahlmöglichkeiten der Besucher in eine Filterzeichenfolge umgewandelt werden können.
Lesen Sie hier mehr über Filter

Paginierung der Ergebnisse #

Die Parameter limit und offset werden zusammen für die Paginierung verwendet
limit steuert 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 mit offset: 0 beginnen, und jeder weitere Aufruf offset: offset + limit
- Seite 1: limit: 60, offset: 0
- Seite 2: limit: 60, offset: 60
- Seite 3: limit: 60, offset: 120
- … und so weiter
Der Schlüssel count aus der API-Antwort enthält die Gesamtanzahl der Produkte in der Kategorie, unabhängig von limit. Er kann verwendet werden, um die Anzahl der Seiten zu berechnen, indem count durch limit geteilt und aufgerundet wird. z.B.: pages = 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"
    }
  ]
}

Verwendung von Clerk.js #

Clerk.js ist eine Bibliothek, die es einfach macht, Clerks API aufzurufen, Tracking anzuwenden und Styling zu behandeln.

Das Setup funktioniert sehr ähnlich, obwohl die API-Aufrufe vom Frontend aus erfolgen, indem HTML-Snippets verwendet werden
Wenn Sie das Clerk.js Skript in Ihren Header einbinden, können Sie die 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 der Klasse clerk und führt API-Aufrufe unter Verwendung der Parameter data- durch.
Die Gestaltung kann mit der Templating-SpracheLiquid innerhalb des Snippets vorgenommen werden.
Clerk.js kann die Paginierung ohne zusätzliches Coding handhaben, indem mit dieser Funktion mehr Ergebnisse auf der Seite geladen werden, wenn man auf eine Schaltfläche klickt: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
Facetten HTML wird generiert, indem das Snippet mit den Facetten, ihren Übersetzungen und einem Ziel-HTML-Block, in den sie einzufügen sind, konfiguriert wird. Lesen Sie mehr über Clerk.js Facetten hier

Vollständiges Snippet-Beispiel:

<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>