Jeder (Webshop)

FAQ

Antworten auf häufig gestellte Fragen zu benutzerdefinierten Integrationen

Haben Sie Probleme mit Ihrer individuellen Integration? Dieses FAQ behandelt die häufigsten Probleme und deren Lösungen – von Single-Page-Apps bis zum Tracking von Verkäufen.

Single-Page-Apps #

Diese werden auch Progressive Web Apps (PWA) genannt und laden die Seite im Allgemeinen als einzelne Seite, anstatt einzelne Seiten wie gewohnt zu laden.

Wenn eine Seite das erste Mal geladen wird, feuert die Clerk.js-Bibliothek automatisch eine Funktion, um alle Element-Blöcke auf dieser Seite zu rendern.

Für Single-Page-Apps, die Frameworks wie vue.js oder next.js nutzen, werden die Seiten jedoch mit JavaScript gerendert, statt durch einen Standard-Page-Load.

Daher müssen Sie das Rendering mit Clerk.js steuern, damit es zur Art des Seitenladens in Ihrer App passt.

Clerk.js einbinden #

Clerk.js muss nur einmal geladen werden, wenn die Seite erstmals geladen wird.

Danach steht die Bibliothek während der gesamten Session zur Verfügung.

Binden Sie es direkt vor dem </head> in Ihrem HTML ein:

<!-- 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_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Rendering steuern #

Standardmäßig rendert Clerk.js jedes Element mit der Klasse clerk, unabhängig davon, ob es beim ersten Laden der Seite oder bei DOM-Änderungen eingefügt wurde.

Sie können den Zeitpunkt steuern, indem Sie das Element einfügen, wenn es gerendert werden soll.

Alternativ können Sie das Rendering mit der Funktion Clerk("content", "SELECTOR") steuern.

Jedes Mal, wenn eine Seite geladen wird, führen Sie diese Schritte in der Reihenfolge aus:

Fügen Sie das Clerk-Snippet mit einem eindeutigen Selektor ins HTML ein, auf den Sie zugreifen können.
Führen Sie Clerk("content", "SELECTOR") aus, um das Snippet zu rendern.

Wenn der Besucher die Seite verlässt, zerstören Sie das Snippet und rendern Sie es erneut, falls der Besucher zur selben Seite zurückkehrt.

Das stellt sicher, dass Clerk.js das Snippet nicht als bereits gerendert betrachtet und es daher möglicherweise nicht anzeigt.

Beispiel:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js kann auch so konfiguriert werden, dass Elemente automatisch initialisiert werden, nachdem Sie sie das erste Mal mit Ihren eigenen Selektoren gerendert haben.

Auswirkung auf Pagespeed #

Das Hinzufügen eines externen Tools wie Clerk.js erhöht zwar die Ladezeit Ihrer Seite, aber es ist vernachlässigbar im Vergleich zu den zusätzlich erzielten Conversions.

Unten sehen Sie, wie sich dies auf die Performance Ihrer Seite auswirkt.

Performance #

Die Clerk.js-Bibliothek ist nur 37,5kb groß und lädt somit sehr schnell.

Außerdem werden Elemente asynchron geladen, was bedeutet, dass der Rest der Seite lädt, während Clerk.js den Inhalt rendert.

Ein Anstieg der Ladezeit einer Seite entsteht meist dadurch, dass mehr Bilder geladen werden als vorher, da Clerks Suchergebnisse und Empfehlungen am besten funktionieren, wenn sie ansprechend dargestellt werden.

Um die zusätzliche Ladezeit zu minimieren, empfehlen wir Bilder im webp-Format zu verwenden, die genau die Auflösung haben, die sie in den Clerk-Elementen benötigen.

Wenn Bilder in Empfehlungen beispielsweise eine Auflösung von 400x400px im Desktop-View haben, liefern Sie Bilder mit maximal 420x420px oder ähnlich aus.

Google Page Speed #

Wenn Sie Google Page Speed Insights oder ein ähnliches Tool zur Analyse der Seitenperformance nutzen, sehen Sie möglicherweise Clerk.js unter Leverage browser caching. gelistet.

Das Ziel von Clerk.js ist es, das Einfügen von Clerk-Ergebnissen in jede beliebige Website extrem einfach zu machen.

Clerk.js enthält viele Funktionen zur Handhabung von Tracking und UI-Komponenten wie Instant Search, Slider, Popups und mehr.

Wenn wir neue UI-Features hinzufügen oder bestehende verbessern, sind sie in Clerk.js enthalten und müssen für die Nutzung von Endanwendern heruntergeladen werden.

Eine Cache-Laufzeit von 60 Minuten bedeutet, dass neue Features spätestens nach 60 Minuten allen zur Verfügung stehen.

Je länger die Cache-Zeit, desto länger dauert es bis jeder Zugriff auf neue Funktionen hat.

Wichtig ist, dass Endnutzer Clerk.js nur einmal herunterladen, wenn neue Features vorhanden sind.

Die Cache-Ablaufzeit von 60 Minuten bedeutet nur, dass der Browser des Endnutzers alle 60 Minuten bei Clerk nachfragt.

Wenn an Clerk.js nichts geändert wurde, wird nichts heruntergeladen.

Die Cache-Ablaufzeit von 60 Minuten ist daher ein Kompromiss zwischen der Minimierung von Webanfragen und der schnellen Sichtbarkeit von neuen Funktionen und Verbesserungen.

Die meisten Sitzungen sind kürzer als 60 Minuten, daher erfolgt die Anfrage meist nur einmal pro Sitzung.

Wie im Screenshot zu sehen, handelt es sich um eine gängige Praxis, die (genauso wie Clerk) auch von Google Analytics, Facebook, Trustpilot und vielen weiteren verwendet wird.

CLS-Auswirkungen #

Cumulative Layout Shift (CLS) kann sich negativ auf SEO und Nutzererlebnis auswirken, wenn dynamisch eingefügter Inhalt Seiten-Elemente verschiebt.

In manchen Fällen - neben anderen Faktoren - kann auch Clerk zum CLS-Score beitragen.

Mehr zu CLS finden Sie hier.

Folgen Sie dieser Anleitung nur, wenn Ihr CLS-Score über 0,2 liegt und Clerk-Elemente above the fold platziert sind.

Um ein Verschieben von Inhalten zu verhindern, braucht es einen Platzhalter für Clerk-Empfehlungen, bevor Clerk.js diese einfügt.

Dafür fügen Sie eine Mindesthöhe basierend auf der zu erwartenden Inhaltshöhe ein.

Beispiel:

.clerk-slider-wrapper {
    min-height: 300px; /* Anpassen je nach zu erwartender Inhaltshöhe */
    width: 100%;
}

API-Aufrufe durchführen #

Sie können Clerk.js verwenden, um API-Aufrufe durchzuführen – nutzen Sie dazu die eingebaute Funktion Clerk("call").

Diese Funktion nimmt 3 Argumente entgegen:

Einen API-Endpoint
Ein JSON-Dictionary mit Parametern
Eine Callback-Funktion, um die Antwort zu verarbeiten

Requests #

Unten ein Beispiel-Script, das die 10 beliebtesten Produkte abfragt und die Antwort in der Konsole ausgibt.

Die Antwort enthält ein JavaScript-Objekt mit dem Status des API-Aufrufs und dem Ergebnis.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Home Page / Bestsellers"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Response #

__clerk_cb_1(
  {
    "status":"ok",
    "count":72,
    "facets":null,
    "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callbacks #

Bei API-Aufrufen können Sie Callback-Funktionen verwenden, um die Antwort wie gewünscht zu verarbeiten.

Die Funktionen erhalten response als Argument, das alle von der API zurückgegebenen Daten enthält.

Unten ein Beispiel, das eine Liste von HTML-Elementen erstellt, die auf zu “men” passende Kategorien verlinken.

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

„In den Warenkorb“-Buttons #

Diese Buttons funktionieren je nach Plattform unterschiedlich und ihre Funktion hängt oft von verwendeten Plugins ab.

Da die Designs von Clerk aus HTML & CSS bestehen, können Sie diese Funktionalität meist ergänzen, wenn Sie wissen, wie es auf Ihrer Seite funktioniert.

Allgemeines Vorgehen #

Einige „In den Warenkorb“-Buttons benötigen JavaScript, damit sie funktionieren.

In diesen Fällen können Sie die Funktionalität in die bestehende Clerk-cart-Methode integrieren.

Wie das geht, finden Sie in unseren Developer Docs hier.

Untersuchen Sie den „In den Warenkorb“-Button, um den zugehörigen Code zu identifizieren, z. B. auf einer Kategorieseite.

Dabei handelt es sich in der Regel um ein <div>- oder ein button-Element.

Kopieren Sie den kompletten HTML-Code des Buttons.

Fügen Sie diesen Code in Ihr Design ein.

Nun müssen Sie die Variablen im Code identifizieren.

Meist muss man herausfinden, wo im Code Folgendes verwendet wird:

Produkt-ID
Produktanzahl

Ersetzen Sie die Werte für die Produkt-ID durch die Liquid-Variablen für diese Werte.

Die ID ist immer {{ product.id }} und die Menge kann variieren, je nachdem, wie Sie die Daten senden.

Im Beispiel wäre es {{ product.qty }}.

Fügen Sie Ihren Code in das HTML des Designs ein und testen Sie, ob er funktioniert.

Beispiel #

Der folgende „In den Warenkorb“-Button ist ein <div> mit der Klasse button-container:

Die Menge wird nach /cart?add= und die Produkt-ID nach &id_product= im Link gefunden.

Die Produkt-ID ist auch in data-id-product und die Produktanzahl in .data-minimal_quantity referenziert.

Diese Werte sollten im Design durch Liquid-Tags ersetzt werden, damit im HTML-Output die passenden Produkt-IDs und Stückzahlen genutzt werden.

Mit diesen Änderungen sieht der endgültige Button so aus:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Add to Cart" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Konsolenfehler #

Clerk.js protokolliert viele Fehler in die Konsole, mit denen Sie Probleme debuggen können.

Durch Anklicken des Fehlerlinks erhalten Sie weitere Informationen, die Ihnen beim Debuggen helfen oder dem Support zur Verfügung gestellt werden können.

Im Folgenden finden Sie eine Liste der häufigsten Fehler.

Unknown content #

Dieser Fehler erscheint, wenn das von Ihnen eingefügte Snippet auf ein Element verweist, das im data-template-Attribut nicht existiert.

Überprüfen Sie, ob der Name im Einbettungscode mit einem von Ihnen in my.clerk.io angelegten Element-Block übereinstimmt.

Sie können bei jedem Element auf Element bearbeiten klicken, um zu sehen, wie der Verweis lauten muss.

Invalid API endpoint #

Dieser Fehler tritt auf, falls Sie die Klasse clerk an einer anderen Stelle im HTML verwendet haben.

Diese Klasse ist für unsere Snippets reserviert, da Clerk.js diese Klasse nutzt, um rendertaugliche Elemente zu erkennen.

Vergeben Sie stattdessen z. B. die Klasse clerk-product.

Invalid product argument #

Dieser Fehler bedeutet, dass die angegebene ID für ein Produkt einen falschen Typ oder Syntax hat.

Zum Beispiel: Wenn Ihre Produkt-IDs Integer sind, müssen sie dies auch im Snippet-Code sein.

Denken Sie auch an die Klammern um die ID, um daraus eine Liste zu machen.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

Invalid category argument #

Das bedeutet, dass die angegebene ID für eine Kategorie einen falschen Typ oder Syntax hat.

Zumeist geschieht dies, wenn der Platzhalter in Ihrem Kategorie-Snippet nicht durch eine echte ID ersetzt wurde:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

Der eigentliche Code sollte die echte ID enthalten:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Wenn Sie den Snippet manuell kopiert haben, wählen Sie im Choose your platform-Dropdown vor dem Kopieren des Snippets Ihr Shopsystem aus.

Dadurch wird automatisch die Logik Ihrer Plattform übernommen, um die korrekte Kategorie-ID zu verwenden.

Falls Ihre Plattform nicht gelistet ist, müssen Sie manuell programmieren, wie die Kategorie-ID entsprechend Ihrer Shop-Logik ausgewählt werden soll.

Incorrect API key #

Wenn Sie keine gültige Public-API-Key für Clerk eingetragen haben, erscheint dieser Fehler.

Um es zu beheben: Loggen Sie sich in my.clerk.io ein, gehen Sie zu Developers > API Keys.

Hier finden Sie den Public API Key, den Sie dann direkt in Ihrem Clerk.js-Tracking-Script oder im Integrations-Setup abhängig von Ihrer Plattform eintragen können.

Iubenda-Blockierung #

Wenn Sie für die Cookie-Einwilligung iubenda mit aktiviertem Automatic blocking nutzen, kann es sein, dass Besucher bei Cookie-Ablehnung Clerk.io-Skripte oder Requests blockieren.

Dies führt meist zu zwei Problemen:

Der sale-Request wird nie gesendet, Bestellungen werden also nicht getrackt oder nicht zugeordnet.
Clerk.io-Elemente erscheinen überhaupt nicht, oder Clerk.js protokolliert einen Konsolenfehler wegen mehrmaligem Laden (weil iubenda Skripte umschreibt oder verzögert ausführt).

Domains auf Allowlist setzen #

Um dies zu beheben, nehmen Sie Clerk.io in die iubenda-Whitelist auf, sodass deren Skripte und Requests nicht mehr blockiert werden.

Fügen Sie mindestens diese Domains in die Allowlist von iubenda ein:

cdn.clerk.io (Clerk.js)
api.clerk.io (Tracking- und Verkaufs-Requests)

Die genauen UI-Bezeichnungen können variieren, diese Einstellung ist aber meist in den Cookie Solution-Einstellungen Ihres Projekts unter Automatische Blockierung zu finden.

Siehe auch iubendas eigenen Artikel zu Was tun, wenn der Automatische Blockierungsmodus zu viel blockiert.

Änderung überprüfen #

Nachdem Sie die iubenda-Einstellungen aktualisiert haben:

Shop laden, Cookies ablehnen und die Browserkonsole öffnen.
Prüfen, ob Clerk.js geladen ist — typeof Clerk sollte nicht "undefined" zurückgeben.
Führen Sie Clerk("debug") aus, machen Sie eine Testbestellung und überprüfen Sie, ob ein sale-Request an Clerk.io geschickt wird und status: "ok" zurückgibt.

POS-/ERP-Verkaufsdaten #

Für einige Onlineshops ist es sinnvoll, Verkaufsdaten aus anderen Systemen hochzuladen als dem eigentlichen Webshop.

Beispielsweise, wenn Sie das Algorithmus-Optimierung basierend auf Umsätzen aus einem Ladengeschäft oder B2B-Store möchten.

Clerk unterscheidet nicht zwischen Bestellungen aus verschiedenen Quellen – solange Sie eine ID, einen Zeitstempel und eine Liste der gekauften Produkte übermitteln, können diese bei Clerk hochgeladen werden.

Empfohlen wird die Nutzung der CRUD API, da sie die Aufgabe komplett automatisiert.

Mit solchen API-Calls senden Sie Bestelldaten direkt an Ihren Clerk-Store.

Erstellen Sie einfach einen POST-Aufruf an den /orders-Endpoint im ERP-System oder Webshop, führen Sie den Job zyklisch aus, z. B. monatlich, und Sie können Offline-Bestellungen nutzen, um Online-Empfehlungen und Suchergebnisse zu verbessern.

Alternativ können Sie auch eine CSV-Datei manuell hochladen, ohne Code-Aufwand.

Mehr zu CSV-Dateien finden Sie hier.

Währungsumrechnung #

Es gibt verschiedene Wege, wie Sie mit Währungsumrechnung in Clerk arbeiten können.

Unten werden die grundlegenden Schritte beschrieben.

Währungen übersetzen #

Wenn Besucher Google Translate auf Ihrem Shop nutzen, können Preiswerte so übersetzt werden, dass Formatierung oder Währungsanzeige verloren gehen.

Um dies zu verhindern, schließen Sie Preisausgaben mit Elementen von der Übersetzung aus.

Empfohlenes Markup #

Verwenden Sie sowohl translate="no" als auch die CSS-Klasse notranslate am Preis-Element:

<span class="clerk-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Wenn Sie Listen- und Verkaufspreis anzeigen, nutzen Sie für jeden Preis dasselbe Muster:

<span class="clerk-old-price notranslate" translate="no">
  {{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Anwenden #

In Ihrem Clerk Design an allen Stellen, an denen Preise ausgegeben werden.
In allen eigenen HTML-Wrappern für Preisausgaben.

Dadurch bleibt der Rest der Seite übersetzbar, während die Preis- und Währungsformatierung erhalten bleibt.

Preisobjekte senden #

Clerk muss die Preise jedes Produkts in den verschiedenen Währungen kennen.

Am einfachsten ist es, diese als String-kodiertes JSON-Objekt formatierter Preise, mit der ISO der Währung als Key, im Data Feed zu senden.

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // String-encoded JSON examples
    "prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
    "list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // String-encoded JSON example
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Formatter erstellen #

Mit Clerk.js können Sie JavaScript-Funktionen definieren, die in Ihren Designs genutzt werden.

Hier können Sie eine Funktion definieren, die Ihr Preis-Objekt als Argument erhält und basierend auf der gewählten Währung im Frontend den Preis zurückliefert.

Ersetzen Sie currency durch die jeweils aktuell im Frontend gewählte Währung.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Formatter nutzen #

Nach der Definition können Sie den Formatter in Ihrem Design wie folgt verwenden:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Kundenspezifische Preise #

Clerk unterstützt die Anzeige unterschiedlicher Preise je nach eingeloggtem Kunden, entweder durch Abruf individueller Preise beim Rendering oder indem Gruppenpreise bereits in den Produktdaten gespeichert werden.

Dies wird ausführlich im Artikel Customer Pricing beschrieben.

HTTP-Authentifizierung #

HTTP-Authentifizierung wird oft bei Staging-Seiten genutzt, um ungewollte Besucher zu verhindern.

Dies blockiert in vielen Fällen auch den Clerk-Importer und zeigt typischerweise einen 401 Unauthorized-Fehler im Synchronisierungs-Log.

Sie können das beheben, indem Sie die Auth-Zugangsdaten in die Import-URL aufnehmen.

In my.clerk.io > Data > Configuration aktualisieren Sie Ihre Import-URL wie folgt:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Keine getrackten Bestellungen #

Eine vollständige Anleitung zum Thema Sales-Tracking, Einrichtung und Debugging finden Sie im Artikel Sales Tracking.

Kein Clerk-Einfluss #

Wenn Bestellungen getrackt werden, aber keiner als von Clerk beeinflusst erscheint, siehe den Abschnitt No Clerk Impact im Sales-Tracking-Artikel.

Slider bei wenigen Produkten ausblenden #

Wenn eine Kategorie sehr wenige Produkte enthält, kann ein Slider leer oder wiederholt wirken.

Es gibt zwei Wege, dies zu handhaben:

Clerk-Design-Bedingung #

Nutzen Sie eine If-Bedingung um das Slider-Markup nur anzuzeigen, wenn ausreichend Produkte zurückgeliefert werden.

{% if products.length >= 6 %}
  <div class="clerk-slider">
    {% for product in products %}
      <!-- product card -->
    {% endfor %}
  </div>
{% endif %}

Das ist schnell umgesetzt, aber es wird trotzdem ein Clerk-API-Call gemacht, auch wenn der Slider nicht angezeigt wird.

Serverseitige Bedingung #

Wenn Ihre Plattform bereits die Anzahl der Kategorie-Produkte kennt, entscheiden Sie direkt im Template, ob Sie das Clerk-Snippet überhaupt ausgeben.

{% if category.product_count >= 6 %}
  <span class="clerk" data-template="@category-page-slider"></span>
{% endif %}

Das ist der bevorzugte Weg, weil so der Slider nur bei ausreichender Produktanzahl initialisiert wird und das Verhalten zur Shop-eigenen Logik passt.

Upgrade auf Clerk.js 2 #

Clerk.js 2 ist eine schnellere und flexiblere Version unserer JavaScript-Bibliothek.

Sie erleichtert die Installation von Clerk auf jedem Webshop.

Da die beiden Versionen leicht unterschiedlich arbeiten, müssen Sie diese Schritte befolgen, um erfolgreich umzusteigen.

Die zwei Hauptunterschiede von Clerk.js 2 sind:

Die Designs in my.clerk.io nutzen Liquid und können einfach mit dem Design-Editor erstellt werden.
Das Skript muss direkt vor dem </head>-Tag Ihres Shop-Templates eingefügt werden.

Designs erstellen #

Da Clerk.js 2 einen anderen Ansatz für Designs nutzt, müssen Sie neue Designs anlegen.

Sie können Ihre Clerk.js 2 Designs entweder komplett neu im Design Editor erstellen oder Ihr bisheriges Design-Code in Liquid umschreiben – wie im nächsten Abschnitt beschrieben.

Design-Editor-Variante #

Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
Wählen Sie einen Design-Typ außer Blank und geben Sie einen Namen. Wir empfehlen, “V2” hinzuzufügen, um die Clerk.js 2-Variante zu kennzeichnen.
Im Design-Editor können Sie bestehende Elemente wie Name, Bild, Button, etc. bearbeiten oder neue hinzufügen.
Klicken Sie auf Publish Design und gehen Sie zu Schritt 2 weiter unten.
Gehen Sie zu Recommendations/Search > Elements und ordnen Sie das neue Design Ihrem Clerk-Element zu, dann drücken Sie Update Element.
Jetzt sind die Designs bis zum nächsten Schritt im Webshop noch nicht sichtbar, bis Clerk.js 2 ebenfalls eingebunden wurde.

Designs konvertieren #

Weil Clerk.js 2 die flexiblere Template-Sprache Liquid verwendet, müssen Designs in diese Syntax konvertiert werden.

Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
Wählen Sie Blank > Code und geben Sie einen Namen. Wir empfehlen, “V2” hinzuzufügen.
Klicken Sie auf Create Design.
Sie erhalten ein leeres Design mit Produkt-HTML + CSS.
Öffnen Sie die Design-Übersicht und klicken Sie Edit Design am Clerk.js 1 Design, am besten in einem neuen Tab, zum einfachen Copy+Paste.
Übertragen Sie das gesamte Clerk.js 1-Design in das neue Clerk.js 2-Design.
- Es gibt keinen Container Code mehr im neuen Design.
- Das liegt daran, dass Liquid for loops zum Rendern aller Produkte nutzt.
- Fügen Sie Ihr altes Product HTML in die for-Loop, Ihren alten Container Code um das Produkt-HTML herum und kopieren Sie das CSS.
Konvertieren Sie das Design in die Liquid-Syntax. Wichtig: Altes Format war {{ formatter attribute }} – v2 ist {{ product.attribute | formatter }}.
Ersetzen Sie alle Attribute durch das neue Format.
Falls Sie {{#if}} oder {{#is}}-Statements nutzen, wandeln Sie sie so um: {% if product.attribute %} {% else %} {% endif %}.
Löschen Sie id="{{ $id }}" sowie die Klasse :target aus dem Container Code in der Clerk.js 2-Version, da diese nicht mehr unterstützt werden.
Beispiel eines Clerk.js 1-Designs und die vollständig konvertierte Version:

Clerk.js 1 Design #

// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Clerk.js 2 Design #

<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

Mit Update Design speichern.
Gehen Sie zu Recommendations/Search > Elements und weisen Sie dem Elementblock Ihr neues Design zu.
Drücken Sie Update Element. Die Anzeigen sind jetzt vorübergehend noch nicht sichtbar, bis Sie Schritt 2 abgeschlossen haben. Wählen Sie das neue Design für alle zu aktualisierenden Elemente.

Script ersetzen #

Finden Sie das Template-File, das für alle Seiten des Shops geladen wird, und suchen Sie das aktuelle Clerk.js-Script nahe des Seitenendes.
Entfernen Sie das alte Clerk.js-Script. Es sieht z. B. so aus:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Gehen Sie zu my.clerk.io > Developers > Tracking Code. und kopieren Sie das Clerk.js 2-Script.
Fügen Sie diesen Code direkt vor dem </head>-Tag im Template ein und speichern Sie.

Glückwunsch! Sie nutzen nun das verbesserte Clerk.js 2-Setup!

Die komplette Dokumentation zu Clerk.js 2 finden Sie hier.

Umgang mit require.js #

Dieser Abschnitt gilt nur für Clerk.js 1.

In manchen Fällen verhindert Require.js, dass Clerk.js geladen wird - Slider/Suchergebnisse werden dann nicht angezeigt.

Dann erscheint folgender Fehler in der Konsole:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, mit Require.js umzugehen. Beide erfordern Änderungen am Tracking-Script, das Sie am Seitenende eingefügt haben.

In Require.js einbinden #

Am besten binden Sie Clerk als Modul in Require.js ein.

Fügen Sie dazu am Scriptende require(['clerk'], function() {}); ein:

Require.js ignorieren #

Falls das nicht möglich ist, können Sie auch Require.js ignorieren.

Fügen Sie dazu ganz oben im Tracking-Script window.__clerk_ignore_requirejs = true; ein:

Danach ist Require.js kompatibel mit Clerk.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.