/cart.js - Wir nicht zur Verfügung gestellt | E-Commerce Tracking

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo liebe Community,

ich bin noch nicht so lange ein Shopify-User daher bitte ich um Nachsicht <3.

Ich habe ein Problem und erhoffe mir das vllt. jemand auch dieses Problem hatte und bereits zu einer Lösung gekommen ist.

Ich verwende folgende Komponenten:

  • Shopify Basic
  • Shopify App | Translation Lab
  • Shopify App | easyTag & DataLayer
  • Google Tag Manager
  • Google Analytics (UA & GA4)

Zu meinem Problem: Ich möchte über den Tag-Manager das Event “Add To Cart” via E-Commerce Tracking und den dazugehörenden DataLayer messen. Meinen Shop (femacy.de) gibt es in zwei Sprachversionen (Englische - Ursprungssprache und Deutsch, Sprachversion erzeugt über die App - Translation Lab). Wenn ich ein Produkt in der Ursprungssprache (Englisch) in den Warenkorb lege, wird mit die “cart.js” zur Verfügung gestellt. Diese ist wohl notwendig, damit die App - easyTag & DataLayer entsprechenden das Event auslöst und über den DataLayer die Informationen an Google Analytics weitergibt.

Wenn ich in der Sprachversion (Deutsch) erzeugt über Translation Lab ein Produkt in den Warenkorb lege, wir mir NICHT die “cart.js” zur Verfügung gestellt. Daher wird das entsprechende Event auch nicht ausgelöst. Gleiches passiert wenn ich ein Produkt aus den Warenkorb entferne.

Die App - easyTag & DataLayer hat zwar ein Fallback-Funktion, die dass Event nachschickt, wenn die Seite oder eine andere Seite neu geladen wird, dass aber nur auf Seiten auf den der Tag-Manager auch hinterlegt ist. Das wiederum führt zu einem Problem. Wenn ein User ein Produkt in den Warenkorb legt, dann direkt auf Check Out klickt geht mir das Event verloren, da ich den Tag-Manager nicht in der “checkout.liquid” hinterlegen kann (da Shopify Basic das nicht ermöglicht).

Leider kenne ich mich überhaupt nicht mit der “cart.js” aus und kann daher nicht nachvollziehen warum in der Sprachversion diese nicht erzeugt bzw. zur Verfügung steht.

Sollte hier jemand dieses Problem kennen oder mein Problem nachvollziehen können, würde ich mich sehr über Feedback freuen.
Sollten Informationen fehlen, liefere ich diese gerne nach.

Vielen Dank liebe Community,

Bigby

2

Hey @Bigby

Leider kenne ich mich damit nicht sehr gut aus und ggf. kann dir einer unserer Experten helfen, wie Mario - @r8r . Aber es scheint, dass wenn es in der Hauptsprache funktioniert und nicht in der zweiten Sprache dann deutet dies stark auf ein Problem mit der Translation Lab App und der korrekten übersetzung in den liquid Dateien. Das Problem könnte direkt im ATC (add to cart) Button und dessen Übersetzung liegen.

Wichtig: es könnte aber auch einer der anderen Apps, die du aufgelistet hast, die das Problem im Code verursachen könnte da die App das locale nicht berücksichtigt und hier muss man leider die Nadel im Heuhaufen suchen. Da das Problem im ATC Button zu liegen scheint, könntest du beispielsweise nicht nach den , sondern auf das schauen, und im cart-template.liquid folgendes Code suchen:

<form action="/cart"

…und in folgendes ändern:

<form action="{{ routes.cart_url }}"

Folgendes könnte beispielsweise die Zeile sein, in der die Sprache des ATC Buttons in der Datei theme.js.liquid überschrieben wurde und wenn man diese Zeile herausschneidet, könnte die Schaltfläche perfekt funktionieren und richtig übersetzen aber man weiß nicht ob das Herausnehmen dieser Codezeile andere negativen Auswirkungen haben wird… Man kann die Zeile einfach auskommentieren zwischen "/* */" Tags und eine Notiz hinterlassen:

$addToCartText: $('#AddToCartText', this.$container),

Du kannst z. B. folgendes probieren aber ggf. in einer Themekopie zuerst. Das folgende ist aber ohne Gewähr und stark Themenabhängig. Vielleicht bringt es dich wenigstens auf den richtigen Weg das Problem zu lösen:

  1. Gehe zu product-template.liquid, und suche den folgenden Abschnitt in der Vorlage. Er sollte sich weiter unten befinden:
  1. Füge diese beiden Zeilen in den Code ein:
itemAddedToCart: {{ 'products.product.item_added_to_cart' | t | json }},

viewCart: {{ 'products.product.view_cart' | t | json }},
  1. Endgültiger Code sollte wie folgt aussehen:

Hier auch ein paar Schritte zur Behebung der Übersetzung der AddToCart-Schaltfläche, nach dem Hinzufügen von Produkten zum Warenkorb.

Man kann für die Schaltfläche dasselbe machen, wie oben in der theme.js.liquid in der product-template.liquid machen. Es sollte keine Auswirkungen auf den Rest des Themas haben, da man nur den $addToCartText geändert hat.

Aus Gründen der Transparenz den Abschnitt der Codezeile in der product-template.liquid auskommentieren. Im Grunde, muss man die span id=“addToCartText” entfernen:


{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
1 Like
3

@Bigby – der @Gabe hat die Analyse glaub ich schon ganz gut zusammengefasst:

wenn es in der Hauptsprache funktioniert und nicht in der zweiten Sprache dann deutet dies stark auf ein Problem mit der Translation Lab App und der korrekten übersetzung in den liquid Dateien.

Aus dem Stegreif isses echt schwer da was zu sagen. Für mich macht das nur Sinn, wenn man hier eine Detailanalyse des Quelltextes anstellt. Daraus sollte sich dann mehr Erkenntnis ziehen – und hoffentlich eine Lösung destillieren – lassen. Solltest Du Interesse an so einer detaillierteren Untersuchung haben, kannst Du Dich auch gerne melden.

Liebe Grüße,
Mario

2 Likes
4

@Gabe , @r8r ,

erstmal vielen lieben Dank.

@Gabe , ich habe versucht deine Wege in den Liquids nachzuvollziehen. Leider scheint mir Shopify “Basic” oder das Verwendete Theme nicht alle Liquids zur Verfügung zu stellen. Da ich weder eine “theme.js.liquid” noch eine “product-template.liquid” einsehen bzw. finden kann.

@r8r ,

wenn du dich in der Lage fühlst, dieses Problem zu lösen, würde ich mich freuen wenn du mit mir in Kontakt tretest.

Vielen Dank

Bigby

1 Like
5

@Bigby – ich kann Dir anbieten, dass ich mal einen Blick darauf werfe … ich schreib Dir eine PN.

Liebe Grüße,
Mario

1 Like