Shop Passwort-Seite: Fehlermeldung "Falsche Passwort" anpassen

[dieserbimm]

Hallo, ich bin gerade dabei die letzten Feinheiten meines Onlineshops anzupassen und bin nun auf ein Problem der Passwort-Seite gestossen. Sobald ein falsches Passwort eingegeben wird, erscheint eine Fehlermeldung. Dies ist zunächst richtig und soll auch genau so passieren. Mein Problem ist, dass, die Fehlermeldung nicht schön angezeigt wird und das Passwort-Feld verkleinert (Siehe Bild 2). Ich würde die Fehlermeldung "Falsches Passwort" gerne genauso anzeigen lassen, wie die Bestätigung für das eintragen der E-mail (Siehe Bild 1). Es soll eine Nachricht unter dem Passwort-Feld erscheinen. Ich wäre sehr hilfreich wenn mir jemand sagen könnte, welchen Code ich diesbezüglich anpassen muss. Ich verwende das Dawn Theme. 

Grüße

Tim

[Gabe]

Hey @dieserbimm 

Nicht vergessen, mit unseren Themes bekommst du 60-min Design Time wenn du möchtest das wir kleine Anpassungen im Dawn Theme machen!

Dann empfehle ich es auch nicht beim standard Dawn Theme zu lassen und stattdessen unsere Palette an professionellen Theme Demos durchzustöbern. Nur so findest du das beste Theme für deine Produkte und deine Brand Identity! 😉

Das Dawn Theme verwendet auch Tailwind CSS für das Styling und Liquid für die Template-Logik. Klicke im Dawn Theme auf "Aktionen" > "Code bearbeiten" und suche im linken Menü nach password.liquid unter "Templates" und nach dem HTML-Code für das Passwortfeld. Es könnte so etwas ähnliches sein:

<input type="password" name="password" ...>

Nach dem Passwort-Input-Feld füge einen Fehler-Feedback-Code ein wie den folgenden: 

{% if password_wrong %}
  <p class="text-red-500 mt-2">Falsches Passwort</p>
{% endif %}

Beachte, dass password_wrong nicht der tatsächliche Name der Liquid-Variable ist, die verwendet wird, wenn das Passwort falsch eingegeben wurde. Du musst den tatsächlichen Variablennamen finden und verwenden. Die obige Annahme dient nur zur Veranschaulichung und wenn du mit der Chrome Developer Console arbeitest, findest du vieles was du brauchst.

Wenn die Fehlermeldung nicht wie erwartet aussieht, musst du vielleicht einige CSS/Tailwind Klassen hinzufügen oder ändern. Das obige Beispiel verwendet text-red-500 für eine rote Textfarbe und mt-2 für einen oberen Abstand (margin-top). Passe die Klassen nach Bedarf an.

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.

---
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.