Beliebig (Webshop)

Angestellter.js

Überblick #

Clerk.js ist eine JavaScript-Bibliothek, die die Integration unserer API mit Ihrem Frontend vereinfacht. Die Verwendung von Clerk.js bietet drei Vorteile:

  • Sie ist robust, da sie asynchron geladen wird. Das bedeutet, dass der Rest der Seite vor dem Laden nicht von einer API-Antwort abhängig ist.
  • Es ist oft schneller, da Ihr Server mit dem Rendering der Seite parallel zu den Clerk.js-Aufrufen und dem Rendering der Ergebnisse beginnen kann.
  • Besucher- und Klick-Tracking wird automatisch für alle von Clerk angezeigten Ergebnisse durchgeführt. Dies erfordert keine Cookies, da wir einen Hash-Wert der IP-Adresse und des User-Agents des Besuchers generieren, kombiniert mit einem einzigartigen Speichersalz, das alle 30 Tage rotiert.

Clerk.js wird mit einem leichtgewichtigen Tracking-Skript geladen, das in den Header der Website eingefügt wird.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'insert_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Dieses Skript lädt die Bibliothek von unserem CDN und ermöglicht Ihnen den Zugriff auf ihre Funktionen über das Objekt “Clerk”. Das Skript konfiguriert Clerk.js mit dem API-Schlüssel, sodass es bereits weiß, für welchen Store es API-Aufrufe tätigt.

Wenn die Seite geladen wird, durchsucht Clerk.js sie nach allen Snippets mit der Klasse “clerk “.

Es verwendet dann die Attribute aus dem Snippet, um einen API-Aufruf zu erstellen, während es den API-Schlüssel aus der Konfiguration im Initialisierungsskript erhält.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

Die visuelle Darstellung erfolgt über das Design, auf das auch das Snippet verweist.

Clerk.js verwendet Liquid-Designs, die von Shopify bekannt sind, um HTML mit den von der API zurückgegebenen Daten zu rendern. Diese sollten als Skripte formatiert werden, mit einer ID, die Sie in “data-template” Ihres Snippets referenzieren können.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Search result for {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Buy Now</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Load More Results</a>
</script>

Snippets können auch so vereinfacht werden, dass sie nur einen Verweis auf einen Inhalt innerhalb von my.clerk.io enthalten.

Designs werden dann wie im Frontend mit einem visuellen Editor oder mit Liquid HTML-Code bearbeitet.

Bei diesem Ansatz wird der größte Teil der Konfiguration auf benutzerfreundliche Weise über das Verwaltungspanel vorgenommen. Ihre Snippets müssen nur die Klasse “clerk “, alle seitenbezogenen Informationen wie Produkt-IDs und einen Verweis auf die ID eines Inhaltsblocks in “data-template “ enthalten.

<span class="clerk"
     data-template="@product-page-alternatives"
     data-products="[12352]">
</span>
Screenshot 2023-06-13 at 11.49.01

Konfiguration #

Clerk.js lässt eine Vielzahl von Konfigurationen zu.

Wie bereits erwähnt, können Sie, wenn Sie es vorziehen, Sitzungs-IDs manuell zu verwalten, den Besucher-Parameter konfigurieren, den Clerk in API-Aufrufen verwendet. Alternativ können Sie die Sitzungsverfolgung auch ganz abschalten, indem Sie visitor auf null setzen.

// Custom visitor ID
Clerk('config', {
  visitor: 'ABC123'
});

// Disabling visitor tracking
Clerk('config', {
  visitor: null
});

Sie können Formatters und Globals zu Ihrem Designbereich hinzufügen.

Formatierungen werden verwendet, um Attribute zu beeinflussen oder zu ändern. Sie möchten z. B. nur die ersten 40 Zeichen einer Beschreibung anzeigen oder einen bestimmten Rabattprozentsatz auf der Grundlage des eingeloggten Kundentyps berechnen.

Globals sind für Frontend-Daten gedacht, auf die Sie in Designs zugreifen möchten. Dies könnte unter anderem der Restbetrag sein, der für einen kostenlosen Versand benötigt wird, der Name eines angemeldeten Kunden, ein Währungssymbol oder ein Umrechnungskurs.

// Config
<script>
Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});
</script>

// Use in Design

<div class="clerk-product-name">{{ product.name | uppercase }}</div>
<div class="clerk-product-price"> {{ currency_symbol }}{{ product.price }}</div>

Automatische Verfolgung von Besucher-E-Mails #

Clerk.js kann automatisch **E-Mails in der Browsing-Session des Kunden sammeln, um sie für **Warenkorb-**E-Mails und andere E-Mail-Kampagnen zu verwenden.

Konfigurieren Sie einfach Clerk.js mit collect_email: true wie hier gezeigt:

HTML

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

UI-Kit #

Clerk.js enthält eine Reihe von UI-Tools für wichtige Elemente wie das search dropdown und facets auf einer Suchseite.

Mit dem Such-Dropdown-Kit können Sie zum Beispiel ein Snippet erstellen, das das Eingabefeld über einen CSS-Selektor überwacht und ein Dropdown mit Inhalten anzeigt, die der Suche des Besuchers entsprechen.

<span
  class="clerk"

  data-api="search/predictive"
  data-limit="6"

  data-instant-search="INSERT_CSS_SELECTORS_HERE">

  <dl class="product-search-result-list">
    <dt>Products matching <i>{{ query }}</i></dt>

    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <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>
      </dd>
    {% endfor %}
  </dl>
</span>

Mit Facets können Sie Ihr bestehendes Snippet für die Suchseite erweitern, um Filter für Produkte auf der Suchseite einzufügen.

<div id="clerk-search-filters"></div>

<span
  class="clerk"

  data-template="@search-page"
  data-query="shoes"

  data-facets-target="#clerk-search-filters"
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "YOUR-PRICE-LABEL-TRANSLATION-GOES-HERE", "categories": "YOUR-CATEGORIES-LABEL-TRANSLATION-GOES-HERE", "brand": "YOUR-BRAND-LABEL-TRANSLATION-GOES-HERE"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for "
  data-facets-design="133995">
</span>

Ereignisse #

Bei der Erstellung individuellerer Setups, z. B. für B2B-Unternehmen, müssen Sie häufig auf die Ergebnisse des Sachbearbeiters reagieren oder diese ändern, bevor Sie sie wiedergeben.

Hierfür sind Events nützlich.

Mit Ereignissen können Sie Ereignis-Listener einrichten, die zu bestimmten Zeitpunkten vor, während oder nach dem Rendern der Ergebnisse von Clerk.js Code ausführen. Ein häufiger Anwendungsfall ist, wenn Sie prüfen müssen, welcher Benutzer angemeldet ist und bestimmte Preise für seine Kundengruppe abrufen oder Produkte entfernen müssen, die er nicht sehen darf.

Beispielsweise kann ein Ereignis unmittelbar nach der Antwort der Clerk-API ausgeführt werden, so dass Sie Ihre Preisdatenbank mit der ID des Kunden und den von Clerk zurückgegebenen Produkten aufrufen können, um die richtigen Preise abzurufen, bevor Clerk.js die Ergebnisse rendert.

Clerk("on", "response", function(content, data) {
    let products = data['product_data'];
    const product_ids = data['result'];
    const customer_prices = getUniquePrices(customer_group, product_ids); // {"27746": 310.25, "26994": 124.50}
    products.forEach(product =>
      product['price'] = customer_prices[product['id']]) // Add customer price based on product ID;
  })