Category Page

Slider #

Kategorieseiten werden verwendet, wenn ein Kunde nach einem bestimmten Produkttyp sucht, aber kein bestimmtes Produkt im Sinn hat, wie zum Beispiel T-Shirts, Sofas oder Laufschuhe. Hätte er ein konkretes Produkt im Sinn, hätte er wahrscheinlich zuerst die Suchfunktion genutzt.

Kategorien enthalten in der Regel viele Produkte, weshalb die Navigation schwierig sein kann. Viele Kunden suchen jedoch nach denselben wenigen Produkten innerhalb der Kategorien.

Diese ausgewählten Produkte sind für jeden Kunden meist die gleichen und es handelt sich dabei wahrscheinlich um die Bestseller. Das liegt daran, dass Bestseller dem Kunden ein Gefühl von Sicherheit vermitteln – wenn das Produkt bei anderen beliebt war, gibt es einen gewissen Nachweis über seinen Wert.

Indem Sie diese Artikel als Gruppe von Empfehlungen oben auf der Kategorieseite platzieren, erleichtert das Ihren Kunden die Navigation erheblich.

Es ist wahrscheinlich, dass diese Produkte das Interesse neuer Kunden wecken und dadurch die Wahrscheinlichkeit einer Conversion erhöhen.

Vollständige Kategorieseite #

Clerk kann verwendet werden, um alle Ergebnisse auf einer Kategorieseite darzustellen, was eine intelligente Sortierung der Ergebnisse sowie die Nutzung von Merchandising für ein hohes Maß an Kontrolle darüber ermöglicht, welche Produkte priorisiert werden.

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 category recommendations-Endpoints funktionieren genauso wie unser search page-Endpoint. Der einzige Unterschied besteht darin, dass diese Endpoints auf einer Kategorie-ID statt einer Suchanfrage basieren.

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

Bei der Verwendung eines serverseitigen API-Setups können Sie das bestehende Styling in der Regel beibehalten, indem Sie die Produktdaten einfach von Clerk abrufen und die visuelle Darstellung über den Webshop-Code rendern.

Dies sind die beiden verfügbaren Endpoints:

• recommendations/category/popular
  (Sortiert nach meistverkauften Artikeln – ändert sich gelegentlich)
• recommendations/category/trending
  (Sortiert nach Produkten, die im Verkauf im Trend liegen – ändert sich häufig)

Der beste zu verwendende Endpoint hängt vom Unternehmenstyp ab.

Viele Modeläden mit häufig wechselndem Bestand profitieren meist am meisten von trendigen Produkten.

Shops mit Sortimenten, bei denen Kunden dazu neigen, dieselben Artikel mehrfach zu kaufen, wie Nahrungsergänzungsmittel oder Lebensmittel, sollten im Allgemeinen Bestseller verwenden.

API-Endpoint-Parameter #

Hier ist eine Übersicht darüber, was jedes Argument bewirkt, wenn ein Aufruf an einen Kategorie-Endpoint gesendet 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 das niedrigste Preissegment 10–50 € und das höchste 450 €+ oder ähnlich sein.
  • Eine Kategorie könnte 10 verschiedene Marken beinhalten und eine andere nur 3 in den Facets.
• Wenn ein Besucher eine Option auswählt, sollte sie in einen Filter umgewandelt werden, der in der nächsten API-Anfrage gesendet wird.
  • Z. B. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Wir empfehlen, eine grafische Oberfläche basierend auf Clerks Facets zu erstellen und diese als auswählbare Optionen aufzulisten, da so automatisch nachverfolgt werden kann, welche Optionen in jeder Kategorie verfügbar sind.
• Es ist auch möglich, eine bestehende Filter-GUI zu verwenden, solange die Auswahl der Besucher in einen Filter-String umgewandelt werden kann.

Mehr zu Filtern in unseren Entwicklerdokumenten.

Ergebnisse paginieren #

• Die Parameter limit und offset werden gemeinsam für die Paginierung verwendet
• limit bestimmt die Anzahl der Produkte pro Anfrage
• offset bestimmt die Startposition in der vollständigen Liste der Ergebnisse
• Der erste Aufruf sollte offset: 0 enthalten, und jeder nachfolgende 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-Key aus der API-Antwort enthält die Gesamtzahl der Produkte in der Kategorie, unabhängig vom limit. Dies kann genutzt werden, um die Seitenzahl zu berechnen, indem count durch limit geteilt und aufgerundet wird. Z. B.: pages = ceil(count / limit)

Vollständiges API Request & Response Beispiel #

Hier ist ein vollständiges Beispiel eines Aufrufs und einer Antwort, um Produkte auf einer Kategorieseite anzuzeigen.

Es ist so konfiguriert, dass:

• Produkte aus der Kategorie mit der ID 13 angezeigt werden
• 50 Produkte auf der zweiten Seite mit limit und offset von 50 dargestellt werden
• Produkte mit dem Typ “Star Wars” über Filter angezeigt werden
• Nach Preis aufsteigend mit orderby price und aufsteigender Reihenfolge sortiert wird
• Facets für Preis und Kategorie angezeigt werden

// 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": 3,
          "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
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Home Accessories",
        "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, Clerks API aufzurufen, Tracking anzuwenden und Styling zu steuern.

Vorteile #

• Das Setup funktioniert ähnlich, allerdings erfolgen die API-Aufrufe vom Frontend aus mithilfe von HTML-Snippets
• Durch das Einbinden des Clerk.js-Skripts im Header können Snippets direkt im Frontend genutzt werden
• Bei Verwendung von Erweiterungen oder Plugins (z. B. für Magento2 oder WooCommerce) ist Clerk.js wahrscheinlich bereits integriert
• Clerk.js durchsucht die Website nach allen Snippets mit der Klasse clerk und führt API-Aufrufe mit den data--Parametern aus
• Das Styling erfolgt mit der Liquid Template-Sprache im Snippet
• Clerk.js kann die Paginierung ohne zusätzlichen Code handhaben, indem mehr Ergebnisse auf Knopfdruck auf der Seite geladen werden, mit dieser Funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Facets-HTML wird generiert, indem das Snippet mit den Facets, deren Übersetzungen und einem Ziel-HTML-Block konfiguriert wird, in den diese eingefügt werden. Mehr über Clerk.js Facets hier lesen

Codebeispiel #

Unten befindet sich ein vollständiges Snippet, das Produkte und Facets 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": "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>