translate funktioniert nicht bei javascript code

[fitfit01]

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('<div class="wishlist-empty-heading"><h2 class="theme_main_heading">Your wishlist is empty</h2><div class="alert alert-warning">'+theme.strings.wishlistNoResult+'</div><a href="/collections/all" class="theme_buttons">Return to shop</a></div>')};

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('<div class="wishlist-empty-heading"><h2 class="theme_main_heading">' + {{ 'products.product.wishlist_empty_text' | t }} + '</h2><div class="alert alert-warning">'+theme.strings.wishlistNoResult+'</div><a href="/collections/all" class="theme_buttons">Return to shop</a></div>')};

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 ?

[Gabe]

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:

<script>
  var wishlistEmptyText = "{{ 'products.product.wishlist_empty_text' | t }}";
</script>

Probiere Variable wie diese in deinem JS:

s = function() {
    r.html('<div class="wishlist-empty-heading"><h2 class="theme_main_heading">' + wishlistEmptyText + '</h2><div class="alert alert-warning">'+theme.strings.wishlistNoResult+'</div><a href="/collections/all" class="theme_buttons">Return to shop</a></div>');
};

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:

<script>
var mytext = '{{ disp_custom_price }}';
</script>

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