Category Page

Slider #

Kategorieseiten werden verwendet, wenn ein Kunde nach einem bestimmten Produkttyp sucht, jedoch nicht nach einem spezifischen Produkt wie T-Shirts, Sofas oder Laufschuhen. Wenn sie ein bestimmtes Produkt im Sinn hätten, hätten sie wahrscheinlich zuerst die Suchfunktion verwendet.

Kategorien haben in der Regel viele Produkte, daher kann es schwierig sein, sich darin 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, sodass sie wahrscheinlich die Bestseller sein werden. Das liegt daran, dass Bestseller dem Kunden ein Gefühl von Sicherheit bieten - wenn das Produkt bei anderen beliebt war, gibt es einen Beweis für den Wert.

Indem diese Artikel oben auf der Kategorieseite als Gruppe von Empfehlungen platziert werden, wird es für Ihre Kunden viel einfacher, sich zurechtzufinden.

Es ist wahrscheinlich, dass diese Produkte das Interesse neuer Kunden wecken und somit die Chancen auf eine Conversion 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 Merchandising für einen hohen Grad an Kontrolle darüber, welche Produkte priorisiert werden, nutzt.

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

Verwendung der API #

Unsere Kategorievorschläge-Endpunkte funktionieren genau wie unser Suchseiten-Endpunkt. Der einzige Unterschied besteht darin, dass diese Endpunkte auf einer Kategoried-ID basieren, anstatt auf einer Suchanfrage.

Daher können sie verwendet werden, um alle Produkte auf Kategorieseiten darzustellen, indem die vorhandene Webshop-Logik zum Abrufen von Produkten durch die Clerk-API ersetzt wird.

Wenn Sie ein serverseitiges API-Setup verwenden, können Sie in der Regel das vorhandene Styling beibehalten, indem Sie einfach die Produktdaten von Clerk abrufen und die visuellen Elemente über den Webshop-Code rendern.

Dies sind die beiden verfügbaren Endpunkte:

• recommendations/category/popular
  (Rangiert nach meistverkauften Artikeln - ändert sich gelegentlich)
• recommendations/category/trending
  (Rangiert nach Produkten, die im Verkauf im Trend liegen - ändert sich oft)

Der beste Endpunkt hängt von der Art des Geschäfts ab.

Viele Modegeschäfte mit einem häufig wechselnden Inventar profitieren in der Regel am meisten von trendenden Produkten.

Geschäfte mit Katalogen, in denen Kunden dazu neigen, dieselben Artikel mehrfach zu kaufen, wie Nahrungsergänzungsmittel oder Lebensmittelgeschäfte, sollten in der Regel Bestseller verwenden.

API-Endpunkt-Parameter #

Hier ist eine Übersicht darüber, was jedes Argument tut, wenn ein Aufruf an einen Kategorieseiten-Endpunkt gemacht wird.

Ergebnisse filtern #

• Wenn facets in der Anfrage gesendet wird, gibt Clerk eine Liste der möglichen Filteroptionen für dieses Ergebnis-Set zurück.
  • Z.B. wenn das günstigste 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 sie in einen Filter umgewandelt werden, der im nächsten API-Aufruf gesendet wird.
  • Z.B. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Wir empfehlen, eine grafische Benutzeroberfläche basierend auf Clerks Facetten zu erstellen und diese als auswählbare Optionen aufzulisten, da dies automatisch nachverfolgt, welche Optionen in jeder Kategorie verfügbar sind.
• Es kann auch mit einer vorhandenen Filter-GUI gemacht werden, solange die Auswahlmöglichkeiten der Besucher in einen Filter-String umgewandelt werden können.

Sie können mehr über Filter in unseren Entwicklerdokumenten lesen.

Ergebnisse paginieren #

• Die Parameter limit und offset werden zusammen für die Paginierung verwendet.
• limit steuert die Anzahl der Produkte, die für jeden Aufruf zurückgegeben werden.
• offset steuert den Startpunkt in der vollständigen Liste der Ergebnisse.
• Der erste Aufruf sollte offset: 0 haben, und jeder aufeinanderfolgende 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 count-Schlüssel 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)

Vollständiges API-Anfrage- und Antwortbeispiel #

Hier ist ein vollständiges Beispiel für einen Aufruf und eine Antwort zur Anzeige von Produkten auf einer Kategorie.

Es ist konfiguriert für die Anzeige:

• Produkte aus der Kategorie mit ID 13
• 50 Produkte auf der zweiten Seite mit einem Limit und Offset von 50
• Produkte mit dem Typ “Star Wars” unter Verwendung von Filtern
• Sortiert nach Preis von niedrig nach hoch unter Verwendung von orderby Preis mit aufsteigender Reihenfolge
• Facetten für den Preis und die Kategorie

// Anfrage
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": 3,
          "category": 13,
          "offset": 50,
          "orderby": "price",
          "order": "asc",
          "attributes": ["id","name","image","price", "url"],
          "filter": "type = \"Star Wars\"",
          "facets": ["price", "category"],
          "labels": ["Kategorieseite Raster - Beliebt"],
          "visitor": "xfgu47fd2"
        }'

// Antwort
{
  "status": "ok",
  "result": [
    27988,
    25629,
    22482
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Heimaccessoires",
        "value": 81,
        "count": 1
      },
      {
        "type": "unit",
        "name": "Swarovski",
        "value": 3436,
        "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"
    }
  ]
}

Verwendung von Clerk.js #

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

Vorteile #

• Das Setup funktioniert sehr ähnlich, obwohl API-Aufrufe vom Frontend aus erfolgen, unter Verwendung von HTML-Snippets.
• Durch das Einfügen des Clerk.js-Skripts in Ihren Header können Sie Snippets direkt in Ihrem Frontend verwenden.
• Wenn Sie eine der Erweiterungen oder Plugins (z.B. für Magento2 oder WooCommerce) verwenden, ist Clerk.js wahrscheinlich bereits enthalten.
• Clerk.js scannt die Website nach Snippets mit der Klasse clerk und führt API-Aufrufe unter Verwendung der data- Parameter durch.
• Styling kann mit der Liquid-Template-Sprache innerhalb des Snippets vorgenommen werden.
• Clerk.js kann die Paginierung ohne zusätzlichen Code handhaben, indem es mehr Ergebnisse auf der Seite mit einem Klick auf einen Button lädt, unter Verwendung dieser Funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Facetten-HTML wird generiert, indem das Snippet mit den Facetten, ihren Übersetzungen und einem Ziel-HTML-Block konfiguriert wird, um sie einzufügen. Hier mehr über Clerk.js-Facetten lesen

Codebeispiel #

Unten ist ein vollständiges Snippet, das Produkte und Facetten auf einer Kategorieseite anzeigt.

<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": "Preise", "categories": "Kollektionen", "brand": "Anbieter"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Mehr anzeigen"
  data-facets-searchbox-text="Suchen nach ">
  
  <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 }}">Jetzt kaufen</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
              Mehr Ergebnisse anzeigen
        </div>
    {% endif %}
  </div>
</span>