FAQ
Haben Sie Probleme mit Ihrer benutzerdefinierten Integration? Diese FAQ behandelt die häufigsten Probleme und deren Lösungen – von Single-Page-Apps bis hin zur Verfolgung von Verkäufen.
Single-page-Apps #
Diese werden auch als Progressive Web Apps (PWA) bezeichnet und laden die Website im Allgemeinen als eine einzige Seite, anstatt wie üblich einzelne Seiten zu laden.
Wenn eine Seite zum ersten Mal geladen wird, löst die Clerk.js-Bibliothek automatisch eine Funktion aus, um alle Element-Blöcke auf dieser Seite zu rendern.
Bei Single-page-Apps, die Frameworks wie vue.js oder next.js verwenden, werden Seiten jedoch mit JavaScript statt mit einem Standardseitenaufruf gerendert.
Passen Sie die Clerk.js-Initialisierung und Kontextaktualisierungen an die Methodik an, wie Ihre App jede Ansicht lädt.
Clerk.js einbinden #
Clerk.js muss nur einmal geladen werden, wenn die Site ursprünglich geladen wird.
Danach steht die Bibliothek während der gesamten Session zur Verfügung.
Fügen Sie sie direkt vor dem </head>-Tag in Ihr 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 -->
Kontext aktualisieren #
Wenn ein Empfehlungsblock auf der Seite bleibt, während der Besucher navigiert, aktualisieren Sie den Clerk.js-Kontext, damit dieser der aktuellen Ansicht entspricht. Bereits initialisierte Blöcke, deren IDs aus dem Kontext stammen, werden automatisch neu geladen, wenn sich deren relevanter Wert ändert.
Wenn der Besucher z. B. die Kategorie 276 öffnet, rufen Sie folgendes auf:
Clerk('context', 'category', '276');
Ersetzen Sie 276 durch die Kategorie-ID Ihrer App. Das Setzen eines unveränderten Werts lädt den Block nicht neu. Dies funktioniert ohne DOM-Änderung und mit deaktivierter DOM-Beobachtung.
Blöcke, deren IDs von Seitenelementen kommen, und Popups, werden durch Kontextänderungen nicht neu geladen.
Siehe Kontext-Neuladungen für unterstützte Schlüssel, fehlende Werte, Events und die Möglichkeit, automatische Neuladungen zu deaktivieren.
Rendering steuern #
Standardmäßig rendert Clerk.js alle Elemente mit der Klasse clerk, unabhängig davon, ob sie beim initialen Laden oder beim DOM-Mutation eingefügt werden.
Sie können das Timing steuern, indem Sie das Element erst 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 aus:
Fügen Sie den Clerk-Snippet mit einem eindeutigen Selektor in das HTML ein, den Sie ansprechen können.
Führen Sie
Clerk("content", "SELECTOR")aus, um es zu rendern.
Bei diesem manuellen Rendering-Ansatz gilt: Wenn der Besucher die Seite verlässt, entfernen Sie den Snippet und rendern Sie ihn erneut, wenn der Besucher auf die Seite zurückkehrt.
Dadurch wird sichergestellt, dass Clerk.js den Snippet nicht als bereits gerendert erkennt und ihn deshalb nicht visualisiert.
Ein kontextbasierter Block, der auf der Seite verbleibt, kann stattdessen die oben beschriebenen automatischen Neuladungen verwenden.
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 es das erste Mal mit Ihren benutzerdefinierten Selektoren gerendert haben.
Pagespeed-Auswirkung #
Das Hinzufügen eines externen Tools wie Clerk.js erhöht die Ladezeit Ihrer Site geringfügig, ist aber vernachlässigbar im Vergleich zu den zusätzlichen Conversions, die damit erzielt werden.
Der folgende Abschnitt erklärt, was Clerk.js dem Seitenladen hinzufügt.
Performance #
Die Clerk.js-Bibliothek ist nur 37,5 KB groß und lädt daher sehr schnell.
Außerdem werden Elemente asynchron geladen. Das bedeutet, dass der Rest der Seite geladen wird, während Clerk.js Inhalte rendert.
Eine Erhöhung der Ladezeit der Seite kommt meistens daher, dass mehr Bilder geladen werden als davor, da Clarks Suchergebnisse und Empfehlungen optisch ansprechend sein sollen.
Um die zusätzliche Ladezeit zu minimieren, empfehlen wir die Verwendung von Bildern im webp-Format mit einer Auflösung, die der Größe in den Clerk-Elementen entspricht.
Wenn beispielsweise Bilder in Empfehlungen eine Auflösung von 400x400px in der Desktop-Ansicht haben, sollten Sie Bilder in einer Auflösung von maximal 420x420px oder ähnlich senden.
Google Page Speed #
Wenn Sie Google Page Speed Insights oder ein ähnliches Tool zur Analyse der Seitenleistung verwenden, könnten Sie Clerk.js unter Leverage browser caching. aufgelistet sehen.
Der Zweck von Clerk.js ist es, das Einfügen von Ergebnissen von Clerk in jede Website super einfach zu machen.
Clerk.js enthält viele Funktionen zur Abwicklung von Tracking und UI-Komponenten wie Instant Search, Slider, Popups und mehr.
Wenn wir neue UI-Features hinzufügen oder bestehende verbessern, werden sie in Clerk.js aufgenommen und müssen vom Endbenutzer heruntergeladen werden, um genutzt zu werden.
Eine Cache-Ablaufzeit von 60 Minuten bedeutet, dass neue Features nach spätestens 60 Minuten jedem zur Verfügung stehen.
Je länger die Cache-Zeit, desto länger dauert es, bis alle die neuesten Features erhalten.
Wichtig ist, dass Endnutzer Clerk.js nur einmal herunterladen müssen, wenn neue Features verfügbar sind.
Die Cache-Ablaufzeit von 60 Minuten bedeutet lediglich, dass der Browser des Endnutzers alle 60 Minuten mit Clerk abgleicht.
Wenn im Clerk.js nichts geändert wurde, wird nichts heruntergeladen.
Die Ablaufzeit von 60 Minuten ist also ein Kompromiss zwischen der Reduzierung von Web-Anfragen und der Sichtbarkeit neuer Funktionen.
Die meisten Sitzungen dauern weniger als 60 Minuten, daher erfolgt die Anfrage meist nur einmal pro Sitzung.
Eine solche Cache-Ablaufzeit ist normal und wird auch von Diensten wie Google Analytics, Facebook und Trustpilot verwendet.
CLS-Auswirkung #
Cumulative Layout Shift (CLS) kann SEO und Nutzererlebnis negativ beeinflussen, wenn dynamisch eingefügter Inhalt Elemente auf der Seite verschiebt.
In manchen Fällen kann Clerk (unter anderem) zum CLS-Score beitragen.
Mehr zu CLS erfahren Sie hier.
Folgen Sie dieser Anleitung nur, wenn Ihr CLS-Score höher als 0,2 ist und Clerk-Elemente direkt sichtbar sind.
Um ein Verschieben von Inhalten zu verhindern, muss ein Platzhalter für Clerk-Empfehlungen reserviert werden, bevor Clerk.js diese einfügt.
Fügen Sie dafür eine Mindesthöhe basierend auf der erwarteten Inhaltshöhe hinzu.
Beispiel-Code:
.clerk-slider-wrapper {
min-height: 300px; /* Anpassen je nach erwarteter Inhaltshöhe */
width: 100%;
}
API-Aufrufe durchführen #
Sie können Clerk.js verwenden, um API-Aufrufe durchzuführen, indem Sie die eingebaute Funktion Clerk("call") nutzen.
Diese Funktion nimmt 3 Argumente entgegen:
Einen API-Endpunkt
Ein JSON-Wörterbuch mit Parametern
Eine Callback-Funktion zum Verarbeiten der Antwort
Anfragen #
Unten ist ein Beispielskript, das die 10 beliebtesten Produkte abruft und die Antwort in der Konsole ausgibt.
Die Antwort enthält ein JavaScript-Objekt mit dem Status des API-Aufrufs und dem Ergebnis.
Skript #
function popularProducts(){
Clerk("call",
"recommendations/popular",
{
limit: 10,
labels:["Home Page / Bestsellers"]
},
function(response){
console.log(response);
},
function(response){
console.error(response);
}
);
}
Antwort #
__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 nach Ihren Wünschen zu verarbeiten.
Die Funktionen nehmen response als Argument, das alle vom API zurückgegebenen Daten enthält.
Hier ein Beispiel, das eine Liste von HTML-Elementen erstellt, die auf Kategorien verlinken, welche dem Suchbegriff “men” entsprechen.
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);
}
}
)
Warenkorb-Buttons („Add-to-cart“) #
Diese Buttons funktionieren auf jeder Plattform unterschiedlich und das Verhalten kann sich je nach eingesetzten Plugins ändern.
Da das Clerk-Design aus HTML & CSS besteht, können Sie Funktionalität meist selbst hinzufügen, wenn Sie wissen, wie sie auf Ihrer Seite funktioniert.
Allgemeines Vorgehen #
Manche Add-to-cart-Buttons benötigen JavaScript, um zu funktionieren.
In diesen Fällen können Sie die Funktionalität an die bestehende Clerk-cart-Methode anhängen.
Wie das geht, steht in unseren Entwicklerdokumenten hier.
Untersuchen Sie den Add-to-cart-Button, um den zugehörigen Code auszulesen, z. B. auf einer Kategorieseite.
Der Code ist meist ein <div>- oder ein button-Element.
Kopieren Sie den kompletten Button-HTML-Code.
Fügen Sie diesen Code in Ihr Design ein.
Nun müssen Sie die Variablen im Code identifizieren.
Meist müssen Sie herausfinden, wo im Code verwendet wird:
Produkt-ID
Produktmenge
Ersetzen Sie die Werte für die Produkt-ID durch die Liquid-Variablen für diese Daten.
Die ID ist immer {{ product.id }}, die Menge variiert je nach Datenübermittlung.
In diesem Beispiel könnte es {{ product.qty }} sein.
Fügen Sie Ihren Code in das HTML Ihres Designs ein und testen Sie, ob er funktioniert.
Beispiel #
Der Add-to-cart-Button verwendet ein <div> mit der Klasse button-container.
Die Menge steht im Warenkorb-Link nach /cart?add= und die Produkt-ID direkt nach &id_product=.
Die Produkt-ID ist auch in data-id-product verwendet, die Menge in .data-minimal_quantity.
Diese Werte sollten in Ihrem Design durch Liquid-Tags ersetzt werden, damit die passenden Produkt-IDs und Mengen im HTML-Output landen.
Mit diesen Änderungen sieht der finale Add-to-cart-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 }}&id_product={{ product.id }}&"
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 gibt viele Fehler in die Konsole aus, mit denen Sie Probleme debuggen können.
Durch einen Klick auf den Fehlerlink erhalten Sie weitere Informationen, die Sie selbst zur Fehlerbehebung nutzen oder an unser Support-Team weitergeben können.
Unten finden Sie eine Liste der häufigsten Fehler.
Unbekannter Inhalt #
Dieser Fehler erscheint, wenn das eingefügte Snippet im data-template-Attribut auf ein
Element verweist, das nicht existiert.
Stellen Sie sicher, dass der Name im Einbettungscode mit einem Element-Block übereinstimmt, den Sie in my.clerk.io erstellt haben.
Klicken Sie auf Element bearbeiten bei jedem Element, um den Referenznamen nachzusehen.
Ungültiger API-Endpunkt #
Dieser Fehler tritt auf, wenn Sie irgendwo in Ihrem HTML die Klasse clerk verwenden.
Diese Klasse ist für unsere Snippets reserviert, da Clerk.js diese Klasse verwendet, um die zu rendernden Elemente zu erkennen.
Benennen Sie die Klasse also um, etwa in clerk-product.
Ungültiges Produktargument #
Dieser Fehler bedeutet, dass die angegebene Produkt-ID einen falschen Typ oder eine falsche Syntax hat.
Wenn Ihre Produkt-IDs z. B. als Integer vorliegen, müssen sie auch so im Snippet angegeben werden.
Denken Sie auch an die Klammern um die ID, um eine Liste daraus zu machen.
<span
class="clerk"
data-template="@product-page"
data-products="[123]">
</span>
Ungültiges Kategorie-Argument #
Dieser Fehler bedeutet, dass die angegebene Kategorie-ID einen falschen Typ oder Syntax hat.
Meist passiert das, wenn der Platzhalter in der Kategorie-Einbettung nicht durch eine echte ID ersetzt wurde:
<span
class="clerk"
data-template="@category-page"
data-category="INSERT_CATEGORY_ID">
</span>
Der Code-Output sollte die ID der Kategorie enthalten:
<span
class="clerk"
data-template="@category-page"
data-category="257">
</span>
Wenn Sie das Snippet manuell kopiert haben, wählen Sie im Dropdown Choose your platform Ihr Shopsystem aus, bevor Sie das Snippet kopieren.
Dann wird die Logik Ihrer Plattform übernommen, um die richtige Kategorie-ID zu setzen.
Falls Ihre Plattform fehlt, müssen Sie selbst festlegen, wie Sie die richtige Kategorie-ID je nach Funktionalität Ihres Webshops beziehen.
Falscher API Key #
Dieser Fehler erscheint, wenn der eingegebene öffentliche API-Key keinem Konto in Clerk entspricht.
Loggen Sie sich in my.clerk.io ein und gehen Sie zu Developers > API Keys.
Dort finden Sie den Public API Key, den Sie entweder direkt im Clerk.js-Tracking-Script oder je nach Plattform in den Einstellungen Ihrer Integration ergänzen.
Iubenda-Blocking #
Wenn Sie iubenda mit aktivierter Automatic blocking-Funktion für Cookie-Zustimmung verwenden, kann es sein, dass Clerk.io-Skripte bzw. -Anfragen bei abgelehnten Cookies blockiert werden.
Typische Folgen:
- Die
sale-Anfrage wird nie gesendet, sodass Bestellungen in Clerk.io nicht getrackt oder nicht zugeordnet werden. - Clerk.io-Elemente werden gar nicht gerendert oder Clerk.js gibt in der Konsole einen Fehler über mehrfaches Laden aus (weil iubenda Skripte umschreibt oder verzögert).
Domains auf die Allowlist setzen #
Fügen Sie Clerk.io zur Allowlist in iubenda hinzu, damit Skripte/Anfragen nicht blockiert werden, wenn ein Besucher Cookies ablehnt.
Mindestens folgende Domains sollten in die iubenda-Allowlist aufgenommen werden:
cdn.clerk.io(Clerk.js)api.clerk.io(Tracking- und Verkaufsanfragen)
Die genauen UI-Benennungen variieren, meist findet sich diese Einstellung im iubenda-Projekt unter Cookie Solution > Automatic blocking.
Zur Anleitung von iubenda siehe deren Artikel What to do when Automatic blocking mode blocks too much.
Fix überprüfen #
Nach Aktualisierung der iubenda-Einstellungen:
- Webshop öffnen, Cookies ablehnen und die Browser-Konsole öffnen.
- Prüfen, ob Clerk.js verfügbar ist —
typeof Clerksollte nicht"undefined"zurückgeben. Clerk("debug")ausführen, eine Testbestellung tätigen und überprüfen, dass einesale-Anfrage an Clerk.io gesendet und mitstatus: "ok"bestätigt wird.
POS/ERP-Verkaufsdaten #
Für einige Webshops ist es relevant, Verkaufsdaten aus anderen Systemen als dem eigentlichen Webshop hochzuladen.
Zum Beispiel, wenn Sie den Algorithmus anhand von Verkäufen aus einem physischen Geschäft oder B2B-Shop optimieren möchten.
Clerk unterscheidet nicht zwischen Bestellungen aus verschiedenen Quellen – solange Sie eine ID, einen Zeitstempel und eine Liste der gekauften Produkte liefern können, können diese Daten zu Clerk hochgeladen werden.
Die empfohlene Vorgehensweise ist die Nutzung der CRUD-API, da sich damit der Prozess komplett automatisieren lässt.
Über diese API-Aufrufe können Sie Bestelldaten direkt an Ihr Clerk-Store senden.
Erstellen Sie dazu einfach einen POST-Aufruf zum /orders-Endpunkt in Ihrem ERP oder Webshop, führen Sie den Job z.B. monatlich aus und schon können Sie Offline-Bestellungen zur Optimierung Ihrer Online-Empfehlungen und Suchergebnisse nutzen.
Alternativ können Sie auch eine CSV-Datei manuell hochladen, ohne zu programmieren.
Mehr dazu CSV-Dateien hier.
Währungsumrechnung #
Es gibt mehrere Möglichkeiten, mit Währungsumrechnung in Clerk zu arbeiten.
Eine einfache Herangehensweise ist unten skizziert.
Währungen übersetzen #
Wenn Besucher auf Ihrer Website Google Translate nutzen, können Preiswerte so übersetzt werden, dass das Format oder die Anzeige der Währung nicht mehr stimmt.
Um dies zu verhindern, umgeben Sie die Preisausgabe mit Elementen, die nicht übersetzt werden sollen.
Empfohlenes Markup #
Verwenden Sie sowohl translate="no" als auch die Klasse notranslate beim Preiselement:
<span class="clerk-price notranslate" translate="no">
{{ product.price | money }}
</span>
Zeigen Sie Listenpreis und Angebotspreis an, wenden Sie das Schema jeweils an:
<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>
Stellen Sie sicher, dass die Stellen überall verwendet werden: #
- Im Clerk Design, an dem Preise gerendert werden.
- In allen eigenen HTML-Wrappern, welche Preiswerte ausgeben.
So bleibt der Rest der Seite übersetzbar, während Preis/Kurs-Formatierungen korrekt bleiben.
Preisobjekte senden #
Clerk benötigt die Preise jedes Produkts in den verschiedenen Währungen.
Am einfachsten ist es, sie als string-encoded JSON-Objekt der formatierten Preise im Data Feed zu schicken, wobei der Währungs-ISO als Schlüssel dient.
"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,
// Beispiele für string-encoded JSON
"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,
// Beispiel für string-encoded JSON
"prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
"list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
}
]
Formatter erstellen #
In Clerk.js können Sie JavaScript-Funktionen definieren, die in Ihren Designs verwendet werden können.
Definieren Sie hier eine Funktion, die Ihre Preisliste als Argument nimmt und für eine bestimmte Währung, basierend auf der Logik im Frontend, den passenden Preis zurückliefert.
Ersetzen Sie dabei currency durch die tatsächlich gewählte Währung im Frontend.
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 Definition des Formatters kann er in Ihrem Design wie folgt verwendet werden:
<div class="price">
<span class="price">
{{ product.prices_formatted | currency_selector }}
</span>
</div>
Kundenspezifische Preise #
Clerk unterstützt es, unterschiedliche Preise basierend auf dem eingeloggten Kunden anzuzeigen – entweder indem individuelle Preise beim Renderzeitpunkt abrufen werden, oder indem Gruppenkundenpreise im Produktdatensatz hinterlegt sind.
Dies ist ausführlich im Artikel Customer Pricing beschrieben.
HTTP-Authentifizierung #
HTTP-Authentifizierung wird oft auf Staging-Seiten eingesetzt, um unerwünschte Besucher zu blockieren.
Dies blockiert in vielen Fällen auch den Clerk-Importer und zeigt typischerweise einen 401 Unauthorized-Fehler im Sync-Log an.
Sie können das beheben, indem Sie Authentifizierungsinformationen in die Import-URL einfügen.
In my.clerk.io > Data > Configuration aktualisieren Sie die Import-URL wie folgt:
http://USER:PASS@www.ewoksRus.com/JSONFEED
Keine getrackten Bestellungen #
Eine vollständige Anleitung, wie das Sales Tracking funktioniert, wie Sie es einrichten und Schritt für Schritt debuggen, finden Sie im Artikel Sales Tracking.
Kein Clerk Impact #
Wenn Bestellungen getrackt werden, aber keine als Clerk-bereinigt in der Analyse angezeigt werden, siehe den Abschnitt No Clerk Impact im Sales-Tracking-Artikel.
Slider mit wenigen Produkten ausblenden #
Hat eine Kategorie nur sehr wenige Produkte, kann ein Slider leer oder sich wiederholend aussehen.
Es gibt zwei Möglichkeiten, damit umzugehen:
Clerk-Design-Bedingung #
Verwenden Sie eine Bedingung um den Slider-Code, sodass dieser nur angezeigt wird, wenn ausreichend Produkte zurückgegeben werden.
{% if products.length >= 6 %}
<div class="clerk-slider">
{% for product in products %}
<!-- product card -->
{% endfor %}
</div>
{% endif %}
Dies ist schnell umgesetzt, hängt jedoch trotzdem vom Clerk-Response ab – also wird selbst dann ein API-Aufruf gemacht, wenn der Slider nicht angezeigt wird.
Serverseitige Bedingung #
Wenn Ihre Plattform die Produktanzahl pro Kategorie kennt, entscheiden Sie im Template, ob der Clerk-Einbettungscode überhaupt ausgegeben wird.
{% if category.product_count >= 6 %}
<span class="clerk" data-template="@category-page-slider"></span>
{% endif %}
Das ist die bevorzugte Variante, weil der Slider nur geladen wird, wenn genug Produkte vorhanden sind, und das Verhalten mit der eigenen Kategorieanzahl-Logik Ihres Shopsystems übereinstimmt.
Upgrade auf Clerk.js 2 #
Clerk.js 2 ist eine schnellere und flexiblere Version unserer JavaScript-Bibliothek.
Sie macht die Installation von Clerk in jedem Webshop einfacher.
Da sich die beiden Versionen leicht unterscheiden, müssen Sie die folgenden Schritte befolgen, um erfolgreich zu wechseln.
Die zwei Hauptunterschiede von Clerk.js 2 sind:
Die Designs in my.clerk.io nutzen Liquid, können aber auch einfach mit dem Design Editor erstellt werden.
Das Script muss direkt vor dem
</head>-Tag in Ihr Webshop-Template eingefügt werden.
Designs erstellen #
Da Clerk.js 2 eine andere Herangehensweise für Designs hat, müssen Sie neue Designs anlegen.
Sie können Ihre Clerk.js 2-Designs neu erstellen – entweder im Design Editor oder durch Umwandlung Ihrer alten Code-Designs auf Liquid, wie im untenstehenden Leitfaden erklärt.
Nachfolgend finden Sie eine Beschreibung, wie Sie alte Code-Designs nach Liquid umwandeln.
Design Editor-Option #
Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
Wählen Sie einen Designtyp außer Blank und vergeben Sie einen Namen. Wir empfehlen die Kennzeichnung mit “V2”, damit klar ist, dass Sie Clerk.js 2-Designs nutzen.
Im Design Editor können Sie alle vorhandenen Elemente wie Name, Bild, Button etc. bearbeiten oder neue Elemente hinzufügen.
Klicken Sie auf Publish Design, wenn Sie fertig sind, und fahren Sie mit Schritt 2 im Leitfaden fort.
Gehen Sie zu Recommendations/Search > Elements und ändern Sie Ihr Clerk-Element, damit es das neue Design nutzt, dann klicken Sie auf Update Element.
Dadurch werden die Elemente vorübergehend nicht im Shop angezeigt, bis Sie Clerk.js 2 wie weiter unten beschrieben eingebunden haben.
Designs konvertieren #
Da Clerk.js 2 die flexiblere Vorlagensprache Liquid verwendet, müssen Sie die Designs dorthin umstellen.
Gehen Sie zu my.clerk.io > Recommendations/Search > Designs > New Design.
Wählen Sie Blank > Code und geben Sie einen Namen an. Wir empfehlen die Bezeichnung “V2”, damit Sie Ihre Clerk.js 2-Designs erkennen.
Klicken Sie auf Create Design.
Dies erzeugt ein neues Design mit Produkt-HTML und CSS, das Sie verwenden können.
Wechseln Sie zurück zur Design-Übersicht und klicken Sie auf Edit Design für Ihr Clerk.js 1-Design (idealerweise in einem neuen Tab zum leichteren Kopieren).
Kopieren Sie das alte Clerk.js 1-Design in das neue Clerk.js 2-Design.
Sie werden feststellen, dass es keinen Container-Code mehr gibt.
Das liegt daran, dass Liquid for-loops verwendet, um alle Produkte zu rendern.
Kopieren Sie Ihr altes Produkt-HTML in den for-loop, den alten Container-Code darum und das CSS ebenso.
Wandeln Sie das Design in den Liquid-Syntax um. Der Hauptunterschied: Während die alten Designs
{{ formatter attribut }}nutzten, ist es in v2{{ product.attribute | formatter }}.Gehen Sie alle Ihre Attribute durch und passen Sie diese auf das neue Format an.
Wenn Sie
{{#if}}oder{{#is}}verwenden, wandeln Sie sie um in{% if product.attribute %}{% else %}{% endif %}.Löschen Sie
id="{{ $id }}"und die Klasse:targetaus dem Container-Code; diese werden in Clerk.js 2 nicht mehr unterstützt.Hier ein Beispiel für einen Clerk.js 1- und den kompletten konvertierten Clerk.js 2-Entwurf:
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>
Klicken Sie auf Update Design, um die Änderungen zu speichern.
Gehen Sie zu Recommendations/Search > Elements und stellen Sie den Element-Block auf das neue Design um.
Klicken Sie auf Update Element. Jetzt werden die Elemente vorübergehend nicht angezeigt, bis Schritt 2 abgeschlossen ist. Wählen Sie für alle zu aktualisierenden Elements das neue Design.
Skript ersetzen #
Suchen Sie die Template-Datei, die für alle Seiten Ihres Webshops verwendet wird und in der das ursprüngliche Clerk.js-Script meist am unteren Rand steht.
Entfernen Sie das alte Clerk.js-Script aus der Datei. Es sieht etwa 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 > Clerk.js. Hier steht der Clerk.js 2-Code.
Kopieren Sie diesen Code, fügen Sie ihn direkt vor dem
</head>-Tag in Ihr Template ein und speichern Sie.
Herzlichen Glückwunsch! Sie nutzen jetzt das verbesserte Clerk.js 2-Setup!
Die vollständige Dokumentation finden Sie hier: Clerk.js 2 hier.
Umgang mit require.js #
Dieser Abschnitt gilt nur für Clerk.js 1.
In manchen Setups verhindert Require.js das Laden von Clerk.js, sodass Slider oder Suchergebnisse nicht angezeigt werden.
Dann erscheint folgender Fehler in der Konsole:
Uncaught ReferenceError: Clerk is not defined
Es gibt zwei Ansatzpunkte für Require.js. Beide setzen Änderungen am Tracking-Skript voraus, das Sie unten auf jeder Seite eingebunden haben.
In Require.js einbinden #
Beste Lösung: Versuchen Sie, Require.js Clerk erkennen zu lassen.
Fügen Sie require(['clerk'], function() {}); am Ende des Tracking-Skripts ein.
Require.js ignorieren #
Falls oben genannte Lösung nicht funktioniert, kann Require.js ignoriert werden.
Fügen Sie window.__clerk_ignore_requirejs = true; am Anfang des Tracking-Skripts ein.
Nach Anwendung einer dieser Methoden ist Require.js mit Clerk kompatibel.
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.