Häufig gestellte Fragen

Frontend Währungsumrechnung #

Die integrierte Währungsumrechnung von Shopify erleichtert das Lesen des Währungssymbols und des Wechselkurses im 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 Standardvorlagensprache 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, wo 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 den vorhandenen money oder money_eu Formatter für Preise durch currency_converter.

3. Klicken Sie auf Design aktualisieren.

4. Sie werden nun in der Lage sein, die umgerechneten Preise und das Währungssymbol in Ihrem Design zu sehen:

Shopify-frontend-api-Lösungen #

Haftungsausschluss: Dies ist eine sehr benutzerdefinierte Lösung zur Preisumrechnung, wenn keine Daten von der Shopify-API vorliegen. Verwenden Sie dies nur, wenn Sie eine spezifische und benutzerdefinierte Einrichtung 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.

Das Designmuster besteht aus den folgenden Teilen:

• Eine Sammlung, die alle Produkte enthält.
• Ein alternatives Layout zum Rendern 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 mit einer Bedingung 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 mit 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 aus.

Wählen Sie liquid für den Dateityp.

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

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

Sie können gerne Felder zu den Produkten in dieser Vorlage hinzufügen, wie erforderlich.

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 der Daten.

Jede Änderung im Währungs-Kontext macht ebenfalls die Daten 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 bestimmten Kindelementen innerhalb jedes Produktkachels.

Das Beispiel umfasst die Felder list_price und price.

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

Verfolgen mehrerer Währungen in 1 Shop #

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

Wenn Sie mehrere Währungen in Ihrem Shopify-Webshop verwenden, ist es wichtig, dass Bestellungen in einer 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 berichten. Deshalb ist es wichtig, in eine Währung zu übersetzen – schließlich möchten Sie nicht, dass ein Kauf von 600 GBP 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 innerhalb des Sales Tracking-Codes 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 Sales 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 Sales Tracking-Code. Ihre Bestellungen sollten nun als eine Währung in die Clerk.io-Dashboards fließen.

Gemeinsame Theme-Dateien finden #

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 das HTML in der Theme-Datei mit dem HTML auf der entsprechenden Seite vergleichen, um zu sehen, ob sie übereinstimmen.

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

Sie können dann das HTML auf der Seite inspizieren 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 verschiedenen Shopify-Themes 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 zu präsentieren, bevor sie den Checkout-Prozess beginnen.

1. Bearbeiten Sie den Code Ihres Shopify-Themes in Online-Shop > Themes > Code bearbeiten.
2. Finden Sie die Datei, in der sich die Vorlage für den Warenkorb befindet (normalerweise cart-drawer.liquid oder ähnlich genannt).
3. Fügen Sie einen Clerk-Empfehlungs-Snippet aus Empfehlungen > Inhalt ein. Ändern Sie die Klasse von clerk, um das Rendering zu steuern. Zum Beispiel, indem Sie sie 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 die Clerk-Empfehlungen anzuzeigen, wenn der Benutzer den Warenkorb öffnet. Ein Ansatz ist die Verwendung eines MutationObservers. Das folgende Skript enthält 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;
    }

    // Callback-Funktion, 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 Callback-Funktion 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 ungebetene Besucher zu vermeiden.

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

Sie können den Importer leicht ü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 Webshop-Server dafür verantwortlich, die Produkt-, Kategorie- und Verkaufsdaten an Clerk.io.

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

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

401 Serverfehler: Unautorisiert #

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

Dies wird einfach behoben, 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 -> Verwalten Sie private Apps -> 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 die deaktivierten 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 Ende 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 geschieht, wird der folgende Fehler in Ihrer Konsole angezeigt:

Uncaught ReferenceError: Clerk is not defined

Es gibt zwei Möglichkeiten, Require.js zu behandeln. 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 dazu zu bringen, Clerk.io. zu erkennen.

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, wird Require.js nun mit Clerk.io kompatibel sein.

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 ein Upgrade durchzuführen.

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 offensichtlich wird, 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 über Produkte 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. Wählen Sie das neue Design für alle Inhalte aus, die aktualisiert werden sollen. 1.7. Gehen Sie zuletzt 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 Bodens 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 die viel verbesserte Clerk.js 2-Konfiguration!

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