Clerk verwenden, um vollständige Kategorieseiten anzuzeigen

Sehen Sie, wie Sie unsere Logik für Kategorieempfehlungen nutzen können, um alle Produkte auf Kategorieseiten anzuzeigen.

Products:

Recommendations

> WICHTIG: Das Ersetzen Ihrer Kategorieprodukte erfordert technisches Fachwissen und wir empfehlen Ihnen, sich an Ihren eigenen Entwickler zu wenden. Bitte beachten Sie, dass unsere internen Entwickler bei Clerk.io diese Aufgabe nicht für Sie übernehmen können.

Überblick

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 priorisiert 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
(Sortiert nach den meistverkauften Artikeln - ändert sich gelegentlich)
recommendations/category/trending
(Sortiert nach Produkten, die sich im Trend befinden - ä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 Trendprodukten. 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

Schlüssel": Der öffentliche Schlüssel für den Shop
Limit: Die Anzahl der Produkte, die zurückgegeben werden sollen
Kategorie: Die ID der aktuell durchsuchten Kategorie
Offset": Der Index, bei dem die Ergebnismenge beginnen soll. Wird zusammen mit limit fü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 asc oder desc sein. 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 bestehenden 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 und 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 facets in 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=“871”/>Lesen Sie mehr über Filter hier<x id=“960”/>

Ergebnisse paginieren

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 Ergebnisliste
Der erste Aufruf sollte offset: 0 haben, 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 dividiert 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 clerk und führt API-Aufrufe mit den Parametern data- 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>