translate funktioniert nicht bei javascript code

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Problem: Ein Benutzer versucht, hartcodierten Text (“Your wishlist is empty”) in einer Wishlist-App mit Liquid-Template-Syntax ({{ 'products.product.wishlist_empty_text' | t }}) zu übersetzen, erhält jedoch JavaScript-Fehler.

Ursache: Liquid-Syntax funktioniert nicht direkt in JavaScript-Code.

Lösungsvorschlag:

  • Den übersetzten Text in eine JavaScript-Variable im HTML-Template einfügen, bevor der JS-Code geladen wird
  • Beispiel: <script>var wishlistEmptyText = "{{ 'products.product.wishlist_empty_text' | t }}";</script>
  • Diese Variable dann im JavaScript verwenden: r.html('## ' + wishlistEmptyText + '...')

Alternative Methode:

  • Eine externe JavaScript-Datei erstellen und mit dem Shopify-Theme verknüpfen
  • Liquid-Variablen innerhalb von JavaScript-Blöcken mit einfachen Anführungszeichen verwenden
  • Dies ermöglicht bessere Code-Organisation und Verwaltung

Hinweis: Es wurde gefragt, ob mit den App-Entwicklern gesprochen wurde, da externe Apps möglicherweise nicht automatisch übersetzbar sind.

Status: Diskussion bietet konkrete Lösungsansätze, aber keine Bestätigung ob das Problem gelöst wurde.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Guten Tag,

ich wollte das mit meiner translate app übersetzen aber ich bekomme ein fehler da etwas mit meinem javascript code nicht stimmt.

Das hab ich gefunden:

s=function(){r.html('## Your wishlist is empty'+theme.strings.wishlistNoResult+'
Return to shop
')};

Wie sie sehen ist da ein hardgecodeter Text, da steht “Your wishlist is empty”.

Das wollte ich übersetzen wie z.b hier:

s=function(){r.html('## ' + {{ 'products.product.wishlist_empty_text' | t }} + ''+theme.strings.wishlistNoResult+'
Return to shop
')};

Wie sie sehen habe ich diese Zeile eingefügt:

{{ 'products.product.wishlist_empty_text' | t }}

jedoch bekomm ich einen javascript fehler und die seite ladet nicht mehr. Kann mir jemand verraten wie ich das lösen kann ?

2

Hey @fitfit01

Um welche Wishlist App handelt es sich hier? Es ist ggf. nicht möglich Texte die von externen Apps erstellt werden automatisch zu übersetzen. Hast du mit den App Entwickler gespreochen?

Du versuchst also, eine Liquid-Template-Syntax ({{ 'products.product.wishlist_empty_text' | t }}) in deinen JS einzufügen. Liquid funktioniert nicht direkt in JavaScript-Code. Stattdessen kannst du den übersetzten Text in eine JavaScript-Variable einfügen, die dann im Code verwendet wird wie folgendes Beispiel:

  1. Definiere eine JavaScript-Variable im HTML-Template, bevor dein JavaScript-Code geladen wird. Diese Variable sollte den übersetzten Text enthalten. Zum Beispiel:

Probiere Variable wie diese in deinem JS:

s = function() {
    r.html('## ' + wishlistEmptyText + ''+theme.strings.wishlistNoResult+'
Return to shop
');
};

Auf diese Weise wird der übersetzte Text korrekt in deinem JavaScript-Code eingefügt, und es sollte keinen Fehler mehr geben.

Stelle sicher, dass das Script-Tag mit der Variablendefinition vor dem Script-Tag steht, das deinen JavaScript-Code enthält, damit die Variable wishlistEmptyText korrekt initialisiert wird, bevor sie verwendet wird.

Ein Beispiel, das in der Shopify-Community diskutiert wurde, wie man eine Liquid-Variable in einem JavaScript-Block verwendet:

Hier wird die Liquid-Variable disp_custom_price innerhalb eines JavaScript-Blocks unter Verwendung von einfachen Anführungszeichen eingesetzt. Eine andere Methode, die oft empfohlen wird, besteht darin, eine externe JavaScript-Datei zu erstellen und mit dem Shopify-Theme zu verknüpfen.

Eine andere empfohlene Methode besteht darin, eine externe JavaScript-Datei zu erstellen und mit dem Shopify-Theme zu verknüpfen. Diese Methode hilft dabei, den Code sauber und organisiert zu halten. Eine JavaScript-Datei lokal erstellen und sie dann in das Shopify-System hochladen. Nach dem Hochladen die Datei in die Shopify-Vorlage integrieren, indem du sie in der Datei theme.liquid verlinkst. Diese Methode ermöglicht es, benutzerdefinierten JavaScript-Code effizienter zu verwalten und zu organisieren​​.

Hoffe das hilft dir weiter! :wink: