Category Page

Slider #

Kategorie-Seiten werden verwendet, wenn ein Kunde nach einer bestimmten Art von Produkt sucht, aber nicht nach einem konkreten Produkt wie T-Shirts, Sofas oder Laufschuhen. Hätte der Kunde ein spezifisches Produkt im Sinn, hätte er es höchstwahrscheinlich zuerst über die Suchfunktion gesucht.

Kategorien enthalten oft viele Produkte, weshalb sie schwer zu navigieren sind. Viele Kunden suchen jedoch nach den gleichen wenigen Produkten innerhalb der Kategorien.

Diese ausgewählten Produkte sind in der Regel für jeden Kunden die gleichen und gehören höchstwahrscheinlich zu den Bestsellern. Bestseller vermitteln Kunden ein Gefühl von Sicherheit – wenn das Produkt bei anderen beliebt war, gibt das eine Art Wertnachweis.

Indem Sie diese Artikel an den Anfang der Kategorieseite 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 Conversion erhöhen.

Vollständige Kategorieseite #

Clerk kann verwendet werden, um alle Ergebnisse auf einer Kategorieseite zu rendern, was ein intelligentes Sortieren der Ergebnisse ermöglicht. Außerdem kann Merchandising eingesetzt werden, um ein hohes Maß an Kontrolle darüber zu haben, welche Produkte priorisiert werden.

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

Verwendung der API #

Unsere category recommendations Endpunkte funktionieren genau wie unser search page Endpunkt. Der einzige Unterschied besteht darin, dass diese Endpunkte auf eine Kategorie-ID und nicht auf eine Suchanfrage angewiesen sind.

Deshalb können sie verwendet werden, um alle Produkte auf Kategorieseiten anzuzeigen, indem jegliche vorhandene Webshop-Logik zur Produktabfrage 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 die Produktdaten einfach von Clerk abfragen und die Anzeige weiterhin mit dem Code Ihres Webshops vornehmen.

Folgende Endpunkte stehen zur Verfügung:

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

Welcher Endpunkt am besten ist, hängt von der Art des Geschäfts ab.

Viele Fashion-Shops mit häufig wechselndem Sortiment profitieren am meisten von trendigen Produkten.

Shops mit Katalogen, bei denen Kunden häufig die gleichen Artikel mehrfach kaufen, wie Nahrungsergänzungsmittel- oder Lebensmittelgeschäfte, sollten in der Regel Bestseller verwenden.

API-Endpoint-Parameter #

Hier ist eine Übersicht darüber, welche Funktion jedes Argument beim Aufruf eines Kategorie-Endpunkts hat.

Ergebnisse filtern #

• Wenn Sie facets in der Anfrage senden, liefert Clerk eine Liste möglicher Filteroptionen für das betreffende Ergebnis-Set zurück.
  • Z.B. wenn das günstigste Produkt in der Kategorie 10 € und das teuerste 500 € kostet, kann die niedrigste Preisspanne 10-50 € und die höchste 450+ € sein oder ähnlich.
  • Eine Kategorie könnte 10 verschiedene Marken und eine andere nur 3 Marken als Facetten haben.
• Wenn der Besucher eine Option auswählt, sollte diese in einen Filter konvertiert werden, der bei der nächsten API-Anfrage gesendet wird.
  • Z.B. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Wir empfehlen, eine grafische Oberfläche zu erstellen, die Clerks Facets als auswählbare Optionen darstellt, da dies automatisch nachvollzieht, welche Optionen in jeder Kategorie verfügbar sind.
• Es kann auch mit einer bestehenden Filter-Oberfläche umgesetzt werden, solange die Auswahl des Besuchers in einen Filter-String konvertiert werden kann.

Mehr Informationen zu Filtern in unserer Entwicklerdokumentation.

Ergebnisse paginieren #

• Die Parameter limit und offset werden gemeinsam für das Paging genutzt.
• limit bestimmt, wie viele Produkte pro Anfrage zurückgegeben werden.
• offset steuert den Startpunkt in der vollständigen Ergebnisliste.
• Der erste Aufruf sollte offset: 0 haben, 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 count-Schlüssel in der API-Antwort enthält die Gesamtanzahl der Produkte in der Kategorie, unabhängig vom limit. Er kann verwendet werden, um die Seitenzahl zu berechnen, indem man count durch limit teilt und aufrundet, z.B.: pages = ceil(count / limit)

Komplette API-Anfrage & -Antwort Beispiel #

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

Es ist konfiguriert für:

• Produkte aus der Kategorie mit der ID 13
• 50 Produkte auf der zweiten Seite mittels limit und offset von 50
• Produkte vom Typ “Star Wars” per Filter
• Sortierung nach Preis aufsteigend mittels orderby price mit aufsteigender Reihenfolge
• Facets 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 das Aufrufen der Clerk.io API, Tracking und Styling einfach macht.

Übersicht #

Mit Clerk.js kann eine komplette Kategorie-Seite direkt im Frontend mittels HTML-Snippets gerendert werden.

• Binden Sie das Clerk.js-Skript in Ihren Header ein, um Embed-Codes auf Ihrer Website nutzen zu können.
• Clerk.js durchsucht die Website nach Elementen mit der clerk Klasse und liest deren data- Parameter aus.
• Verwenden Sie die Liquid Template-Sprache in einem Code-Design, um HTML und Styling des Produktgrids zu steuern.
• Clerk.js kann die Paginierung ohne zusätzlichen Code übernehmen, indem mehr Ergebnisse geladen werden, wenn der Besucher einen Button klickt, mittels folgender Funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Facets-HTML wird erzeugt, indem der Embed-Code mit den gewünschten Facets, deren Übersetzungen und einem Ziel-HTML-Block für die Einbindung konfiguriert wird. Mehr über Clerk.js Facets.

Bevor Sie den Code in Ihren Webshop einfügen, erstellen Sie das Standarddesign Kategorie-Seite und das Element in my.clerk.io.

Design erstellen #

Für eine Standard-Kategorieseite erstellen Sie das Standarddesign Kategorie-Seite:

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

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

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 aus.
4. Wählen Sie das unter Design erstellen angelegte Design aus.
5. Wenn das ausgewählte Design Facets unterstützt, aktivieren Sie Facets, setzen Sie die Limits wie bei Omnisearch und wählen Sie die Facets, die angezeigt werden sollen.
6. Setzen Sie das Produktlimit auf mindestens 40.
7. Speichern Sie das Element.

Auf der Website einbinden #

Es gibt zwei Wege, das Kategorie-Element in Ihre Website einzubinden. Injection ist die einfachste Variante. Für mehr Kontrolle darüber, wo Filter und Produktgrid erscheinen, nutzen Sie Embedded Code und folgen der individuellen Implementierung unten.

Injection #

Öffnen Sie den Tab Insert into website im Element und wählen Sie Using injection.

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

Wenn das ausgewählte Design Facets unterstützt, enthält das injizierte Element diese automatisch.

Mehr Informationen zum Verwenden 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 im ersten Element, die Produkte im Embed-Code angezeigt.

1. Öffnen Sie den Tab Insert into website im Element und kopieren Sie den Embed-Code.
2. Fügen Sie im Kategorie-Seiten-Template ein leeres <div> ein, an der Stelle, an der die Filter erscheinen sollen. Vergeben Sie die ID clerk-category-filters.
3. Setzen Sie den kopierten Embed-Code an die Stelle, an der das Produktgrid erscheinen soll. Vergeben Sie für das äußere Element die ID clerk-category-products und lassen Sie die clerk-Klasse bestehen.
4. Ersetzen Sie INSERT_CATEGORY_ID durch die ID der aktuell angezeigten Kategorie. Ihr Webshop muss für die jeweilige Kategorie-Seite die korrekte ID ausgeben.
5. Setzen Sie data-template auf den Wert, der zur ID des erstellten Elements passt. Bei Unsicherheit, öffnen Sie das Element und prüfen oder kopieren Sie unter Insert into website > Using embedded code den richtigen Wert.
6. Achten Sie darauf, dass data-facets-target auf das Filter-Element zeigt: #clerk-category-filters.
7. Geben Sie in data-facets-attributes die Produktattribute an, nach denen Besucher filtern können sollen. Das Beispiel enthält Preis, Kategorien und Marke; ersetzen Sie diese durch Attribute, die in Ihrem Katalog vorkommen.
8. Verwenden Sie data-facets-titles, um die sichtbaren Labels für jedes Attribut anzugeben.
9. Setzen Sie data-facets-in-url="true", wenn gewählte Filter zur URL hinzugefügt werden sollen, sodass Besucher eine gefilterte Kategorieseite teilen oder erneut aufrufen können.

Sofern Clerk.js noch nicht in Ihrem Webshop installiert ist, fügen Sie das Clerk.js-Skript in Ihre Seite ein, bevor Sie den Embed-Code verwenden. Der Wert von data-category, der data-facets-target-Selektor und die beiden Kategorieseiten-IDs müssen mit den Werten in Ihrem Template übereinstimmen.

Code-Design #

Wenn Sie unter Grid Design ein leeres Code-Design erstellt haben, fügen Sie folgenden HTML-Code in das HTML-Panel ein. Es bietet ein Produktgrid, ein Sortier-Dropdown und einen Button “Mehr laden”. Das Sortier-Dropdown aktualisiert die orderby- und order-Parameter des Elements, ohne die Kategorie-Seite zu verlassen. Der order-Wert muss entweder asc oder desc sein.

<div class="clerk-category-page">
  <div class="clerk-category-toolbar">
    <label for="clerk-category-sort-{{ content.id }}">Sort by</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">Price: Low to high</option>
      <option value="price:desc">Price: High to low</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);">
      Load more products
    </button>
  {% endif %}
</div>

Das Design steuert ausschließlich das Produktgrid. Fügen Sie den Filter-Container und den Element-Embed-Code wie unten gezeigt ins Kategorie-Seiten-Template ein. Mehr dazu unter Clerk.js-Elemente rendern und aktualisieren.

Embed-Code #

Nachfolgend ein separates Beispiel für das Kategorie-Seiten-Template. 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 des Produktgrids, 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 mittels ausgewähltem Element und Design angezeigt. -->
<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": "Price", "categories": "Categories", "brand": "Brand"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for ">
</span>

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