Liquid, JavaScript, Themes
Hallo,
ich habe ein Metafeld bei meinen Produkten, welches das Datum anzeigt, wann Artikel die nicht auf Lager sind, eintreffen werden. Ich hätte nun gerne, das bei den Produkten das Datum nur dann angezeigt wird, wenn es noch in der Zukunft liegt. Gibt es irgendwie die Möglichkeit eine If Abfrage zu bauen? Wenn Datum heute oder älter, dann Metafield nicht anzeigen oder halt wenn das Datum noch nicht erreicht wurde, dann das Feld anzeigen?
mfg
Gelöst! Zur Lösung
Erfolg.
Hey @Otsche1g
Super Idee und du kannst bestimmt mit einer Abfrage im Theme Liquid Code prüfen, ob das Datum im Metafeld größer ist als das heutige Datum.
Wenn du es selber DIY 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 folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um eine bedingte Anzeige für ein Metafeld basierend auf dem Datum im Liquid-Code von Shopify zu erstellen, den folgenden Ansatz verwenden:
Assign the metafield to a variable:
{% assign arrival_date = product.metafields.namespace.key %}
Convert the metafield date to a Liquid date object:
{% assign arrival_date = arrival_date | date: "%s" %}
Get today's date in the same format:
{% assign today = 'now' | date: "%s" %}
Compare the dates and display the metafield if the condition is met:
{% if arrival_date > today %}
{{ product.metafields.namespace.key }}
{% endif %}
Dann namespace
und key
mit deinem tatsächlichen Metafelder-Namensraum und Schlüssel. Dieser Code prüft, ob das Ankunftsdatum im Vergleich zum heutigen Datum in der Zukunft liegt und zeigt das Metafeld nur an, wenn die Bedingung erfüllt ist. Mehr über Datum in Liquid erfährst du in Shopify's Liquid date filters Doku:
ODER
Du kannst beispielsweise einen Liquid-Code in die Produkt-Template-Datei einbauen, der prüft, ob das Datum im Metafeld in der Zukunft liegt:
{% assign today_date = 'now' | date: '%Y-%m-%d' %}
{% assign arrival_date = product.metafields.custom.arrival_date %}
{% if arrival_date > today_date %}
<p>Dieses Produkt wird am {{ arrival_date }} verfügbar sein.</p>
{% endif %}
today_date
: Setzt das heutige Datum im Format YYYY-MM-DD
.arrival_date
: Holt das Datum aus dem Metafeld (ersetze custom.arrival_date
durch den tatsächlichen Namespace und Schlüssel deines Metafelds).arrival_date
größer ist als das today_date
.YYYY-MM-DD
gespeichert wird, damit der Vergleich korrekt funktioniert.Damit solltest du sicherstellen können, dass das Metafeld mit dem Datum nur dann angezeigt wird, wenn das Datum in der Zukunft liegt, und somit nur relevante Informationen für deine Kunden dargestellt werden.
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 @Otsche1g
Super Idee und du kannst bestimmt mit einer Abfrage im Theme Liquid Code prüfen, ob das Datum im Metafeld größer ist als das heutige Datum.
Wenn du es selber DIY 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 folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Um eine bedingte Anzeige für ein Metafeld basierend auf dem Datum im Liquid-Code von Shopify zu erstellen, den folgenden Ansatz verwenden:
Assign the metafield to a variable:
{% assign arrival_date = product.metafields.namespace.key %}
Convert the metafield date to a Liquid date object:
{% assign arrival_date = arrival_date | date: "%s" %}
Get today's date in the same format:
{% assign today = 'now' | date: "%s" %}
Compare the dates and display the metafield if the condition is met:
{% if arrival_date > today %}
{{ product.metafields.namespace.key }}
{% endif %}
Dann namespace
und key
mit deinem tatsächlichen Metafelder-Namensraum und Schlüssel. Dieser Code prüft, ob das Ankunftsdatum im Vergleich zum heutigen Datum in der Zukunft liegt und zeigt das Metafeld nur an, wenn die Bedingung erfüllt ist. Mehr über Datum in Liquid erfährst du in Shopify's Liquid date filters Doku:
ODER
Du kannst beispielsweise einen Liquid-Code in die Produkt-Template-Datei einbauen, der prüft, ob das Datum im Metafeld in der Zukunft liegt:
{% assign today_date = 'now' | date: '%Y-%m-%d' %}
{% assign arrival_date = product.metafields.custom.arrival_date %}
{% if arrival_date > today_date %}
<p>Dieses Produkt wird am {{ arrival_date }} verfügbar sein.</p>
{% endif %}
today_date
: Setzt das heutige Datum im Format YYYY-MM-DD
.arrival_date
: Holt das Datum aus dem Metafeld (ersetze custom.arrival_date
durch den tatsächlichen Namespace und Schlüssel deines Metafelds).arrival_date
größer ist als das today_date
.YYYY-MM-DD
gespeichert wird, damit der Vergleich korrekt funktioniert.Damit solltest du sicherstellen können, dass das Metafeld mit dem Datum nur dann angezeigt wird, wenn das Datum in der Zukunft liegt, und somit nur relevante Informationen für deine Kunden dargestellt werden.
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
Noch eine Frage, gibt es die Möglichkeit Felder zu definieren, die ich dann in mehrere Sprachen übersetzen kann, aber ohne ein Metafeld zu erzeugen, dass direkt in jedem Artikel im Backend angezeigt wird? Ich würde es gerne mehrsprachig erstellen mit einer Variable, die nur im Frontend ausgegeben wird und von einer Translation-App automatisch in alle Sprachen übersetzt wird, ungefähr so:
{{variable_not.on.stock"}} {{product.metafields.custom.arrival_date.value| date: "%d-%m-%Y"}}</span>
result:
nicht auf Lager, ca. lieferbar ab {{product.metafields.custom.arrival_date.value| date: "%d-%m-%Y"}}</span>
not in stock, approx. available from {{product.metafields.custom.arrival_date.value| date: "%d-%m-%Y"}}</span>
Hey @Otsche1g
Um Textbausteine mehrsprachig zu gestalten, ohne sie als Metafeld in jedem Artikel im Backend anzuzeigen, kannst du eine Übersetzungs-App verwenden. Apps wie Langify oder Weglot können automatisch Texte in verschiedene Sprachen übersetzen. Du kannst diese Apps verwenden, um die Texte im Frontend zu übersetzen. Erstelle Variablen für die Texte, die du übersetzen möchtest:
{% assign not_in_stock_text = "variable_not.on.stock" | t %}
{% assign arrival_date_text = "variable_arrival_date" | t %}
Verwende die Variablen im Template:
{% assign today_date = 'now' | date: '%Y-%m-%d' %}
{% assign arrival_date = product.metafields.custom.arrival_date | date: '%Y-%m-%d' %}
{% if arrival_date > today_date %}
<p>{{ not_in_stock_text }}, {{ arrival_date_text }} {{ arrival_date | date: "%d-%m-%Y" }}</p>
{% endif %}
Langify: Diese App ermöglicht es dir, Texte in deinem Shopify-Shop zu übersetzen. Du kannst die Texte in den Theme-Einstellungen definieren und dann die Übersetzungen in Langify hinzufügen.
Weglot: Diese App übersetzt automatisch alle Texte auf deiner Website. Du kannst die Übersetzungen in Weglot anpassen und sicherstellen, dass die Texte korrekt angezeigt werden.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
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
Danke, die Variable zu erstellen ging einfach, aber was muss ich tun, damit Sie im Übersetzer Programm erscheint?
Habe Sie mit dem Standard Translate & Adapt gesucht und auch extra Langify installiert, in beiden Apps tauchen die Variablen jedoch nicht auf.
(ich habe diese in die Variablen nur in der main-product.liquid eingefügt, müssen diese noch zusätzlich irgendwo hinterlegt werden?)
die ganze Zeit steht "Translation missing: de...." oder je nach Sprache "Translation missing: en...."
Ich habe schon versucht die Variablen "not_in_stock_text" bei der en.default.json und auch bei der de.json hinzuzufügen, danach erscheinen Sie zumindest auch in der Translation App, die Fehlermeldung "Translation missing" ist aber weiterhin da und es wird nichts übersetzt.
Hey @Otsche1g
Um dir dabei behilflich zu sein, wird unser Team das 👀 müssen. Hast du bereits ein Ticket bei unserem Support-Team geöffnet?
Falls nicht, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.
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
Hallo, nach langem Probieren habe ich es hinbekommen, nachdem ich mir jeweils in der de.json und en.default.json einen eignen Bereich als "custom" (Unterbereich "article") erstellt habe, der erschient dann auch in meiner language App (T Lab AI):
"custom": {
"article": {
"not_on_stock": "nicht auf lager, ca. lieferbar ab",
"on_stock": "sofort lieferbar"
}
zum Einbinden dann einfach:
{% assign not_on_stock = "custom.article.not_on_stock" | t %}
{% assign on_stock = "custom.article.on_stock" | t %}
{% assign arrival_date = product.metafields.custom.arrival_date %}
{% assign arrival_date = arrival_date | date: "%s" %}
{% assign today = 'now' | date: "%s" %}
{% if arrival_date > today %}
<span>{{ not_on_stock }} {{product.metafields.custom.arrival_date.value| date: "%d-%m-%Y"}}</span>
{%- else -%}<span >{{ on_stock }}</span>
{% endif %}
Vielen Dank für die Hilfe!
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