Textfeld in Theme Studio wird nicht angezeigt

[Luvera]

Hi zusammen,

ich versuche grade ein Textfeld im Theme Studio zu implementieren. Bisher werden die Möglichkeiten zur Personalisierung angezeigt (Name, Datum) aber leider kein Textfeld in dem diese Daten hinterlegt werden können.

Vielleicht hat hier ja jemand eine Idee. Ich habe folgenden Code eingetragen:

<div class="product-form__input">
<label class="form__label" for=Personalisierung>Name</label
<input class="field__input" type="text" id=Personalisierung form="{{ product_form_id }}" name="properties(Name)"/>
</div>

Wäre um Hilfe dankbar!

Merci vorab!

[Gabe · Accepted solution]

Hi @Luvera 

Danke  für den Code und an erster Stelle ist es nicht ganz klar was du erreichen möchtest denn im Studio Theme gibt es ja bereits ein Text-Notizfeld für den Kunden. Oder möchtest du es auf der PDP stattdessen einrichten? Hier das Feld das ich meine:

So ein Feld auf der PDP einzurichten wird nicht ganz so einwandfrei sein wie man sich das vorstellt denn die Kundenwünsche müssen dann ja an das Checkout und auch über die Order API an das Shopify Backend ge-passed werden.

Dein Code-Snippet sieht grundsätzlich korrekt aus, um ein personalisiertes Textfeld im Shopify-Thema hinzuzufügen. Allerdings fehlen in deinem HTML-Code einige Anführungszeichen bei den Attributen for und id, was zu Problemen führen kann. Hier ist eine korrigierte Version:

<div class="product-form__input">
  <label class="form__label" for="Personalisierung">Name</label>
  <input class="field__input" type="text" id="Personalisierung" form="{{ product_form_id }}" name="properties[Name]" />
</div>

Stelle sicher, dass du diesen korrigierten Code in deinem Shopify-Theme an der richtigen Stelle einfügst, normalerweise in der Datei product-template.liquid oder einer ähnlichen Datei, die für die Darstellung der Produktseite zuständig ist.

Um die im Feld eingetragenen Texte an das Backend weiterzureichen und sicherzustellen, dass sie mit der Bestellung verbunden sind, folgt Shopify einem einfachen Konzept: Alles, was im properties-Attribut eines Eingabefeldes steht, wird als benutzerdefinierte Eigenschaft (auch bekannt als "Line Item Property") für das jeweilige Produkt in der Bestellung gespeichert. Der von dir verwendete Code tut genau das – er weist dem Produkt eine benutzerdefinierte Eigenschaft mit dem Namen "Name" und dem Wert des Eingabefeldes zu.

Der form-Tag, der dein input-Element umgibt, muss korrekt konfiguriert sein, damit die Daten bei der Einreichung des Formulars richtig erfasst werden. Der form-Tag sollte die action zum Hinzufügen des Produkts zum Warenkorb enthalten und die method auf "post" setzen. Stelle sicher, dass {{ product_form_id }} korrekt in deiner Theme-Vorlage definiert ist und zu einem tatsächlichen form-Element gehört. Dies ist wichtig, damit das Eingabefeld richtig mit dem Produktformular verknüpft wird.

Wenn du eine Test-Bestellung aufgibst, sollten die benutzerdefinierten Eigenschaften (in deinem Fall der Name, der im Textfeld eingegeben wurde) in den Bestelldetails im Shopify-Adminbereich erscheinen. Du kannst sie in der Bestellübersicht unter dem jeweiligen Produkt finden.

Wenn du diese Schritte befolgt hast und die Daten immer noch nicht wie erwartet übertragen werden, überprüfe, ob du eventuelle JavaScript-Funktionalitäten auf deiner Produktseite hast, die das Formularverhalten beeinflussen könnten. Manchmal kann clientseitiges Scripting die Art und Weise, wie Formulardaten gesendet werden, verändern oder stören.

Das würde ich sehr empfehlen denn das ganze kannst du mit Testbestellungen testen, da diese ein wichtiges Tool sind, um die sog. "Checkout Reibung" zu testen und die User Experience (UX) aller Besucher selber zu erleben. Man kann 3 Arten von Testbestellungen verwenden, um solche Szenarien zu testen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.