Category Page

Slider #

Kategorieseiten werden verwendet, wenn ein Kunde nach einer bestimmten Art von Produkt sucht, aber 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 genutzt.

Kategorien umfassen in der Regel viele Produkte, daher kann es schwierig sein, darin zu navigieren. Dennoch suchen viele Kunden nach denselben wenigen Produkten innerhalb der Kategorien.

Diese ausgewählten Produkte sind für jeden Kunden meist die gleichen, weshalb sie vermutlich die Bestseller sind. Dies liegt daran, dass Bestseller dem Kunden ein Gefühl von Sicherheit geben – wenn das Produkt bei anderen beliebt war, ist dies ein gewisser Wertnachweis.

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

Es ist wahrscheinlich, dass diese Produkte das Interesse neuer Kunden wecken und somit die Conversion-Chancen steigern.

Volle Kategorieseite #

Clerk kann verwendet werden, um alle Ergebnisse auf einer Kategorieseite darzustellen, wodurch eine intelligente Sortierung der Ergebnisse möglich ist, und mittels Merchandising eine hohe Kontrolle darüber gewährleistet wird, welche Produkte priorisiert werden.

Dieser Artikel beschreibt die Verwendung unserer API und der Clerk.js-Bibliothek als zwei unterschiedliche Möglichkeiten, dieses Rendering zu handhaben.

Verwendung der API #

Unsere category recommendations-Endpunkte funktionieren genau wie unser search page-Endpunkt. Der einzige Unterschied besteht darin, dass sich diese Endpunkte auf eine Kategorie-ID statt auf eine Suchanfrage stützen.

Daher können sie verwendet werden, um alle Produkte auf Kategorieseiten darzustellen, indem jegliche bestehende Webshop-Logik zur Produktabfrage durch die Clerk-API ersetzt wird.

Bei einer serverside API-Integration kann in der Regel das bestehende Styling beibehalten werden, indem einfach die Produktdaten von Clerk bezogen und die Darstellung durch den Webshop-Code erfolgt.

Dies sind die beiden verfügbaren Endpunkte:

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

Welcher Endpunkt am besten geeignet ist, hängt vom Geschäftstyp ab.

Viele Modegeschäfte mit häufig wechselndem Sortiment profitieren am meisten von trendigen Produkten.

Shops mit Katalogen, in denen Kunden dazu neigen, dieselben Artikel mehrfach zu kaufen, wie z. B. Nahrungsergänzungsmittel- oder Lebensmittelgeschäfte, sollten im Allgemeinen Bestseller verwenden.

API-Endpoint-Parameter #

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

Ergebnisse filtern #

• Wenn im Request facets gesendet werden, 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 und das teuerste €500 kostet, könnte die niedrigste Preisspanne €10–50 sein, die höchste €450+ oder ähnlich.
  • Eine Kategorie kann 10 verschiedene Marken als Facetten haben, eine andere nur 3.
• Wenn ein Besucher eine Option auswählt, sollte diese in einen Filterstring umgewandelt und in der nächsten API-Anfrage gesendet werden.
  • Z.B. filter=’(price > 10 and price < 100) and brand=”Swarovski”'
• Wir empfehlen, eine grafische Oberfläche basierend auf Clerks Facetten zu erstellen und diese als auswählbare Optionen aufzulisten, da so automatisch nachvollzogen wird, welche Optionen in jeder Kategorie verfügbar sind.
• Es kann auch eine bestehende Filter-GUI verwendet werden, solange die Besucherentscheidungen in einen Filterstring umgewandelt werden können.

Mehr dazu lesen Sie in den Entwicklerdokumenten zu Filtern.

Ergebnisse paginieren #

• Die Parameter limit und offset werden gemeinsam für die Seitennummerierung verwendet
• limit bestimmt die Anzahl der Produkte pro Anfrage
• offset bestimmt den Startpunkt in der vollständigen Ergebnisliste
• Der erste Aufruf sollte offset: 0 haben, jeder folgende Aufruf dann 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 in der API-Antwort enthält die Gesamtanzahl der Produkte in der Kategorie, unabhängig von limit. Daraus kann die Seitenzahl berechnet werden, 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 der Antwort, um Produkte auf einer Kategorieseite anzuzeigen.

Es ist so konfiguriert, dass:

• Produkte aus der Kategorie mit ID 13 angezeigt werden
• 50 Produkte auf der zweiten Seite mit limit und offset von 50 ausgegeben werden
• Produkte mit dem Typ “Star Wars” durch Filter genutzt werden
• Sortierung nach Preis aufsteigend erfolgt mit orderby price und aufsteigender Reihenfolge
• Facetten für Preis und Kategorie verwendet 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, die Clerk.io API aufzurufen, Tracking anzuwenden und das Styling zu verwalten.

Kategorietexte erhalten #

Wenn Sie Clerk.js verwenden, um eine Kategorieseite zu ersetzen, empfehlen wir in der Regel, die bestehenden Produkte des Shop-Systems als Fallback darunter beizubehalten. Lassen Sie die Plattform sie im initialen HTML rendern und lassen Sie Clerk.js das Produktgrid ersetzen, nachdem dessen Produkte erfolgreich gerendert wurden.

Behalten Sie auch den Kategorietitel (H1), weitere Überschriften und die Kategoriebeschreibung, die von der Shop-Plattform ausgegeben werden. Halten Sie diesen Inhalt außerhalb des von Ihnen ersetzten Produktgrids, sodass er auch ohne JavaScript verfügbar bleibt.

Google führt JavaScript beim Rendern von Seiten aus, aber ein erfolgreicher Ladevorgang ist nicht garantiert, und nicht alle Suchmaschinen-Crawler führen JavaScript aus. Siehe Googles JavaScript-SEO-Leitfaden.

Werden die Produkte und Kategorietexte der Plattform im initialen HTML belassen, können Suchmaschinen sie auch dann lesen, wenn JavaScript nicht lädt. Besucher haben auch dann eine nutzbare Kategorieseite, wenn Clerk.js oder das Produktrequest fehlschlägt.

Blenden Sie die Originalprodukte erst aus oder ersetzen Sie sie, wenn das Clerk.js-Grid erfolgreich gerendert wurde. Vermeiden Sie es, sie aus dem Template zu entfernen oder sie mit CSS zu verstecken, das auch angewendet wird, wenn JavaScript nicht zur Verfügung steht.

Überprüfen Sie Ihre Implementierung mit deaktiviertem JavaScript und mit blockierten Clerk.io-Requests. In beiden Fällen sollten die Überschriften, Kategorietexte und Produktlinks der Plattform sichtbar bleiben. Wenn Clerk.js funktioniert, sollte nur ein Produktgrid und ein Kategorien-H1 angezeigt werden.

Überblick #

Mit Clerk.js können Sie eine vollständige Kategorieseite vom Frontend aus mit HTML-Snippets rendern.

• Binden Sie das Clerk.js-Script im Header ein, damit Sie Embed-Codes auf Ihrer Website verwenden können.
• Clerk.js scannt die Website nach Elementen mit der Klasse clerk und liest deren data--Parameter.
• Verwenden Sie die Liquid Template Language in einem Code Design, um das HTML und Styling des Produktgrids zu steuern.
• Clerk.js kann das Paging ohne zusätzlichen Code übernehmen, indem mehr Ergebnisse geladen werden, wenn ein Besucher eine Schaltfläche klickt, und zwar mit dieser Funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Das Facetten-HTML wird durch das Konfigurieren des Embed-Codes mit den Facets, deren Übersetzungen und ein Ziel-HTML-Block erzeugt. Mehr zu Clerk.js-Facets.

Bevor Sie den Code im Shop einfügen, erstellen Sie das Standarddesign und das Element für die Kategorieseite in my.clerk.io.

Ein Design erstellen #

Für eine Standard-Kategorieseite erstellen Sie das Standarddesign für Kategorieseiten:

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

Für ein individuelles Layout wählen Sie ein leeres Code-Design unter Grid Design und folgen Sie der Anleitung zum Code Design unten.

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 Ein Design erstellen erstellte Design aus.
5. Falls das ausgewählte Design Facetten unterstützt, aktivieren Sie Facetten, legen Sie die Limits wie bei Omnisearch fest, und wählen Sie die anzuzeigenden Facetten aus.
6. Setzen Sie das Produktlimit auf mindestens 40.
7. Speichern Sie das Element.

Auf Ihrer Website einbinden #

Es gibt zwei Möglichkeiten, das Kategorie-Element auf Ihrer Website einzubinden. Injection ist die einfachste Option. Für mehr Kontrolle darüber, wo Filter und Produktgrid erscheinen, verwenden Sie Embedded Code und folgen Sie der unten stehenden individuellen Implementierung.

Injection #

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

Konfigurieren Sie einen eindeutigen CSS-Selektor für das Produktgrid der Kategorieseite und wählen Sie aus, wo das Element eingefügt werden soll. Da dieses Element eine Kategorie-Logik nutzt, konfigurieren Sie zusätzlich den Category ID CSS selector, damit Clerk.js die aktuelle Kategorie-ID auslesen und die korrekten Produkte anzeigen kann.

Zielen Sie auf das Produktgrid, nicht auf einen Container, der auch Kategorieüberschrift und Beschreibung enthält. Folgen Sie Kategorietexte erhalten, um die Produkte der Plattform verfügbar zu halten, bis die Ersetzung erfolgt ist.

Wenn das ausgewählte Design Facetten unterstützt, sind sie automatisch im injizierten Element enthalten.

Mehr dazu unter Nutzung von Injection.

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, während die Produkte im Embed-Code dargestellt werden.

Belassen Sie die bestehenden Produktausgaben des Shops im Kategorietemplate wie unter Kategorietexte erhalten beschrieben. Der Embed-Code allein verwaltet diese Fallback-Funktion nicht; Ihre Implementierung muss das Originalgrid sichtbar halten, bis die Clerk.js-Produkte angezeigt werden.

1. Öffnen Sie den Tab Insert into website des Elements und kopieren Sie den Embed-Code.
2. Fügen Sie im Template der Kategorieseite ein leeres <div> ein, wo Filter erscheinen sollen. Geben Sie ihm die ID clerk-category-filters.
3. Fügen Sie den kopierten Embed-Code dort ein, wo das Produktgrid erscheinen soll. Geben Sie seinem äußeren Element die ID clerk-category-products und belassen Sie die Klasse clerk.
4. Ersetzen Sie INSERT_CATEGORY_ID durch die aktuell betrachtete Kategorie-ID. Ihr Shop muss die korrekte ID für jede Kategorieseite ausgeben.
5. Setzen Sie data-template auf den Wert, der mit der ID des von Ihnen erstellten Elements übereinstimmt. Falls Sie unsicher sind, öffnen Sie das Element und gehen Sie zu Insert into website > Using embedded code, um den korrekten Wert nachzusehen oder zu kopieren.
6. Stellen Sie sicher, dass data-facets-target auf das Filter-Element zeigt: #clerk-category-filters.
7. Listen Sie in data-facets-attributes die Produktattribute auf, nach denen Besucher filtern können. Das Beispiel umfasst Preis, Kategorien und Marke; ersetzen Sie diese durch Attribute, die in Ihrem Katalog existieren.
8. Nutzen Sie data-facets-titles, um die Bezeichnungen für jedes Attribut festzulegen, die der Besucher sehen soll.
9. Setzen Sie data-facets-in-url="true", wenn ausgewählte Filter der URL hinzugefügt werden sollen, damit Besucher eine gefilterte Kategorieseite teilen oder erneut aufrufen können.

Falls Clerk.js noch nicht auf Ihrem Webshop installiert ist, fügen Sie das Clerk.js-Script vorher auf Ihrer Seite ein. Die Werte data-category, der data-facets-target-Selektor und die beiden Kategorieseiten-IDs müssen mit den Werten in Ihrem Template übereinstimmen.

Code Design #

Falls Sie ein leeres Code Design unter Grid Design erstellt haben, fügen Sie den folgenden HTML-Code in dessen HTML-Panel ein. Es bietet ein Produktgrid, ein Sortierauswahlfeld und einen „Mehr laden“-Button. Das Sortierauswahlfeld aktualisiert die Parameter orderby und order des Elements, ohne die Kategorieseite zu verlassen. Der Wert für 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: Aufsteigend</option>
      <option value="price:desc">Preis: Absteigend</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);">
      Weitere Produkte laden
    </button>
  {% endif %}
</div>

Das Design steuert nur das Produktgrid. Fügen Sie den Filter-Container und den Element-Embed-Code wie unten gezeigt dem Template der Kategorieseite hinzu. Mehr zum Rendern und Aktualisieren von Clerk.js-Elementen.

Embed-Code #

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

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

<!-- Produkte werden hier mit dem ausgewählten Element und Design dargestellt. -->
<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 mit dem Wert aus Insert into website > Using embedded code auf der Elementseite.