Category Page

Slider #

Kategorie-Seiten 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 spezifisches Produkt im Sinn, hätte er höchstwahrscheinlich zuerst die Suchfunktion genutzt.

Kategorien enthalten in der Regel viele Produkte, wodurch die Navigation schwierig sein kann, aber viele Kunden suchen nach denselben wenigen Produkten in den Kategorien.

Diese ausgewählten Produkte sind meist für jeden Kunden gleich, sodass sie wahrscheinlich die Bestseller sind. Das liegt daran, dass Bestseller dem Kunden ein Gefühl von Sicherheit geben – war ein Produkt bei anderen beliebt, ist das ein gewisser Beweis für seinen Wert.

Indem Sie diese Artikel oben auf der Kategorie-Seite als Gruppe von Empfehlungen platzieren, erleichtern Sie Ihren Kunden die Navigation erheblich.

Es ist wahrscheinlich, dass diese Produkte das Interesse neuer Kunden wecken und somit die Chancen auf eine Konversion erhöhen.

Ganze Kategorie-Seite #

Clerk kann verwendet werden, um alle Ergebnisse auf einer Kategorie-Seite darzustellen, indem Ergebnisse intelligent sortiert und Merchandising für ein hohes Maß an Kontrolle darüber eingesetzt wird, welche Produkte priorisiert werden.

Dieser Artikel beschreibt die Verwendung unserer API und der Clerk.js-Bibliothek als zwei verschiedene Wege zur Umsetzung dieses Renderings.

Verwendung der API #

Unsere Kategorie-Empfehlungen-Endpunkte funktionieren genauso wie unser Suchseiten-Endpunkt. Der einzige Unterschied ist, dass diese Endpunkte auf einer Kategorie-ID statt auf einer Suchanfrage basieren.

Deshalb können sie genutzt werden, um alle Produkte auf Kategorie-Seiten darzustellen, indem jegliche bestehende Webshop-Logik zum Abrufen von Produkten durch Clerks API ersetzt wird.

Bei einer serverside-API-Integration kann meist das existierende Styling beibehalten werden, indem lediglich die Produktdaten von Clerk bezogen werden, während die Darstellung über den Webshop-Code erfolgt.

Dies sind die zwei verfügbaren Endpunkte:

• recommendations/category/popular
  (Sortiert nach meistverkauften Artikeln – ändert sich gelegentlich)
• recommendations/category/trending
  (Sortiert nach Produkten mit stark ansteigenden Verkäufen – ändert sich häufig)

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

Viele Modegeschäfte mit häufig wechselndem Sortiment profitieren meist am meisten von Trend-Produkten.

Shops mit Katalogen, bei denen Kunden tendenziell die gleichen Artikel mehrfach kaufen, wie Nahrungsergänzungsmittel- oder Lebensmittelgeschäfte, sollten generell Bestseller verwenden.

API-Endpunkt-Parameter #

Hier ist eine Übersicht, was jedes Argument beim Aufruf eines Kategorie-Endpunkts bewirkt.

Ergebnisse filtern #

• Wenn facets in der Anfrage gesendet werden, gibt Clerk eine Liste der möglichen Filteroptionen für dieses Ergebnis-Set zurück.
  • Beispiel: Ist das günstigste Produkt in der Kategorie 10 € und das teuerste 500 €, könnte die niedrigste Preisspanne von 10–50 €, und die höchste von 450+ € oder ähnlich sein.
  • Eine Kategorie könnte 10 verschiedene Marken haben, eine andere nur 3 in den Facetten.
• Wenn ein Besucher eine Option auswählt, sollte diese in einen Filter umgewandelt werden, der in der nächsten API-Anfrage gesendet wird.
  • Beispiel: filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Wir empfehlen, eine grafische Oberfläche auf Basis von Clerks Facetten zu erstellen und sie als auswählbare Optionen aufzulisten, da so automatisch verfolgt wird, welche Optionen in jeder Kategorie verfügbar sind.
• Dies ist auch mit einer vorhandenen Filter-GUI möglich, sofern die Besucher-Auswahl in einen Filter-String umgewandelt werden kann.

Sie können mehr über Filter in unserer Entwicklerdokumentation lesen.

Ergebnisse paginieren #

• Die Parameter limit und offset werden gemeinsam zur Paginierung verwendet
• limit steuert die Anzahl der Produkte pro Anfrage
• offset steuert den Startpunkt in der Ergebnisliste
• Der erste Aufruf sollte offset: 0 haben, jeder folgende 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-Wert aus der API-Antwort enthält die Gesamtzahl der Produkte in der Kategorie, unabhängig von limit. Er kann zur Berechnung der Seitenanzahl verwendet werden, indem count durch limit geteilt und aufgerundet wird. Beispiel: pages = ceil(count / limit)

Vollständiges API-Anfrage- & Antwort-Beispiel #

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

Es ist konfiguriert, um darzustellen:

• Produkte aus der Kategorie mit der ID 13
• 50 Produkte auf der zweiten Seite mittels Limit und Offset von 50
• Produkte mit dem Typ “Star Wars” mit Hilfe von Filtern
• Sortierung nach Preis aufsteigend mit orderby price und aufsteigender Reihenfolge
• Facetten für Preis und 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": 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, die Clerk.io-API aufzurufen, Tracking zu implementieren und Styling zu verwalten.

Übersicht #

Mit Clerk.js können Sie eine vollständige Kategorie-Seite direkt aus dem Frontend mit HTML-Snippets darstellen.

• Fügen Sie das Clerk.js-Skript in Ihren Header ein, um Embed-Codes auf Ihrer Seite verwenden zu können.
• Clerk.js durchsucht die Website nach Elementen mit der Klasse clerk und liest deren data--Parameter aus.
• Verwenden Sie die Liquid-Templating-Sprache in einem Code-Design, um das HTML und Styling der Produktübersicht zu steuern.
• Clerk.js kann die Paginierung ohne zusätzlichen Code übernehmen, indem beim Klick auf einen Button weitere Ergebnisse geladen werden: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Das HTML für Facetten wird generiert, indem der Embed-Code mit den Facetten, deren Übersetzungen und einem Ziel-HTML-Block konfiguriert wird, in den die Facetten eingefügt werden. Weitere Informationen zu Clerk.js Facetten.

Erstellen Sie vor dem Hinzufügen des Codes zu Ihrem Webshop das Standarddesign für die Kategorie-Seite und ein Element in my.clerk.io.

Design erstellen #

Für eine Standards-Kategorie-Gesamtseite erstellen Sie das Standarddesign für die Kategorie-Seite:

1. Gehen Sie zu Recommendations > Designs und klicken Sie auf New Design.
2. Wählen Sie Grid Design und dann das Standarddesign Category Page aus.
3. Speichern Sie das Design.

Für ein individuelles Layout wählen Sie ein leeres Code-Design unter Grid Design und folgen den Anweisungen unter Code Design.

Ein Element erstellen #

1. Gehen Sie zu Recommendations > Elements und erstellen Sie ein neues Element.
2. Benennen Sie das Element Category Page Grid.
3. Wählen Sie Bestsellers In Category als Produktlogik.
4. Wählen Sie das unter Design erstellen erstellte Design aus.
5. Wenn das ausgewählte Design Facetten unterstützt, aktivieren Sie Facets, legen Sie die Limits wie bei Omnisearch fest und wählen Sie die Facetten aus, die Sie anzeigen möchten.
6. Setzen Sie das Produktlimit auf mindestens 40.
7. Speichern Sie das Element.

Zur Website hinzufügen #

Es gibt zwei Möglichkeiten, das Kategorie-Seiten-Element auf Ihrer Website hinzuzufügen. Injection ist die einfachste Option. Für mehr Kontrolle darüber, wo Filter und Produktübersicht erscheinen, verwenden Sie Embedded Code und folgen Sie der untenstehenden individuellen Implementierung.

Injection #

Öffnen Sie den Insert into website-Tab des Elements und wählen Sie Using injection.

Konfigurieren Sie einen eindeutigen CSS-Selektor für die Produktübersicht der Kategorie-Seite und wählen Sie, wo das Element eingefügt werden soll. Da dieses Element eine Kategorie-Logik verwendet, konfigurieren Sie auch den Category ID CSS selector, damit Clerk.js die aktuelle Kategorie-ID lesen und die passenden Produkte anzeigen kann.

Unterstützt das gewählte Design Facetten, werden diese im injizierten Element automatisch angezeigt.

Lesen Sie mehr über Injection verwenden.

Individuelle Implementierung #

Die individuelle Implementierung benötigt ein HTML-Element für die Filter und einen Clerk.js-Embed-Code für die Produkte. Die Filter werden in das erste Element eingefügt, die Produkte erscheinen innerhalb des Embed-Codes.

1. Öffnen Sie den Insert into website-Tab des Elements und kopieren Sie den Embed-Code.
2. Fügen Sie im Template der Kategorie-Seite ein leeres <div> ein, wo die Filter angezeigt werden sollen. Geben Sie ihm die ID clerk-category-filters.
3. Fügen Sie den kopierten Embed-Code dort ein, wo die Produktübersicht erscheinen soll. Geben Sie dem äußeren Element die ID clerk-category-products und behalten Sie die Klasse clerk bei.
4. Ersetzen Sie INSERT_CATEGORY_ID durch die aktuell angezeigte Kategorie-ID. Ihr Webshop muss für jede Kategorie-Seite die korrekte ID ausgeben.
5. Setzen Sie data-template auf den Wert, der der ID des erstellten Elements entspricht. Im Zweifel öffnen Sie das Element, gehen zu Insert into website > Using embedded code und prüfen/kopieren den korrekten Wert.
6. Stellen Sie sicher, dass data-facets-target auf das Filterelement zeigt: #clerk-category-filters.
7. Listen Sie in data-facets-attributes die Produktattribute auf, nach denen Besucher filtern können sollen. Das Beispiel enthält Preis, Kategorien und Marke; ersetzen Sie diese durch Attribute, die in Ihrem Katalog existieren.
8. Verwenden Sie data-facets-titles, um die Labels anzugeben, die Besucher für jedes Attribut sehen sollen.
9. Setzen Sie data-facets-in-url="true", wenn ausgewählte Filter zur URL hinzugefügt werden sollen, damit Besucher die gefilterte Kategorie-Seite teilen oder später erneut aufrufen können.

Falls Clerk.js nicht bereits auf Ihrem Webshop installiert ist, fügen Sie das Clerk.js-Skript vor der Verwendung des Embed-Codes auf Ihrer Seite ein. Die Werte für data-category, den data-facets-target-Selektor und die beiden Kategorie-Seiten-IDs müssen den Werten in Ihrem Template entsprechen.

Code Design #

Wenn Sie ein leeres Code Design unter Grid Design angelegt haben, fügen Sie den folgenden HTML-Code ins HTML-Panel ein. Er enthält eine Produktübersicht, ein Sortier-Dropdown und einen „Mehr laden“-Button. Das Dropdown aktualisiert die Parameter orderby und order des Elements, ohne die Kategorie-Seite zu verlassen. Der Wert von order muss entweder asc oder desc sein.

<div class="clerk-category-page">
  <div class="clerk-category-toolbar">
    <label for="clerk-category-sort-{{ content.id }}">Sortieren nach</label>
    <select
      id="clerk-category-sort-{{ content.id }}"
      onchange="var sort = this.value.split(':'); Clerk('content', '#{{ content.id }}', function (content) { content.param({ orderby: sort[0], order: sort[1] }); });">
      <option value="price:asc">Preis: Niedrig bis hoch</option>
      <option value="price:desc">Preis: Hoch bis niedrig</option>
      <option value="name:asc">Name: A-Z</option>
      <option value="name:desc">Name: Z-A</option>
    </select>
  </div>

  <div class="clerk-category-grid">
    {% for product in products %}
      <article class="clerk-category-card">
        <a href="{{ product.url }}" class="clerk-category-card-link">
          <img
            src="{{ product.image }}"
            alt="{{ product.name }}"
            class="clerk-category-card-image">
          <div class="clerk-category-card-details">
            <div class="clerk-category-card-brand">{{ product.brand }}</div>
            <h2 class="clerk-category-card-name">{{ product.name }}</h2>
            <div class="clerk-category-card-price">{{ product.price | money }}</div>
          </div>
        </a>
      </article>
    {% endfor %}
  </div>

  {% if count > products.length %}
    <button
      type="button"
      class="clerk-load-more-button"
      onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
      Mehr Produkte laden
    </button>
  {% endif %}
</div>

Das Design steuert ausschließlich die Produktübersicht. Fügen Sie den Filter-Container sowie den Embed-Code des Elements wie unten gezeigt ins Template der Kategorie-Seite ein. Mehr über das Rendern und Aktualisieren von Clerk.js-Elementen erfahren Sie in der Dokumentation.

Embed-Code #

Nachfolgend ein separates Beispiel für das Template der Kategorie-Seite. Der Wert von data-template muss mit der ID des erstellten Elements übereinstimmen, unabhängig vom Namen des Elements. Das gewählte Element und Design bestimmen das Aussehen der Produktübersicht, während die data-facets-*-Attribute steuern, welche Filter angezeigt werden.

<!-- Facets werden hier eingefügt. -->
<div id="clerk-category-filters"></div>

<!-- Produkte werden hier gerendert mit dem ausgewählten Element und Design. -->
<span
  id="clerk-category-products"
  class="clerk"
  data-template="INSERT_ELEMENT_TEMPLATE"
  data-category="INSERT_CATEGORY_ID"
  data-limit="40"
  data-facets-target="#clerk-category-filters"
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "Preis", "categories": "Kategorien", "brand": "Marke"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Mehr anzeigen"
  data-facets-searchbox-text="Suchen nach ">
</span>

Ersetzen Sie INSERT_ELEMENT_TEMPLATE durch den Wert aus Insert into website > Using embedded code auf der Element-Seite.