Liquid, JavaScript, Themes
Hallo Leute,
leider konnte ich kein passendes Thema für mein Problem finden, sollte ich es übersehen haben, gebt mir gern Bescheid! 🙂
Ich habe folgendes Anliegen:
Ich möchte auf meinen Produktseiten eine geschätzte Lieferzeit angeben, welche sich auch dynamisch an das aktuelle Datum anpasst. Ich benutze übrigens das Dawn-Theme.
Nehmen wir also zum Beispiel an, ich möchte heute am 2. Juli etwas bestellen, dann soll mir die Seite folgendes anzeigen: "Lieferung zwischen Mittwoch 5. Juli - Freitag 7. Juli".
Dafür möchte ich jedoch nicht dass Lieferanten/Anbieter-Feld nutzen, da die Anzeige, wie gesagt, dynamisch sein und sich dem aktuellen Datum anpassen soll. (Ausserdem nutze ich das Lieferanten/Anbieter-Feld für die jeweiligen Hersteller).
Nun habe ich im Internet folgenden Liquid-Code gefunden, der auch tatsächlich genau das macht, was ich mir vorstelle:
<p> <img src="https://cdn-icons-png.flaticon.com/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/> Get it between <strong><span id="fromDate"></span> - <span id="toDate"></span></strong> </p> {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }} <script> var fromDate = Date.today().addDays(5); if (fromDate.is().saturday() || fromDate.is().sunday()) { fromDate = fromDate.next().monday(); } var toDate = Date.today().addDays(10); if (toDate.is().saturday() || toDate.is().sunday()) { toDate = toDate.next().monday(); } document.getElementById('fromDate').innerHTML = fromDate.toString('dddd MMMM dS'); document.getElementById('toDate').innerHTML = toDate.toString('dddd MMMM dS'); </script>
Das Problem daran ist nur, dass es auf Englisch geschrieben ist und dementsprechend so aussieht:
Ihr seht also, jegliche Hilfe die ich benötige, bezieht sich lediglich darauf, den Code auf unsere deutschen Verhältnisse anzupassen. Da im Code selbst nicht alle Wochentage aufgezählt sind, weiss ich leider nicht wie ich vorgehen muss. Und selbst wenn, wüsste ich nicht wie ich das jeweilige Datum an unsere Daten anpasse ( "July 7th"/7. Juli)
Ich hoffe jemand der mehr Ahnung von den Liquids hat kann mir hier weiterhelfen und sage schon mal danke im vorraus! 🙂
Gelöst! Zur Lösung
Erfolg.
Hallo LoganDeLaCruz,
gerne helfe ich dir weiter.
Dieser Code sollte dir die Lieferzeiten auf Deutsch anzeigen:
<p><img src="https://cdn-icons-png.flaticon.com/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>
Lieferung zwischen <strong><span id="fromDate"></span> - <span id="toDate"></span></strong></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fromDate = Date.today().addDays(1);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
var toDate = Date.today().addDays(3);
if (toDate.is().sunday()) {
toDate = toDate.next().monday();
}
let options = { weekday: 'long', month: 'long', day: 'numeric' };
document.getElementById('fromDate').innerHTML = fromDate.toLocaleString('de-DE',options);
document.getElementById('toDate').innerHTML = toDate.toLocaleString('de-DE',options);
</script>
Viele Grüße
Erfolg.
Hallo LoganDeLaCruz,
gerne helfe ich dir weiter.
Dieser Code sollte dir die Lieferzeiten auf Deutsch anzeigen:
<p><img src="https://cdn-icons-png.flaticon.com/512/1670/1670915.png" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>
Lieferung zwischen <strong><span id="fromDate"></span> - <span id="toDate"></span></strong></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fromDate = Date.today().addDays(1);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
var toDate = Date.today().addDays(3);
if (toDate.is().sunday()) {
toDate = toDate.next().monday();
}
let options = { weekday: 'long', month: 'long', day: 'numeric' };
document.getElementById('fromDate').innerHTML = fromDate.toLocaleString('de-DE',options);
document.getElementById('toDate').innerHTML = toDate.toLocaleString('de-DE',options);
</script>
Viele Grüße
Danke! Das funktioniert, schön, dass es am ende doch so "einfach" war. 😄
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