Häufig gestellte Fragen

Frontend-Währungsumrechnung #

Die integrierte Währungsumrechnung von Shopify erleichtert das Lesen des Währungssymbols und des Wechselkurses aus dem Webshop.

Standardmäßig wird Clerk.js für Shopify mit einem Formatter geliefert, der funktioniert, solange Ihre Drittanbieter-App das integrierte Währungsobjekt von Shopify verwendet.

Standardlösung #

Sie müssen einen Formatter in Ihren Designs verwenden, um Preise umzurechnen. Dies ist ein Beispiel aus unserer Standardvorlagen-Sprache hier. Wenn Sie jedoch Währungsumrechnungen und -symbole verwenden, erkennt Clerk.js diese Einstellungen wie Sprache, Währung und Ländercode. Die folgenden Beispiele geben Ihnen einen besseren Überblick darüber, wie die verschiedenen Komponenten funktionieren.

Im Design-Editor

1. Erstellen Sie eine Text-Komponente, in der der Preis angezeigt werden soll.

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 den vorhandenen money oder money_eu Formatter für Preise durch currency_converter.

3. Klicken Sie auf Design aktualisieren.

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

Shopify-Frontend-API-Lösungen #

Haftungsausschluss: Dies ist eine sehr benutzerdefinierte 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 basierend auf Geo-IP-Änderungen verwenden.

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

Kontextuelle DATEN JIT abrufen

Dieser Abschnitt behandelt, wie man kontextuelle Daten in Echtzeit erhält, um sie innerhalb des Inhalts anzuzeigen, der von der Clerk.io-API zurückgegeben wird.

Die Designmuster bestehen aus den folgenden Teilen:

• Eine Sammlung, die alle Produkte enthält.
• Ein alternatives Layout zur Darstellung von Sammlungsinformationen als JSON.
• Eine Javascript-Klasse, die die in der Sammlung verfügbaren Daten sammelt.
• Ein Javascript-Snippet, das die Daten für die relevanten Produkt-IDs in einem bestimmten Ergebnis konsumiert und sie innerhalb eines div im Template platziert.

1. Die Sammlung

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

Die Bedingung für die Sammlung sollte etwa so aussehen: price > -1000000.

2. Das alternative Layout für Sammlungen

Zweitens müssen wir ein alternatives Layout erstellen, um unsere Daten mithilfe der Sammlung anzuzeigen.

Um dies zu tun, bearbeiten wir zuerst den Theme-Code für das Theme, das wir verwenden möchten. Unter dem Abschnitt Vorlagen auf der linken Seite drücken Sie Neue Vorlage hinzufügen.

Wählen Sie im Popup collection für den Ressourcentyp.

Wählen Sie liquid für den Dateityp.

Schreiben Sie json in das unterste Feld, sodass der Name der erstellten Vorlage collection.json.liquid lautet.

Der Inhalt dieser Datei sollte die Datei collection.json.liquid sein, die im liquid-Ordner für dieses Projekt gefunden wird.

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

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

Um die Daten aus unserer Sammlung zu erfassen und sie so vorzubereiten, dass sie verwendet werden können, müssen wir den gesamten Inhalt von index.js in unseren class-Ordner in diesem Projekt einfügen, innerhalb des Skript-Tags, das Clerk.js enthält, das Sie in theme.liquid platziert haben.

Es sollte etwa so aussehen:

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

Die Zeit vor der Ungültigmachung beträgt 12 Stunden seit dem letzten Erstellen von Daten.

Jede Änderung im Währungs-Kontext macht die Daten ebenfalls ungültig.

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

Zuletzt sollten Sie das template.js in die verwendete Designvorlage einfügen. Die Funktion erfasst die Daten, wenn sie verfügbar sind, und platziert sie in spezifischen Kindelementen innerhalb jedes Produktkachels.

Das Beispiel umfasst die Felder list_price und price.

Wichtige Hinweise: Wenn Sie Felder verwenden müssen, die sich von price und list_price unterscheiden, fügen Sie diese in collection.json.liquid hinzu und bearbeiten Sie dann template.html und template.js, um auch diese Felder zu konsumieren. Sie sollten niemals die in Schritt 3 beschriebene Klasse bearbeiten müssen.

Verfolgen mehrerer Währungen in 1 Store #

Dies ist veraltet. Das Pixel-Tracking-Skript ersetzt dies. Befolgen Sie die Schritte 4 und 5 aus dem Shopify-Guide.

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

In den Clerk.io-Dashboards wird Ihre Leistung immer in einer Währung angezeigt. Wenn Sie beispielsweise 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 es wichtig, in eine Währung zu übersetzen - schließlich möchten Sie nicht, dass ein 600 GBP-Kauf von Clerk.io als 600 DKK gelesen wird!

Um sicherzustellen, dass Ihre Clerk.io-Dashboards Ihre Verkaufsdaten als eine gemeinsame Währung anzeigen, kann dies im Verkaufs-Tracking-Code angepasst werden, den Sie zu Ihrem Shop hinzugefügt haben, als Sie Clerk.io ursprünglich installiert haben.

Gehen Sie zu Einstellungen > Checkout > Zusätzliche Skripte im Shopify-Backend und ändern Sie den Verkaufs-Tracking-Code von diesem:

<!-- Start des Clerk.io E-Commerce-Personalisierungstools - 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>
  <!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

Zu diesem:

<!-- Start des Clerk.io E-Commerce-Personalisierungstools - 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;
        // Fügen Sie bei Bedarf weitere Fälle hinzu
    }
    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>
<!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

Stellen Sie sicher, dass Sie das Besucher-Tracking-Skript gleich lassen - dies befindet sich direkt unter dem Verkaufs-Tracking-Code. Ihre Bestellungen sollten nun als eine Währung in die Clerk.io-Dashboards fließen.

Finden gemeinsamer Theme-Dateien #

Shopify bietet über 100 verschiedene Themes, um Ihren Webshop zu gestalten und anzupassen. Jedes Theme funktioniert auf die gleiche Weise, dass Sie die Theme-Dateien anpassen, um ein bestimmtes Ergebnis in Ihrem Shop zu erzielen, jedoch ändern sich die Dateinamen von Theme zu Theme.

Shopify bietet Ihnen ein Suchfeld, um die gesuchte Theme-Datei schnell und einfach zu finden. Wenn Sie den Namen der Datei, die Sie suchen, nicht kennen, können Sie das Suchfeld verwenden, um sie zu lokalisieren. Wenn Sie beispielsweise nach der Datei suchen, die den Code für die Suchseite enthält, hat sie wahrscheinlich ‘search’ im Dateinamen.

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

Dies kann in Google Chrome durchgeführt werden, indem Sie mit der rechten Maustaste auf einen beliebigen Abschnitt der Seite klicken und ‘Untersuchen’ auswählen.

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

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

Empfehlungen für den Warenkorb #

Die Installation durch einen Shopify-Entwickler wird dringend empfohlen. Dieser Leitfaden beschreibt eine hochgradig angepasste Lösung, die sich je nach Shopify-Theme unterschiedlich verhalten kann. Sie ist speziell für Themes konzipiert, bei denen der Warenkorb Teil des DOM auf jeder Seite ist, aber verborgen bleibt, bis er vom Benutzer geöffnet wird.

Die Anzeige von Clerk-Empfehlungen im Warenkorb auf Shopify ist eine großartige Möglichkeit, zusätzliche Produkte den Käufern vorzustellen, bevor sie den Checkout-Prozess beginnen.

1. Bearbeiten Sie den Code Ihres Shopify-Themes in Online-Shop > Themes > Code bearbeiten.
2. Suchen Sie die Datei, in der sich die Warenkorbvorlage befindet (normalerweise cart-drawer.liquid oder ähnlich).
3. Fügen Sie einen Clerk-Empfehlungs-Snippet aus Empfehlungen > Inhalt ein. Ändern Sie die Klasse von clerk zu steuern Sie das Rendering. Zum Beispiel, indem Sie es clerk_m nennen:

<span class="clerk_m" data-template="@cart-others-also-bought" data-products="[{% for line_item in cart.items %}{% if forloop.index0 > 0 %}, {% endif %}{{ line_item.product.id }}{% endfor %}]"></span>

4. Fügen Sie zusammen mit dem obigen Snippet ein Skript hinzu, um Clerk-Empfehlungen anzuzeigen, wenn der Benutzer den Warenkorb öffnet. Eine Möglichkeit ist die Verwendung eines MutationObservers. Das folgende Skript umfasst all diese Elemente und gibt Ihnen ein Beispiel, wie Sie es angehen können. Zum Beispiel:

<script>
    // Wählen Sie den Knoten aus, der auf Mutationen beobachtet wird
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Fügen Sie alle Klassennamen des Warenkorbs hinzu, wenn er geöffnet wird
    const targetNodeClasses = "drawer animate active";

    // Optionen für den Observer (welche Mutationen beobachtet werden sollen)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Funktion zum Abrufen der Warenkorbdaten
    async function fetchCartData() {
        const response = await fetch("/cart.js");
        const data = await response.json();
        let itemsID = [];
        let cartItems = data.items;
        for (var i = 0; i < cartItems.length; i++) {
            itemsID.push(cartItems[i].product_id);
        }
        return itemsID;
    }

    // Rückruffunktion, die ausgeführt wird, wenn Mutationen beobachtet werden
    const callback = async (mutationList, observer) => {
        for (const mutation of mutationList) {
            if (mutation.type === "attributes") {
                if (targetNode.className == targetNodeClasses && !cartFetched) {
                    cartFetched = true;
                    try {
                        const itemsID = await fetchCartData();
                          if (JSON.stringify(previousitemsID) != JSON.stringify(itemsID)) {
                            await Clerk('content', '.clerk_m', 'param', { products: itemsID })
                            previousitemsID = itemsID
                          }
                    } catch (error) {
                        console.error(error);
                    } finally {
                        cartFetched = false;
                    }
                }

            }
        }
    };

    // Erstellen Sie eine Observer-Instanz, die mit der Rückruffunktion verknüpft ist
    const clerk_observer = new MutationObserver(callback);

    // Beginnen Sie mit der Beobachtung des Zielknotens für konfigurierte Mutationen
    clerk_observer.observe(targetNode, config);
</script>

Ihre Warenkorbdatei sollte so aussehen:

Synchronisierung mit HTTP-Auth #

Oft wird die HTTP-Authentifizierung auf Staging-Seiten verwendet, um unerwünschte Besucher zu vermeiden.

Dies blockiert auch den Clerk-Importer und zeigt einen 401 Unauthorized-Fehler im Synchronisierungsprotokoll an.

Sie können den Importer einfach überprüfen, indem Sie die Authentifizierungsinformationen in die Import-URL wie unten angegeben einfügen, in der Datensynchronisierung bei my.clerk.io:

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

Häufige Synchronisierungsfehler #

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

In einigen Fällen kann jedoch die Serverkonfiguration den Importer daran hindern, Zugriff zu erhalten, was zu einem Fehler in Data Sync führt.

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

401 Serverfehler: Unautorisiert #

Dieser Fehler tritt auf, wenn Ihr Webshop/Entwicklungsumgebung HTTP-Authentifizierung benötigt, um darauf zuzugreifen.

Dies wird einfach gelöst, indem Sie den Benutzernamen und das Passwort als Teil der Import-URL einfügen:

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

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

Dieser Fehler tritt normalerweise auf, wenn Sie Lesezugriff auf Store-Inhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen in Ihrer privaten App nicht gewährt haben.

Um dies zu beheben:

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 Überprüfen Sie deaktivierte Admin-API-Berechtigungen.

3. Suchen Sie Store-Inhalte 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 #

Dieser Leitfaden gilt nur für die Verwendung von Clerk JS1.

In einigen Setups verhindert Require.js, dass Clerk.js geladen wird, was bedeutet, dass keine Slider oder Suchergebnisse angezeigt werden.

Wenn dies passiert, wird der folgende Fehler in Ihrer Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

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

“clerk” in Require.js einfügen #

Der beste Ansatz besteht darin, zu versuchen, Require.js Clerk.io erkennen zu lassen.

Sie können dies tun, indem Sie require([‘clerk’], function() {}); am Ende des Tracking-Skripts 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;

am Anfang des Tracking-Skripts einfügen:

Nachdem Sie einen dieser Ansätze verwendet haben, ist Require.js jetzt 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 auf jedem Webshop zum Kinderspiel macht.

Da die beiden Versionen jedoch leicht unterschiedlich funktionieren, müssen Sie diese Schritte befolgen, um erfolgreich zu upgraden.

Die beiden Hauptunterschiede in Clerk.js 2 sind:

• Die Designs in my.clerk.io verwenden die Liquid Vorlagensprache, können jedoch auch leicht mit dem Design-Editor erstellt werden.

• Das Skript muss direkt vor dem -Tag in der Vorlage Ihres Webshops eingefügt werden.

Schritt 1: Designs konvertieren #

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

Sie können Ihre Clerk.js 2 Designs auf 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. Befolgen Sie diesen Leitfaden, um zu sehen, wie es geht.

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

1.2 Geben Sie auf dem folgenden Bildschirm Ihrem Design einen Namen (wir empfehlen, " V2" hinzuzufügen, damit es offensichtlich ist, dass Sie Clerk.js2 verwenden).

1.3. Wählen Sie den Design-Typ.

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 neue Elemente zum Design hinzu, um weitere Informationen zu den Produkten hinzuzufügen.

1.6. Klicken Sie auf Veröffentlichen. Dies wird vorübergehend dazu führen, dass sie nicht in Ihrem Webshop angezeigt werden, bis Sie mit Schritt 2 fertig sind. Wählen Sie das neue Design für alle Inhalte aus, die aktualisiert werden sollen. 1.7. Gehen Sie schließlich zu Empfehlungen / Suche -> Inhalt und ändern Sie Ihren Clerk.io Inhalt, um Ihr neues Design zu verwenden.

1.7. Da! Sie sind jetzt bereit, auf Clerk.js 2 umzuschalten.

Schritt 2: Das Skript ersetzen #

2.1. Beginnen Sie damit, die Vorlagendatei zu lokalisieren, die verwendet wird, um alle Seiten des Webshops anzuzeigen, und wo sich das ursprüngliche Clerk.js-Skript in der Nähe des unteren Teils befindet.

2.2. Entfernen Sie das alte Skript aus der Datei:

2.3. Gehen Sie als Nächstes zu my.clerk.io -> Einstellungen -> Tracking-Code. Diese Seite enthält jetzt 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.

Herzlichen Glückwunsch! Sie verwenden jetzt das deutlich verbesserte 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