FROM CACHE - de_header

Wunschtext für Kunden

Gelöst

Wunschtext für Kunden

MelanieS
Besucher
2 0 0

Hallo, ich bin noch neu und habe meinen Shop noch nicht gestartet, da ich ihn noch aufbaue. Ich habe nun bereits 3 Tage verschwendet und keine Lösung zu meinem Problem gefunden, bis auf eine Englische Anleitung die nicht funktioniert. 

Ich möchte gerne personalisierte Halsbänder etc. ( Tiershop ) anbieten und brauche dafür ein Textfeld über der Produktbeschreibung oder generell auf der Seite des Produkts. In der englischen Beschreibung sollte ich da irgendwelche Codes erstellen und einfügen, aber es hat nichts gebracht, außer Frust. Apps habe ich auch durchwühlt, aber nichts gefunden. Ich will einfach nur eine Box indem die Kunden einen Namen o.ä. schreiben können. Ganz simple..

Die Apps die ich gefunden habe, bieten Bilder Uploads und tausend andere Funktionen an und wollen dafür natürlich Geld. Da ich ja noch nicht mal gestartet habe, will ich da jetzt aber auch nicht zu dick auftragen, weil ich ja erstmal sehen will, ob es überhaupt läuft. Kann mir irgendjemand sagen, ob es eine Kostenlose App für so ein Textfeld gibt? Oder mir eine einfache App, auch mit Bezahlung, die mir so ein Textfeld gibt, nennen ? Ich habe gelesen, dass die Kunden das ja quasi im Warenkorb als Anmerkung schreiben könnten. Nun habe ich mir das mal angeguckt und ich glaube nicht, dass alle Kunden diesen kleinen " Einen Hinweis zu deiner Bestellung hinzufügen " Satz sehen und realisieren. Ich hoffe mir kann jemand helfen, ich drehe hier sonst noch ab ^^ 

Liebe Grüße

Mellie 

3 AKZEPTIERTE LÖSUNGEN

Guido_Michele
Shopify Partner
93 25 75

Erfolg.

Hallo @MelanieS , Hallo @MichelD 

ich bin Shopify partner und freelance developer.

Ich kann nicht sagen ob es wohl eine App gibt, dies zu erreichen. Es ist so eine simple Anpassung, dass ich hierfür keine App installieren würde, man sollte sich apps für die wichtigeren Sachen aufheben, da jede app auch den page-load verlängert (in der Regel). 

Da ja immer wieder danach gefragt, hier eine Kurzanleitung auf deutsch🙂

Option 1: Nach Varianten-namen
 
<!-- variante definieren -->
{%- assign variant = variant.image product.selected_or_first_available_variant -%} 
<div id="personal">
<!-- alle Produkte die personalisiert werden können haben ein 'personalisierbar' im Titel -->
{%- if variant.title contains 'personalisierbar' -%}
<!-- Erstellung eines Eingabefeldes für Personalisierung mit Überschrift (label) -->
<!-- Die Eingabe wird als custom property an die Variante gehangen -->
<!-- im Checkout als auch Order-Benachrichtigung ausgegeben -->
<p id="wrap" class="line-item-property__field">  
<label for="personalisierung">Personalisierung:</label> 
<!-- die class "required" setzt eine Eingabe als Bedingung --> 
<input required class="required" id="personalisierung" type="text" name="properties[Personalisierung]">
</p>
{%- endif -%}
</div>
 
Gleiches kann man auch durch Tags erzeugen, hier bekommen alle Produkte die personalisierbar sind ein Tag "personalisierbar", dieser Tag wird abgefragt und wenn vorhanden das Inputfeld ausgegeben:
 
Option 2: Mit Produkt-Tag
 
<!-- Tags in einen String umwandeln -->
{% assign productTags = product.tags | join: ', ' %}
<!-- Check ob 'personalisierbar' vorhanden -->
{% if productTags contains 'personalisierbar' %}
<div id="personal">
<p id="wrap" class="line-item-property__field">
<label for="personalisierung">Personalisierung:</label>
<input required class="required" id="personalisierung" type="text" name="properties[Personalisierung]">
</p>
</div>
{%- endif -%}
 
Der obige Code muss in das product-form.liquid.
Der Name des Files kann abweichen, identifizieren kann man es durch die Suche im File nach "form" und "endform"
Der Code findet einen guten Platz unmittelbar über den Add to Cart Button.
Manche Themes haben das Form auch im product-template.liquid
 
Viel Glück 🍀! Guido 

Lösung in ursprünglichem Beitrag anzeigen

Guido_Michele
Shopify Partner
93 25 75

Erfolg.

Gerne @isafinanzt 

 

danke für dein Interesse an unseren Tipps und Tricks für Basic Anpassungen am Shopify Theme Code.

Als Entwickler (die meisten von uns arbeiten nicht für Shopify, sondern nur mit Shopify) teilen wir gerne unser Wissen und unsere Erfahrungen, um in diesem Forum weiterzuhelfen.

 

Wenn du jedoch speziellere Anforderungen hast, wie die von dir oben beschriebenen, benötigen wir ein höheres Maß an Aufwand, als den, den wir in diesem Forum kostenlos weitergeben können.

Ich mache dir gerne ein unverbindliches Angebot, um dir zu helfen.

 

Vielen Dank für dein Verständnis,

Beste Grüße,

Guido

Lösung in ursprünglichem Beitrag anzeigen

AP-Jewelry
Besucher
2 1 2

Erfolg.

@lisakcy Falls noch Relevant ich hab eine Lösung gefunden. 
Im File buy-buttons.liquid ist das product-form. Füge den Code ab Zeile 54 ein und es Funktioniert 🙂 

Lösung in ursprünglichem Beitrag anzeigen

30 ANTWORTEN 30

MichelD
Neues Mitglied
4 0 0

Hast du es geschafft? Ich habe das selbe Problem.

LG
Michel

Guido_Michele
Shopify Partner
93 25 75

Erfolg.

Hallo @MelanieS , Hallo @MichelD 

ich bin Shopify partner und freelance developer.

Ich kann nicht sagen ob es wohl eine App gibt, dies zu erreichen. Es ist so eine simple Anpassung, dass ich hierfür keine App installieren würde, man sollte sich apps für die wichtigeren Sachen aufheben, da jede app auch den page-load verlängert (in der Regel). 

Da ja immer wieder danach gefragt, hier eine Kurzanleitung auf deutsch🙂

Option 1: Nach Varianten-namen
 
<!-- variante definieren -->
{%- assign variant = variant.image product.selected_or_first_available_variant -%} 
<div id="personal">
<!-- alle Produkte die personalisiert werden können haben ein 'personalisierbar' im Titel -->
{%- if variant.title contains 'personalisierbar' -%}
<!-- Erstellung eines Eingabefeldes für Personalisierung mit Überschrift (label) -->
<!-- Die Eingabe wird als custom property an die Variante gehangen -->
<!-- im Checkout als auch Order-Benachrichtigung ausgegeben -->
<p id="wrap" class="line-item-property__field">  
<label for="personalisierung">Personalisierung:</label> 
<!-- die class "required" setzt eine Eingabe als Bedingung --> 
<input required class="required" id="personalisierung" type="text" name="properties[Personalisierung]">
</p>
{%- endif -%}
</div>
 
Gleiches kann man auch durch Tags erzeugen, hier bekommen alle Produkte die personalisierbar sind ein Tag "personalisierbar", dieser Tag wird abgefragt und wenn vorhanden das Inputfeld ausgegeben:
 
Option 2: Mit Produkt-Tag
 
<!-- Tags in einen String umwandeln -->
{% assign productTags = product.tags | join: ', ' %}
<!-- Check ob 'personalisierbar' vorhanden -->
{% if productTags contains 'personalisierbar' %}
<div id="personal">
<p id="wrap" class="line-item-property__field">
<label for="personalisierung">Personalisierung:</label>
<input required class="required" id="personalisierung" type="text" name="properties[Personalisierung]">
</p>
</div>
{%- endif -%}
 
Der obige Code muss in das product-form.liquid.
Der Name des Files kann abweichen, identifizieren kann man es durch die Suche im File nach "form" und "endform"
Der Code findet einen guten Platz unmittelbar über den Add to Cart Button.
Manche Themes haben das Form auch im product-template.liquid
 
Viel Glück 🍀! Guido 
AdemYaren
Besucher
1 0 0

Hallo und Vielen Dank Herr Guido.

 

Ich finde bei mir leider keines der Beiden Files wo der Code hin muss.

Muss bei dem Code eigentlich noch etwas geändert werden?

Kann man auch mehrere Placeholder für die Wunschtexte mit reinschreiben in den Code?

Können Sie mir da vielleicht bitte weiterhelfen? Das wäre cool von Ihnen.

MfG Yaren

Guido_Michele
Shopify Partner
93 25 75

Hallo @AdemYaren 

Der Code muss an die Stelle, in der Dein Theme das {% form %} liquid hat. Dies kann product-template.liquid, product-form.liquid oder ähnlich sein. Es ist auf jeden Fall das File, welches den Add to cart button enthält. Und da muss der Code auch hin. 

Man kann auch mehrere Input Felder erstellen, muss dann aber immer ein neuen individuellen Namen geben:

<label for="personalisierung_2">Personalisierung:</label>
<input required class="required" id="personalisierung_2" type="text" name="properties[Personalisierung_2]">

Ich habe gerade gesehen, dass sich in der  Option 1 "Nach Varianten-namen" ein Fehler eingeschlichen hat, die ersten zeieln müssen wie folgt heissen:

<!-- variante definieren -->
{%- assign variant = product.selected_or_first_available_variant -%} 
<div id="personal">
<!-- alle Produkte die personalisiert werden können haben ein 'personalisierbar' im Titel -->
{%- if product.title contains 'personalisierbar' -%} 
...
 
Grüße Guido 
aishabm
Besucher
1 0 0

Hallo Guido,

ich hätte hierzu mal eine Frage: das Textfeld konnte ich erfolgreich einfügen. Allerdings möchte ich gerne, dass es erst erscheint, wenn die jeweilige Variante angeklickt wird. Aktuell verschwindet es nicht automatisch, wenn die nicht personalisierbare Variante ausgewählt wird. Über eine Antwort wäre ich sehr dankbar!

Liebe Grüße

Aisha

 

TincyTincy
Besucher
2 0 1

Moin,

das "required"-Attribut und die gleichnamige Klasse haben jedoch keine Auswirkung. Wenn man das Textfeld leer lässt, kommt man als Kunde trotzdem zum Warenkorb – kein Hinweisdialog o.ä., man kann den Kauf ohne Eingabe im Feld abschließen. Vermutlich wird gar kein richtiger Formular-HTTP-Post durchgeführt wenn man auf "add to cart" klickt, und daher hat das Tag dann auch keine Auswirkung?

Habe nach dem Problem gegooglet, viele scheinen damit Probleme zu haben. Konnte keine Antwort von Shopify irgendwo dazu finden.

Vielleicht hat ja irgendwer hierfür eine Lösung gefunden?

Grüße!

Guido_Michele
Shopify Partner
93 25 75

Hallo @TincyTincy 

Required funktioniert nur in einem form tag. Themen abhängig kann es sein, dass required ignoriert wird auf der Produktseite ( AJAX Cart ... )

Der Code ist auch nur eine Anstoss in die richtige Richtung.

Sollte required in Deinem Falle nicht das gewünschte Ergebnis bringen und ignoriert werden, dann kann man die mit ein klein bisschen javascript unterbinden.

if(document.getElementById("personalisierung").value.length == 0){ alert("empty") }

 

ElifBay
Besucher
2 0 1

Hallo, 

ich gebe als Variante folgendes ein: 

<input required class="required" id="personalisierung" type="text" name="properties[Personalisierung]">
</p>
{%- endif -%}
</div>

somit habe ich die Möglichkeit den Wunschtext einzugeben, allerdings aktualisiert sich der Warenkorb nicht. 

Woran kann es liegen? 

Anna_Klose
Tourist
9 0 5

Hallo zusammen, 

mit der Antwort von Guido hat das super geklappt und über das einbetten im product-form.liquid hat das schon mal super geklappt. Danke dafür!

Bestünde noch die Möglichkeit die Anzahl an Zeichen zu begrenzen? Wir haben z.B. einige Sachen, die nur mit 2-3 Buchstaben personalisiert werden könnten und einige, wo wirklich der ganze Name hin kann. Hat da jemand einen Tipp? 

Und wir würden für die Personalisierung ebenfalls berechnen wollen. Hat jemand dazu Erfahrung?

Vielen Dank im Voraus!

Fräuleinsarah
Besucher
1 0 0

Hey 🙂 ich hab den Code eben eingesetzt. Wie bekomme ich das Feld nun unter den Artikel ?

 

Guido_Michele
Shopify Partner
93 25 75

Hallo @Anna_Klose 

 

Um die Anzahl der Zeiche des Inputs zu beschränken kannst Du maxlength="X" benutzen (X ist die Anzahlr der zulässigen Zeichen. 

Im Beispiel (für 3 maximale Zeichen) 

<input required class="required" id="personalisierung" type="text" maxlength="3" name="properties[Personalisierung]">

 

Hoffe das hilft Dir trotz Verspätung weiter, oder eventuell jemand anderem. 

Grüße Guido

 

Kocases
Besucher
1 0 0

Hallo Guido,

vielen Dank für deine Zeit! Der Code für das Textfeld nach product tags funktioniert bei mir. Leider ist das Feld immer an der falschen Stelle auf der Produktseite (unten links). Ich habe es genau über den Add to Cart Button platziert und dennoch hat es leider nicht funktioniert. Haben Sie dahingehend eventuell einen Tipp für mich?

Mit freundlichen Grüßen,

Michel

anneschd
Besucher
1 0 0

Hallo, vielen Dank für die hilfreichen Code-Zeilen. Das hat soweit prima geklappt und das Textfeld erscheint bei den Produkten mit dem gewünschten Tag.

Jetzt habe ich eine Testbestellung von einer Freundin aufgeben lassen. Sie hat die Namen eingetippt (Personalisierungsoption) und die Bestellung abgeschlossen. Wenn ich die Bestellung in Shopify anschaue, finde ich nirgends einen Hinweis oder eine Info, welche Namen Sie eingegeben hat ...

Wo kann ich den Personalisierungswunsch des Kunden, den er in das Textfeld eingeben hat, sehen? Das ist natürlich unglaublich wichtig, sonst funktioniert der ganze Prozess ja nicht.

 

Ich wäre super dankbar für Hilfe, da grade jetzt die personalisiserten Weihnachtsgeschenke starten.

 

Liebe Grüße, Lisa

LENATUR
Besucher
2 0 0

Gibt es dafür schon eine Lösung?

Danke & liebe Grüße
Lena

monarainer
Besucher
1 0 0

Hallo Guido, @Guido_Michele 

 

Ich habe nur mehr ein Problem und zwar das ich bei der Bestellung nicht sehen kann was der Kunde in das Textfeld schreibt.

Hast du hierfür auch noch eine Lösung ?

 

Lg Mona

Piepschke
Besucher
1 0 0

Halloa @Guido_Michele gibt es auch ein lösung das es auch mit allen express checkouts Funktioniert ?

habe schon viele apps und code snippets probiert abber es funktioniert leider nichts

Öl
Besucher
1 0 0

Hallo Herr Guido, ich habe den Code eingefügt und die Spalte taucht auch auf. 

Mir stellen sich ein paar Fragen, zu denen ich im Code keine Antworten finde.

 

Wo wird das vom Kunden eingegebene nun bei mir erscheinen?

Kann ich im Warenkorb eine Notiz an den personalisierten Artikel anhängen, in dem die Personalisierung nochmals angezeigt wird?

Kann ich den Vorgang testen, indem ich einen Kauf simuliere?

 

LG

 

Guido_Michele
Shopify Partner
93 25 75

Hallo @Öl 

Vorausgesetzt der Code wurde an der richtigen Stelle platziert  (er muss innerhalb eines {% form ...%} Objekt beim ATC Buttons sein) 

erscheint dieser als cart item Attribute  sowohl im Checkout, als auch auf der eingehenden Bestellung.

Screenshot 2023-04-12 at 15.19.09.pngScreenshot 2023-04-12 at 15.19.24.png

 

Grüsse Guido

 

isafinanzt
Tourist
3 0 0

Vielen Dank @Guido_Michele 

Es hat funktioniert. Gibt es eine Möglichkeit, die Zeile der Personalisierung, über den "Anzahl" Button einzusetzen? Wie mache ich die Zeile als Pflichtfeld? Ich brauche auch noch Bestätigungsbutton.

Liebe Grüße Isa 

Guido_Michele
Shopify Partner
93 25 75

Erfolg.

Gerne @isafinanzt 

 

danke für dein Interesse an unseren Tipps und Tricks für Basic Anpassungen am Shopify Theme Code.

Als Entwickler (die meisten von uns arbeiten nicht für Shopify, sondern nur mit Shopify) teilen wir gerne unser Wissen und unsere Erfahrungen, um in diesem Forum weiterzuhelfen.

 

Wenn du jedoch speziellere Anforderungen hast, wie die von dir oben beschriebenen, benötigen wir ein höheres Maß an Aufwand, als den, den wir in diesem Forum kostenlos weitergeben können.

Ich mache dir gerne ein unverbindliches Angebot, um dir zu helfen.

 

Vielen Dank für dein Verständnis,

Beste Grüße,

Guido

isafinanzt
Tourist
3 0 0

Hallo @Guido_Michele ,

 

leider finde ich dieses liquid nicht bei mir und ich finde auch nirgends ein File wo "add to card" drin steht. Ich stehe gerade mächtig auf dem Schlauch und bin hier schon richtig am verzweifeln.

Guido_Michele
Shopify Partner
93 25 75

Hallo @isafinanzt 

Die Anleitung ist ja schon etwas älter und bezieht sich auf ein Vintage (vor Store 2.0) Theme.

Die File Struktur  und auch die Namen der Files haben sich seitdem wesentlich verändert und man würde das ganze heute generell auch anders programmieren. 

Welches Theme benutzt Du denn?

Grüsse Guido

 

isafinanzt
Tourist
3 0 0

Hallo @Guido_Michele ,

ich benutze das Theme Dawn, Version 7.0.1

Liebe Grüße Isa 

Guido_Michele
Shopify Partner
93 25 75

Hallo @isafinanzt 

 

Im Dawn Theme würdest Du den zweiten Code:

 

<!-- Tags in einen String umwandeln -->
{% assign productTags = product.tags | join: ', ' %}
<!-- Check ob 'personalisierbar' vorhanden -->
{% if productTags contains 'personalisierbar' %}
<div id="personal">
<p id="wrap" class="line-item-property__field">
<label for="personalisierung">Personalisierung:</label>
<input required class="required" id="personalisierung" type="text" name="properties[Personalisierung]">
</p>
</div>
{%- endif -%}

 

in das main-product.liquid des section folders direkt hinter die Zeile:

 

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

(ca Zeile 400)

 

einfügen und speichern.

Screenshot 2023-04-12 at 13.40.45.png

Screenshot 2023-04-12 at 13.38.27.png

 

 

 

 

 

 

 

 

 

 

Viel Glück

 

Guido

 

 

 

 

 

 

 

 

 

lisakcy
Besucher
2 0 1

Hallo Guido,

ich habe es im Studio-Theme mit der Tag-Variante probiert und das Feld für die Personalisierung wird mir auch angezeigt. Allerdings wird der Text in den Bestellungen und auch schon vorher im Warenkorb nicht angezeigt... Die Stelle mit form product... in Zeile 400 kann ich auch nicht finden.. Hast du vielleicht noch einen Tipp? Danke im Voraus!

AP-Jewelry
Besucher
2 1 2

@Guido_Michele 
Vielen Dank schon mal für den Artikel. 
Ich denke ich bin auch einem guten weg. Leider habe auch ich Probleme damit die Richtige stelle für den Code zu finden. 

AP-Jewelry
Besucher
2 1 2

Erfolg.

@lisakcy Falls noch Relevant ich hab eine Lösung gefunden. 
Im File buy-buttons.liquid ist das product-form. Füge den Code ab Zeile 54 ein und es Funktioniert 🙂 

jaxxtrends
Tourist
3 0 1

Hallo @Guido_Michele Guido Michele,

sehr gute beschreibung mit Foto. Das main.produkt.liquid finde ich. Aber Zeile 400 finde ich den Card Button nicht nach langer Suche.

Ich habe Theme Dawn, Version 12.0.0

Wäre schön wenn sie mir auch Helfen könnten.

Danke vorab.

Kreationsstube
Besucher
1 0 0

Hallo Guido! @Guido_Michele 

 

bei mir hat der untere Code mit den Tags super funktioniert.

Gibt es eine Möglichkeit das Textfeld größer anzeigen zu lassen? Wie wäre dann der Code? Ich vermute das hängt mit dem "line-item-property__field" zusamen? 

 

Vielen Dank

Inés

Advisma
Tourist
8 0 2

Hallo Mellie,

falls du in Zukunft eine Lösung benötigst wie du ganz einfach und schnell Textfelder hinzufügen kannst, empfehle ich dir folgende App:
https://apps.shopify.com/textfield

 

Mit dieser kannst du dein Textfeld farblich anpassen, dieses als Pflichtfeld markieren, die Zeicheneingabe beschränken und nur bei bestimmten Produkten oder Varianten anzeigen lassen.

Ich hoffe ich konnte dir weiterhelfen.

Liebe Grüße
Pascal