Liquid, JavaScript, Themes
Hi zusammen,
wir haben in unserem Shop im Hauptmenü oben einen Menüpunkt mit einem externen Link zu unseren Blog.
Nutzt der User den Shop auf deutsch, passt alles - er klickt auf den Link und landet in unserem DE-Blog z. B. www.xyz.de.
Wenn die Shopsprache auf englisch gestellt ist, sollte der Link aber auch auf den englischen Blog-Link verweisen z. B. www.xyz.de/en.
Wie kann ich das umsetzen? Im Navigationsmenü kann ich ja lediglich einen Link für den gesamten SHop hinterlegen und nicht je Sprache. In den liquids habe ich bisher auch nichts passendes gefunden. Ist das überhaupt möglich?
Vielen Dank schon mal für Eure Hilfe.
Viele Grüße
Sebastian
Gelöst! Zur Lösung
Erfolg.
Hey Sebastian! @Sebastian222
Es ist immer gut eine geolokalisierte Experience deinen Kunden anzubieten denn vielleicht hast du unterschiedlichem Inhalt in deinem Shop je nach Region des Besuchers. Du möchtest auch vielleicht deinen Schweizer Kunden einen anderen Inhalt anbieten (Produkte, Blogs, Angebote, Preise usw.) als deinen deutschen Kunden. Oder wie du sagst, den Kunden zu einem externen deutschen Blog verlinken wenn dieser aus der deutsch-sprachigen Region zum Shop kommt, oder einen externen englischen Bog wenn der Besucher aus dem englischsprachigen Raum kommt.
Wenn du beispielsweise genauer bestimmen möchtest, aus welchem Land der Benutzer stammt, um zum Beispiel unterschiedliche externe Blog-Links für verschiedene Länder anzubieten, könntest du eine Geolocation-API wie die von IPinfo oder ähnlichen Diensten verwenden. Gerne kann ich bei Bedarf weitere Tipps dazu geben.
Die Möglichkeiten des nativen Systems und unserer Anleitungen
Wenn das nicht mit URL Redirects geht, was ich fast bezweifele, dann kannst du auch Eindeutige URLs für bestimmte Länder oder Regionen einrichten, aber das könnte auch nur die Unterordner der URLs betreffen, sprich, die Suffixe der URLs.
Wenn das alles nicht geht wirst du das eincoden muessen. wo du eine bestimmte eine Logik brauchst, die prüft, welche Sprache der Nutzer ausgewählt hat, und dann den entsprechenden Link ausgibt.
Shopify stellt normalerweise eine Variable zur Verfügung, mit der man erkennen kann, welche Sprache der Nutzer ausgewählt hat. Wenn der Shop das Internationalisierungsfeature von Shopify verwendet, könnte man auf die Spracheinstellung über eine Variable wie request.locale
zugreifen. Je nach erkannter Sprache könnte man den href
-Attribut des Links dynamisch anpassen (mehr dazu hier).
Hier ist ein Beispielcode:
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
<li>
<header-menu>
<!-- Ihre anderen Menüpunkte -->
</header-menu>
</li>
<li>
<a id="HeaderMenu-blog-link" href="#" class="header__menu-item list-menu__item link link--text focus-inset">
<span>Blog</span>
</a>
<script>
document.addEventListener("DOMContentLoaded", function() {
var blogLink = document.getElementById('HeaderMenu-blog-link');
if ({{ request.locale }} == 'de') {
blogLink.setAttribute('href', 'https://www.xyz.de');
} else if ({{ request.locale }} == 'en') {
blogLink.setAttribute('href', 'https://www.xyz.de/en');
}
});
</script>
</li>
<!-- Ihre anderen Menüpunkte -->
</ul>
</nav>
In diesem Beispiel:
<script>
-Tag wird verwendet, um das href
-Attribut des Links nach dem Laden der Seite zu ändern, basierend auf der Spracheinstellung.{{ request.locale }}
Liquid-Variable wird dazu genutzt, die aktuelle Spracheinstellung des Nutzers abzufragen. Beachte, dass du den genauen Namen dieser Variable überprüfen musst, da dieser je nach Shopify-Konfiguration unterschiedlich sein kann.Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Erfolg.
Hey Sebastian! @Sebastian222
Es ist immer gut eine geolokalisierte Experience deinen Kunden anzubieten denn vielleicht hast du unterschiedlichem Inhalt in deinem Shop je nach Region des Besuchers. Du möchtest auch vielleicht deinen Schweizer Kunden einen anderen Inhalt anbieten (Produkte, Blogs, Angebote, Preise usw.) als deinen deutschen Kunden. Oder wie du sagst, den Kunden zu einem externen deutschen Blog verlinken wenn dieser aus der deutsch-sprachigen Region zum Shop kommt, oder einen externen englischen Bog wenn der Besucher aus dem englischsprachigen Raum kommt.
Wenn du beispielsweise genauer bestimmen möchtest, aus welchem Land der Benutzer stammt, um zum Beispiel unterschiedliche externe Blog-Links für verschiedene Länder anzubieten, könntest du eine Geolocation-API wie die von IPinfo oder ähnlichen Diensten verwenden. Gerne kann ich bei Bedarf weitere Tipps dazu geben.
Die Möglichkeiten des nativen Systems und unserer Anleitungen
Wenn das nicht mit URL Redirects geht, was ich fast bezweifele, dann kannst du auch Eindeutige URLs für bestimmte Länder oder Regionen einrichten, aber das könnte auch nur die Unterordner der URLs betreffen, sprich, die Suffixe der URLs.
Wenn das alles nicht geht wirst du das eincoden muessen. wo du eine bestimmte eine Logik brauchst, die prüft, welche Sprache der Nutzer ausgewählt hat, und dann den entsprechenden Link ausgibt.
Shopify stellt normalerweise eine Variable zur Verfügung, mit der man erkennen kann, welche Sprache der Nutzer ausgewählt hat. Wenn der Shop das Internationalisierungsfeature von Shopify verwendet, könnte man auf die Spracheinstellung über eine Variable wie request.locale
zugreifen. Je nach erkannter Sprache könnte man den href
-Attribut des Links dynamisch anpassen (mehr dazu hier).
Hier ist ein Beispielcode:
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
<li>
<header-menu>
<!-- Ihre anderen Menüpunkte -->
</header-menu>
</li>
<li>
<a id="HeaderMenu-blog-link" href="#" class="header__menu-item list-menu__item link link--text focus-inset">
<span>Blog</span>
</a>
<script>
document.addEventListener("DOMContentLoaded", function() {
var blogLink = document.getElementById('HeaderMenu-blog-link');
if ({{ request.locale }} == 'de') {
blogLink.setAttribute('href', 'https://www.xyz.de');
} else if ({{ request.locale }} == 'en') {
blogLink.setAttribute('href', 'https://www.xyz.de/en');
}
});
</script>
</li>
<!-- Ihre anderen Menüpunkte -->
</ul>
</nav>
In diesem Beispiel:
<script>
-Tag wird verwendet, um das href
-Attribut des Links nach dem Laden der Seite zu ändern, basierend auf der Spracheinstellung.{{ request.locale }}
Liquid-Variable wird dazu genutzt, die aktuelle Spracheinstellung des Nutzers abzufragen. Beachte, dass du den genauen Namen dieser Variable überprüfen musst, da dieser je nach Shopify-Konfiguration unterschiedlich sein kann.Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hi Gabe, vielen Dank für Deine Antwort - über den COde konnte ich das lösen.
Viele Grüße
Sebastian
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024