FAQ | clerk.io

Frontend-Währungsumrechnung #

Die in Shopify integrierte Währungsumrechnung macht es einfach, das Währungssymbol und den Wechselkurs im Webshop abzulesen.

Standardmäßig wird Clerk.js für Shopify mit einem Formatierer ausgeliefert, der so lange funktioniert, wie Ihre Drittanbieter-App das in Shopify integrierte Währungsobjekt verwendet.

Standardlösung #

Sie müssen einen Formatter in Ihren Designs verwenden, um Preise umzurechnen. Dies ist ein Beispiel aus unserer Standardvorlagensprache [hier] (https://docs.clerk.io/docs/clerkjs-template-language). Wenn Sie jedoch Währungsumrechnungen und Symbole verwenden, dann erkennt Clerk.js diese Einstellungen wie Sprache, Währung und Ländercode. Die folgenden Beispiele geben Ihnen einen Überblick darüber, wie die verschiedenen Komponenten funktionieren.

Formatter	Beschreibung	Beispielausgabe
currency_symbol	Währungssymbol für das angegebene Land oder die Region. Dies kann je nachdem, was Sie in Ihrer Konfiguration des Shops eingestellt haben, variieren	€ , £ und kr.
currency_converter	Ein Konversationsformatierer, der auf den Währungseinstellungen und -kursen der Shopkonfiguration basiert	Angenommen, Sie haben 10 Euro für ein Produkt. Wenn ein Benutzer zu einer anderen Währung wie dänische Kronen (je nach Einstellung) wechselt, dann wird es zu der entsprechenden Umrechnung umgerechnet

In Design Editor**_

Erstellen Sie eine Text-Komponente, in der Sie den Preis anzeigen möchten

2. Fügen Sie den folgenden Liquid-Code hinzu, um den Preis basierend auf dem Währungsumrechner innerhalb der Textkomponente anzuzeigen:

{{ currency_symbol }}{{ item.price | currency_converter }}

Im HTML/CSS-Design (Code-Modus)**_

1. Gehen Sie in my.clerk.io zu Suche/Empfehlungen -> Designs und klicken Sie auf Design bearbeiten für Ihr Design.

2. Ersetzen Sie das bestehende Format money oder money_eu für die Preise durch currency_converter.

3. Klicken Sie auf Design aktualisieren.

4. Sie können nun die umgerechneten Preise und das Währungssymbol in Ihrem Entwurf sehen:

Shopify-frontend-api solutions #

> Haftungsausschluss: Dies ist eine sehr individuelle Lösung, um Preisumrechnungen zu erhalten, wenn keine Daten von der Shopify-API vorliegen. Verwenden Sie dies nur, wenn Sie ein spezifisches und benutzerdefiniertes Setup für Preisumrechnungen auf Basis von Geo-IP-Änderungen verwenden.

Dies ist die Dokumentation der Frontend-Lösung in Github.

Erhalten kontextbezogener Daten JIT

Dieser Abschnitt beschreibt, wie man kontextbezogene Daten in Echtzeit erhält, um sie in den von der Clerk.io API zurückgegebenen Inhalten anzuzeigen.

Das Entwurfsmuster besteht aus den folgenden Teilen:

Eine Sammlung, die alle Produkte enthält.
Einem alternativen Layout für die Darstellung der Sammlungsinformationen als JSON.
Eine Javascript-Klasse, die die in der Sammlung zur Verfügung gestellten Daten sammelt.
Ein Javascript Snippet, das die Daten für die relevanten Produkt-IDs in einem gegebenen Ergebnis konsumiert und sie in einem Div in der Vorlage platziert.

1. Die Sammlung

Um sicherzustellen, dass Sie eine Sammlung mit allen möglichen Produkten haben, empfehle ich, eine Sammlung mit einer Bedingung zu erstellen, die von allen Produkten erfüllt wird. Die Sammlung sollte Clerk api genannt werden, da sie dann die Route /collection/clerk-api frontend erhält.

Die Bedingung für die Sammlung sollte etwas wie “Preis > -1000000” sein.

2. Das alternative Layout für Sammlungen

Zweitens müssen wir ein alternatives Layout für die Anzeige unserer Daten mithilfe der Sammlung erstellen.

Dazu bearbeiten wir zunächst den Themencode des Themas, das wir verwenden möchten. Klicken Sie unter dem Abschnitt Vorlagen auf der linken Seite auf “Neue Vorlage hinzufügen”.

Wählen Sie in dem Popup-Fenster “Sammlung” als Ressourcentyp aus.

Wählen Sie “liquid” als Dateityp.

Schreiben Sie “json” in das unterste Feld, so dass der Name der erstellten Vorlage “collection.json.liquid” lautet.

Der Inhalt dieser Datei sollte die Datei “collection.json.liquid” sein, die sich im Ordner “liquid” für dieses Projekt befindet.

Sie können dem Produkt in dieser Vorlage nach Bedarf weitere Felder hinzufügen.

3. **Die JS-Klasse, die Daten von unserem neu erstellten Endpunkt verarbeitet.

Um die Daten aus unserer Sammlung abzurufen und so vorzubereiten, dass sie verwendet werden können, müssen wir den gesamten Inhalt von “index.js” in unserem “Class”-Ordner in diesem Projekt innerhalb des Skript-Tags platzieren, das “Clerk.js” enthält, das Sie in “theme.liquid” platziert haben.

Es sollte in etwa so aussehen:

Diese Klasse wird Daten auf Basis von Zeitstempeln und Währungen ungültig machen, ohne dass Sie den Code ändern müssen.

Die Zeit vor der Ungültigkeitserklärung beträgt 12 Stunden seit den letzten Gebäudedaten.

Jede Änderung des Währungskontextes macht die Daten ebenfalls ungültig.

4. Die JS-Funktion, die die relevanten Daten in die Vorlage lädt.

Schließlich sollten Sie die template.js in die verwendete Designvorlage einbinden. Die Funktion holt sich die Daten, wenn sie verfügbar sind, und platziert sie in bestimmten untergeordneten Elementen innerhalb der einzelnen Produktkacheln.

Das Beispiel enthält die Felder “list_price” und “price”.

Hinweis: Wenn Sie andere Felder als “price” und “list_price” verwenden müssen, fügen Sie diese in “collection.json.liquid” hinzu und bearbeiten dann die “template.html” und “template.js”, um diese Felder ebenfalls zu verwenden. Sie sollten die in Schritt 3 beschriebene Klasse nie bearbeiten müssen.

Mehrere Währungen in 1 Shop verfolgen #

Wenn Sie mehrere Währungen in Ihrem Shopify Webshop verwenden, ist es wichtig, dass die Bestellungen in eine Währung umgerechnet werden, um sicherzustellen, dass Ihre umsatzbezogene Leistung in Clerk.io korrekt ist.

In den Clerk.io Dashboards wird Ihre Leistung immer in einer Währung angezeigt. Wenn Sie zum Beispiel sowohl GBP als auch DKK in Ihrem Webshop verwenden, werden Ihre Dashboards die Leistung alle in GBP oder alle in DKK anzeigen. Aus diesem Grund ist die Umrechnung in eine Währung wichtig - schließlich möchten Sie nicht, dass ein Kauf in 600 GBP von Clerk.io als 600 DKK gelesen wird!

Um sicherzustellen, dass Ihre Clerk.io Dashboards Ihre Verkaufsdaten in einer gemeinsamen Währung anzeigen, kann dies innerhalb des Sales Tracking Codes angepasst werden, den Sie Ihrem Shop hinzugefügt haben, als Sie Clerk.io ursprünglich installiert haben.

Gehen Sie zu Einstellungen > Kasse > Zusätzliche Skripte im Shopify-Backend und ändern Sie den Code für die Umsatzverfolgung von diesem:


<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
  (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: 'yourPublicKey'
  });
  let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
  document.addEventListener('DOMContentLoaded', (e)=> {
      clerk_order_id = window.Shopify.checkout.order_id
  });
  if ( isNaN( clerk_order_id ) ) {
      if(window.Shopify){
          clerk_order_id = window.Shopify.checkout.order_id
      }
  }
  let log_sale_retry = setInterval(() => {
      if( ! isNaN( clerk_order_id ) ){
          Clerk('call', 'log/sale/shopify', {
              sale: clerk_order_id
          });
          clearInterval(log_sale_retry);
      }
  }, 100);
  </script>
  <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Zu diesem:


<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
    (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);
    let clerkLocale = Shopify.locale;
    let publicKey;
    switch (clerkLocale) {
        case 'en':
            publicKey = 'yourPublicKeyEN';
            break;
        case 'fr':
            publicKey = 'yourPublicKeyFR';
            break;
        case 'de':
            publicKey = 'yourPublicKeyDE';
            break;
        // Add more cases as needed
    }
    Clerk('config', {
        key: publicKey
    });
    let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
    document.addEventListener('DOMContentLoaded', (e) => {
        clerk_order_id = window.Shopify.checkout.order_id
    });
    if (isNaN(clerk_order_id)) {
        if (window.Shopify) {
            clerk_order_id = window.Shopify.checkout.order_id
        }
    }
    let log_sale_retry = setInterval(() => {
        if (!isNaN(clerk_order_id)) {
            Clerk('call', 'log/sale/shopify', {
                sale: clerk_order_id
            });
            clearInterval(log_sale_retry);
        }
    }, 100);
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Achten Sie darauf, das Besucher-Tracking-Skript gleich zu lassen - es befindet sich direkt unter dem Code für das Verkaufs-Tracking. Ihre Bestellungen sollten nun als eine Währung in die Clerk.io Dashboards einfließen.

Gemeinsame Themendateien finden #

Shopify bietet über 100 verschiedene Themes zur Gestaltung und Anpassung Ihres Webshops. Jedes Theme funktioniert auf die gleiche Art und Weise, d.h. Sie passen die Theme-Dateien an, um ein bestimmtes Ergebnis in Ihrem Shop zu erzielen, allerdings ändern sich die Namen der Theme-Dateien von Theme zu Theme.

Shopify bietet Ihnen ein Suchfeld, mit dem Sie schnell und einfach die gewünschte Themadatei finden können. Wenn Sie den Namen der Datei, die Sie suchen, nicht kennen, können Sie das Suchfeld verwenden, um die Datei zu finden. Wenn Sie zum Beispiel nach der Datei suchen, die den Code für die Suchseite enthält, wird sie wahrscheinlich “search” im Dateinamen haben.

Wenn Sie sich nicht sicher sind, ob Sie die richtige Datei gefunden haben, können Sie den HTML-Code in der Themadatei mit dem HTML-Code auf der betreffenden Seite vergleichen, um zu sehen, ob sie übereinstimmen.

In Google Chrome können Sie dies tun, indem Sie mit der rechten Maustaste auf einen beliebigen Abschnitt der Seite klicken und “Prüfen” wählen.

Sie können dann den HTML-Code der Seite untersuchen und prüfen, ob die Klasse/ID der Elemente in der Datei und auf der Seite identisch sind.

Wenn Sie weitere Unterstützung benötigen, können Sie sich auch an unser Support-Team wenden.

Synchronisierung mit HTTP-Authentifizierung #

Häufig wird die HTTP-Authentifizierung auf Staging-Sites verwendet, um ungebetene Besucher zu vermeiden.

Dadurch wird auch der Clerk-Importer blockiert und im Synchronisierungsprotokoll wird der Fehler 401 Unberechtigt angezeigt.

Sie können den Importer leicht überprüfen, indem Sie die Authentifizierungsinformationen in die Import-URL einfügen, wie unten, in Data Sync unter my.clerk.io:

https://USER:PASS@www.ewksRus.com

Häufige Synchronisationsfehler #

Beim Importieren von Daten mit der Shopify-Integration ist der Webshops-Server für das Senden der Produkt-, Kategorie- und Verkaufsdaten an Clerk.io. verantwortlich.

In einigen Fällen kann es jedoch vorkommen, dass die Serverkonfiguration dem Importer den Zugriff verwehrt, was zu einem Fehler in Data Sync. führt.

Nachfolgend finden Sie eine Liste der häufigsten Fehler und wie Sie diese beheben können.

401 Server-Fehler: Nicht autorisiert #

Dieser Fehler tritt auf, wenn Ihr Webshop/Ihre Entwicklungsumgebung eine HTTP-Authentifizierung für den Zugriff erfordert.

Dies wird einfach durch Einfügen von Benutzername und Passwort als Teil der Import-URL gelöst:

http://username:password@awesomeshop.myshopify.com

Shopify Berechtigungsfehler: Diese Aktion erfordert die Genehmigung des Händlers für den Bereich read_content. #

Dieser Fehler tritt in der Regel auf, wenn Sie in Ihrer Private App keinen Lesezugriff auf Store-Inhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen erteilt haben.

So beheben Sie ihn:

1. Melden Sie sich bei Shopify an und gehen Sie zu Apps -> Private Apps verwalten -> Clerk.io (oder den Namen, den Sie der App gegeben haben).

2. Scrollen Sie zu Admin-API-Berechtigungen und klicken Sie auf Deaktivierte Admin-API-Berechtigungen überprüfen_.

3. Suchen Sie Speicherinhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen und wählen Sie Lesezugriff:_.

4. Scrollen Sie dann zum oberen Rand der Seite und klicken Sie auf Speichern.

Umgang mit require.js #

**Diese Anleitung gilt nur bei Verwendung von Clerk JS1.

In einigen Konfigurationen verhindert Require.js das Laden von Clerk.js, was bedeutet, dass keine Schieberegler oder Suchergebnisse angezeigt werden.

Wenn dies geschieht, wird der folgende Fehler in der Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, mit Require.js. umzugehen. Beide Ansätze erfordern, dass Sie Änderungen am Tracking-Skript vornehmen, das normalerweise in index.liquid eingefügt wird.

“clerk” in Require.js einbinden #

Der beste Ansatz ist der Versuch, Require.js dazu zu bringen, Clerk.io. zu erkennen.

Sie können dies tun, indem Sie require([‘clerk’], function() {}); unten in das Tracking-Skript einfügen:

Require.js ignorieren #

Wenn die obige Lösung nicht funktioniert, ist es möglich, Require.js zu ignorieren.

Sie können dies tun, indem Sie window.__clerk_ignore_requirejs = true; einfügen.

oben in das Tracking-Skript einfügen:

Nach Anwendung einer dieser Methoden ist Require.js nun mit Clerk.io kompatibel.

Upgrade auf Clerk.js 2 #

Clerk.js 2 ist eine schnellere und viel flexiblere Version unserer JavaScript-Bibliothek, die die Installation von Clerk.io in jedem Webshop zu einem Kinderspiel macht.

Da die beiden Versionen jedoch leicht unterschiedlich funktionieren, müssen Sie diese Schritte befolgen, um das Upgrade erfolgreich durchzuführen.

Die beiden wichtigsten Unterschiede in Clerk.js 2 sind:

Die Designs in my.clerk.io verwenden die Liquid Template-Sprache, können aber auch einfach mit dem Design Editor erstellt werden.
Das Skript muss direkt **vor dem Tag in Ihrer Webshop-Vorlage eingefügt werden.

Schritt 1: Konvertierung von Designs #

Da Clerk.js 2 einen anderen Ansatz hat, müssen Sie neue Designs erstellen.

Sie können Ihre Clerk.js 2 Designs auf eine von zwei Arten erstellen:

1. Verwenden Sie den intuitiven Design Editor, um neue Designs zu erstellen, wie in den folgenden Punkten beschrieben.
2. Konvertieren Sie Ihre alten Designs. Folgen Sie dieser Anleitung, um zu sehen, wie das geht.

1.1 Beginnen Sie, indem Sie zu my.clerk.io -> Empfehlungen / Suche -> Designs gehen und auf Neues Design: klicken.

1.2 Geben Sie Ihrem Entwurf auf dem folgenden Bildschirm einen Namen (wir empfehlen den Zusatz " V2", damit klar ist, dass Sie Clerk.js2 verwenden).

1.3. Wählen Sie den Entwurfstyp.

1.4. Klicken Sie auf Design veröffentlichen, wenn Sie fertig sind, und gehen Sie zu Schritt 2 in der Anleitung.

1.5. Klicken Sie im Design-Editor auf eines der vorhandenen Elemente wie den Namen, das Bild, die Schaltfläche usw., um es zu bearbeiten, oder fügen Sie dem Design neue Elemente hinzu, um weitere Informationen zu den Produkten hinzuzufügen.

1.6. Klicken Sie auf Veröffentlichen. Dies führt dazu, dass sie vorübergehend nicht in Ihrem Webshop angezeigt werden, bis Sie mit Schritt 2 fertig sind. 1.7. Gehen Sie abschließend zu Empfehlungen / Suche -> Inhalt und ändern Sie Ihren Clerk.io Inhalt, um Ihr neues Design zu verwenden.

1.7. Fertig! Sie sind nun bereit, auf Clerk.js 2 umzusteigen.

Schritt 2: Ersetzen des Skripts #

2.1. Suchen Sie zunächst die Vorlagendatei, die für die Anzeige aller Seiten des Webshops verwendet wird und in der sich das ursprüngliche Clerk.js-Skript am unteren Rand befindet.

2.2. Entfernen Sie das alte Skript aus der Datei:

2.3. Gehen Sie dann zu my.clerk.io -> Einstellungen -> Tracking Code. Diese Seite enthält nun Ihren Clerk.js 2 Tracking Code.

2.4. Kopieren Sie diesen Code und fügen Sie ihn direkt vor dem Tag in die Vorlage ein:

2.5. Speichern Sie Ihre Vorlage.

Glückwunsch! Sie arbeiten jetzt mit dem stark verbesserten Clerk.js 2 Setup!

Sie können die vollständige Dokumentation für Clerk.js 2 hier einsehen: https://docs.clerk.io/docs/clerkjs-quick-start