FAQ

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 einer formatter gebündelt, die wie folgt funktionieren wird solange Ihre 3rd-Party-App das integrierte Währungsobjekt von Shopify verwendet.

Standardlösung #

Sie müssen einen Formatierer in Ihren Designs verwenden, um Preise zu konvertieren. Dies ist ein Beispiel aus unserer Standardvorlagensprache hier. 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.

Im Design-Editor

1. 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-Entwurf (Code-Modus)

1. Gehen Sie in my.clerk.io auf Suchen/Empfehlungen -> Designs und klicken Sie auf Design bearbeiten für Ihren Entwurf.

2. Ersetzen Sie den bestehenden Geld oder Geld_eu Formatierer für Preise durch Währung_Konverter

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 basierend auf Geo-IP-Änderungen verwenden.

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

Kontextuelle Daten JIT erhalten

In diesem Abschnitt wird beschrieben, wie man kontextbezogene Daten in Echtzeit für die Anzeige von Inhalten erhält, die von der Clerk.io API zurückgegeben werden.

Das Entwurfsmuster besteht aus den folgenden Teilen:

• Eine Sammlung, die alle Produkte enthält.
• Ein alternatives Layout für die Darstellung von 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 heißen, da sie dann die Route /collection/clerk-api frontend erhält.

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

2. Das alternative Layout für Sammlungen

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

Dazu bearbeiten wir zunächst den Themencode des Themas, das wir verwenden möchten. Drücken Sie unter dem Abschnitt Vorlagen auf der linken Seite auf Add new Template.

Im Popup wählen Sie collection als Ressourcentyp.

Wählen Sie liquid für den 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 zu holen und sie so vorzubereiten, dass sie verwendet werden können, müssen wir den gesamten Inhalt von index.js in unserem Ordner class in diesem Projekt innerhalb des Skript-Tags mit Clerk.js platzieren, 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 der letzten Datenerstellung.

Jede Änderung im Währungskontext 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 aufnehmen. Die Funktion greift auf die Daten zu, wenn sie verfügbar sind, und platziert sie in bestimmten untergeordneten Elementen innerhalb jeder Produktkachel.

Das Beispiel enthält die Felder list_price und price.

Zu beachtende Dinge: Wenn Sie andere Felder als price und list_price verwenden möchten, fügen Sie diese in collection.json.liquid ein und bearbeiten dann 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 Store verfolgen #

> Dies ist veraltet. Das Zählpixelskript ersetzt dies. Führen Sie die Schritte 4 und 5 auf Erste Schritte mit der Shopify-Anleitung aus.

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 der Währung ein angezeigt. Wenn Sie zum Beispiel in Ihrem Webshop sowohl GBP als auch DKK 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 im Code für die Verkaufsverfolgung angepasst werden, den Sie bei der ursprünglichen Installation von Clerk.io zu Ihrem Shop hinzugefügt haben.

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

<!-- 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 -->

In diesen:

<!-- 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 -->

Vergewissern Sie sich, dass Sie Behalten Sie das Skript für das Besucher-Tracking bei - es befindet sich direkt unter dem Code für das Verkaufs-Tracking aufrufen. Ihre Aufträge sollten nun als eine Währung in die Clerk.io Dashboards einfließen.

Gemeinsame Themendateien finden #

Shopify verfügt über mehr als 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 Themendatei mit dem HTML-Code auf der entsprechenden 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.

Empfehlungen für Schubladen #

Die Installation durch einen Shopify-Entwickler wird dringend empfohlen. Diese Anleitung beschreibt eine stark angepasste Lösung, die sich bei verschiedenen Shopify-Themes unterschiedlich verhalten kann. Sie wurde speziell für Themes entwickelt, 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 Recommendations in der Schublade des Warenkorbs auf Shopify ist eine großartige Möglichkeit, dem Kunden zusätzliche Produkte zu präsentieren, bevor er mit dem Bezahlvorgang beginnt.

1. Bearbeiten Sie den Code Ihres Shopify-Themas unter Online-Geschäft > Themen > Code bearbeiten.
2. Suchen Sie die Datei, in der sich die Vorlage für die Einkaufswagenschublade befindet (in der Regel heißt sie cart-drawer.liquid oder ähnlich).
3. Fügen Sie ein Clerk Empfehlungs-Snippet aus Empfehlungen > Inhalt ein. Benennen Sie die Klasse von clerk in Steuerung des Renderings um. Nennen Sie sie zum Beispiel clerk_m:

<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 ein, um Clerk Recommendations zu rendern, wenn der Benutzer den Warenkorb öffnet. Ein Ansatz ist die Verwendung eines MutationObservers. Das folgende Skript enthält alle diese Elemente und gibt Ihnen ein Beispiel, wie Sie vorgehen können. Zum Beispiel:

<script>
    // Select the node that will be observed for mutations
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Add all of the class names of the cart drawer, when it is opened
    const targetNodeClasses = "drawer animate active";

    // Options for the observer (which mutations to observe)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Function to fetch cart data
    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 function to execute when mutations are observed
    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;
                    }
                }

            }
        }
    };

    // Create an observer instance linked to the callback function
    const clerk_observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    clerk_observer.observe(targetNode, config);
</script>

Ihre Cart Drawer-Datei sollte wie folgt aussehen:

Synchronisierung mit HTTP-Authentifizierung #

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

In diesem Fall wird der Clerk Importer ebenfalls blockiert und ein 401 Nicht autorisiert Fehler im Synchronisierungsprotokoll angezeigt.

Sie können den Importer leicht überprüfen, indem Sie die Authentifizierungsinformationen in die Import-URL einfügen (siehe unten), und zwar 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.

In einigen Fällen kann die Konfiguration des Servers jedoch den Zugriff des Importers verhindern, was zu einem Fehler in Daten-Synchronisation.

Im Folgenden 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 HTTP-Authentifizierung erfordert, um darauf zuzugreifen.

Dies wird einfach durch Einfügen von Benutzername und Kennwort 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 Zugriff lesen nicht für Inhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen in Ihrer Private App freigegeben haben.

So beheben Sie ihn:

1. Melden Sie sich bei Shopify an und gehen Sie auf 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 Inhalte wie Artikel, Blogs, Kommentare, Seiten und Weiterleitungen speichern und wählen Sie Lesezugriff:

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

Handhabung von 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. In beiden Fällen müssen Sie Änderungen an der Tracking-Skript, vornehmen, die normalerweise in index.liquid.

Einfügen von “clerk” in Require.js #

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

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 Folgendes einfügen window.__clerk_ignore_requirejs = true;

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 flexiblere Version unserer JavaScript-Bibliothek, die die Installation von Beamter.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 Hauptunterschiede in Clerk.js 2 sind:

• Die Designs in mein.clerk.io verwenden die PLACEHOLDER_58 Schablonensprache , können aber auch einfach mit dem Design Editor erstellt werden.

• Das Skript muss nur vor der Tag in Ihre Webshop-Vorlage eingefügt werden.

Schritt 1: Konvertieren 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 die intuitive Editor gestalten, 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 man es macht.

1.1 Gehen Sie zunächst auf PLACEHOLDER_61_ -> Empfehlungen / Suche -> Designs und klicken Sie auf Neues Design:

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

1.3. Wählen Sie Design-Typ.

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

1.5. Klicken Sie auf Editor gestalten auf eines der vorhandenen Elemente wie den Namen, das Bild, die Schaltfläche usw., um es zu bearbeiten, oder fügen Sie dem Entwurf neue Elemente hinzu, um weitere Informationen über Produkte zu erhalten.

1.6. Klicken Sie auf Veröffentlichen. Dies bewirkt, dass sie vorübergehend nicht in Ihrem Webshop angezeigt werden, bis Sie mit Schritt 2. fertig sind. 1.7. Gehen Sie schließlich zu Empfehlungen / Suche -> Inhalt und ändern Sie Ihre Beamter.io Inhalte so, dass sie Ihr neues Design verwenden.

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

Schritt 2: Ersetzen des Skripts #

2.1. Suchen Sie zunächst die Vorlagendatei, mit der alle Seiten des Webshops angezeigt werden, 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. Rufen Sie dann PLACEHOLDER_63 -> Einstellungen -> Tracking Code. auf. 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.

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

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