Category Page

Slider #

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

Kategorien haben in der Regel viele Produkte, sodass es schwierig sein kann, 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 die gleichen, sodass sie wahrscheinlich die Bestseller sein werden. Dies 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 Kategorie-ID basieren, anstatt auf einer Suchanfrage.

Daher können sie verwendet werden, um alle Produkte auf Kategorieseiten darzustellen, indem jede 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, während Sie die visuellen Darstellungen über den Code des Webshops 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 häufig)

Der beste Endpunkt, den Sie verwenden sollten, hängt von der Art des Unternehmens ab.

Viele Modegeschäfte mit häufig wechselndem 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-Endpunktparameter #

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 diese Ergebnismenge zurück.
  • Z.B. wenn das günstigste Produkt in der Kategorie €10 kostet und das teuerste €500, 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 Clarks Facetten zu erstellen und diese als auswählbare Optionen aufzulisten, da dies automatisch verfolgt, welche Optionen in jeder Kategorie verfügbar sind.
• Es kann auch mit einer vorhandenen Filter-GUI durchgeführt 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 Ergebnisliste
• 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 der ID 13
• 50 Produkte auf der zweiten Seite unter Verwendung von Limit und Offset von 50
• Produkte mit dem Typ “Star Wars” unter Verwendung von Filtern
• Sortiert nach Preis niedrig-hoch unter Verwendung von orderby Preis in 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": ["Kategorie-Seite Grid - Beliebt"],
          "visitor": "xfgu47fd2"
        }'

// Antwort
{
  "status": "ok",
  "result": [
    27988,
    25629,
    22482
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Heimzubehör",
        "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 durchgeführt werden
• Clerk.js kann die Paginierung ohne zusätzlichen Code handhaben, indem es mehr Ergebnisse auf der Seite mit einem Klick auf eine Schaltfläche lädt, unter Verwendung dieser Funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Facetten-HTML wird generiert, indem das Snippet mit den Facetten, deren Übersetzungen und einem Ziel-HTML-Block konfiguriert wird, um sie einzufügen. Hier mehr über Clerk.js-Facetten lesen

Codebeispiel #

Unten finden Sie 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": "Sammlungen", "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);">
              Weitere Ergebnisse anzeigen
        </div>
    {% endif %}
  </div>
</span>