Wunschtext, Individueller Text

[taggerzde]

Hallo Zusammen, 

vorab: Ich bin neu auf Shopify und richte gerade meinen Shop ein. 

Ich verzweifle gerade daran, auf der Produktdetailseite ein Freitextfeld einzufügen, in welches die Kunden Ihren Namen bzw Wunschtext einfügen können. Ich brauche das für vom Kunden individualisierbare Artikel zu bestellen. 

Ich benutze folgendes Theme:  Refresh

Folgenden Code habe ich bereits erstellt. Dort wird auf der PDP geprüft ob der Artikel das Tag "Individualisierbar" enthält. Allerdings kriege ich es nicht hin, dass der eingetragene Text auch in den Warenkorb übertragen wird und schlussendlich auch im Backend angezeigt wird um die Bestellung entsprechend zu bearbeiten. 

{% assign productTags = product.tags | join: ', ' %}
{% if productTags contains 'Individualisierbar' %}
<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 -%}

Am liebsten hätte ich auch, wenn man den Artikel nicht in den Warenkorb hinzufügen kann, wenn man in das Freitextfeld nichts eingetragen hat.

Kann einer von euch mir da weiterhelfen? 

Vielen Vielen Dank im Voraus! Ich bin gerade echt am verzweifeln 😄 

[Gabe]

Hey @taggerzde 

Erstmals ein herzliches Willkommen auf der Plattform! Was für ein Shop möchtest du aufbauen?

Dann möchtest du ein Textfeld Code auf der Produktseite einbauen im Refresh Theme, dass am besten auch ein "Pflichtfeld" ist. Weisst du dass das Refresh Theme bereits ein Notiz-Eingabefeld auf der Cart Page bereits hat, wie folgt abgebildet?

Wir haben aber eine Reihe toller Apps wie die Infinite Options App wo du mehr über diese Seite erfahren kannst. 

Andernfalls machen die GPO Apps das auch recht gut - Globo Product Options. Siehe die versch. App Demos hier. 

Dann kann man beispielsweise mit unseren Product Options Apps eine tolle Shopping Experience anbieten und hier wäre das beste mal durch ein paar weitere Demos zu klicken und zu sagen ob da etwas in Frage für euch käme. Siehe ein paar Demos solcher Apps hier:

• Product Personalizer
• Shoppad
• Selbe mit etwas conditional logic
• Customily
• Globo App
• Globo App all options
• Themedev App
• Custom products app
• Advanced product options
• Dynamic product options
• Hulkapps App

Wenn du es DIY machen möchtest

Für die Aufgabe, die du zu bewältigen möchtest, gibt es zwei wesentliche Teile. Der erste Teil ist die Gestaltung und Einbindung eines benutzerdefinierten Felds auf der Produktseite, was du bereits versucht hast. Der zweite Teil besteht darin, sicherzustellen, dass die Daten, die in dieses Feld eingegeben werden, in den Warenkorb übertragen und letztendlich auf der Bestellseite angezeigt werden. Außerdem möchtest du sicherstellen, dass kein Artikel in den Warenkorb gelegt werden kann, wenn das Feld leer ist.

Ich habe jetzt deinen Code angeschaut und etwas überarbeitet und hoffe es kann klappen und den zweiten Teil auch abdecken. Probiere den Code im product-template.liquid an der richtigen Stelle ABER wenn du es selber auf deiner Produktseite 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 die hier 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 negative 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!

1. Teste den folgenden Code in die Datei product-template.liquid :

{% assign productTags = product.tags | join: ', ' %}
{% if productTags contains 'Individualisierbar' %}
<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 -%}

2. Füge den folgenden Code in die Datei cart.liquid ein:

{% for item in cart.items %}
  {% for p in item.properties %}
    {% unless p.first == blank %}
      <p>{{ p.first }}: {{ p.last }}</p>
    {% endunless %}
  {% endfor %}
{% endfor %}

3. Um zu verhindern, dass ein Artikel in den Warenkorb gelegt wird, wenn das Feld leer ist, füge den folgenden JavaScript-Code in die Datei theme.js ein:

$('#add-to-cart-button').click(function(e) {
  if($('#personalisierung').val() === '') {
    e.preventDefault();
    alert('Bitte füllen Sie das Personalisierungsfeld aus.');
  }
});

Wie man sieht ist so etwas nicht so einfach. Der Code muss ja auch verhindern können, dass der Artikel in den Warenkorb gelegt wird, wenn das Feld #personalisierung leer ist. Hier wird eine Warnmeldung angezeigt, die den Benutzer auffordert, das Feld auszufüllen.

Beachte auch, dass du für den JavaScript-Code jQuery im Refresh-Theme installiert und aktiviert haben musst. Wenn nicht, dann musst du eine rein JavaScript-basierte Lösung verwenden.

Außerdem ist zu beachten, dass der Code in cart.liquid nur auf der Cart-Seite funktioniert. Wenn du einen Ajax-Warenkorb verwendest (wie im Refresh Theme bereits voreingestellt ist - siehe unten abgebildet), muss man möglicherweise zusätzlichen Code hinzufügen, um die Eigenschaften in diesem anzuzeigen.

[taggerzde]

Hallo Gabe, 

vielen Dank für deine ausführliche Nachricht.

Den Code kann ich so nicht einfügen, da es die liquids im Refresh Theme unter dem Namen nicht gibt. 

Im Grunde genommen bleibt mir also nichts anderes übrig eine App zu Kaufen / zu abonnieren, da ich die nötigen Programmierkenntnisse nicht habe um das entsprechend einzurichten. 😞 Schade. Ich habe gedacht sowas wäre in einem Baukasten Shop wie Spotify Standard, wie Größe, Farbe usw. 

Vielen Dank trotzdem. 

VG 

[Gabe · Accepted solution]

Hey @taggerzde 

• Ich habe gedacht sowas wäre in einem Baukasten Shop wie Spotify Standard,

Das stimmt nicht ganz denn ich zeige ja im vorherigen Beitrag im Screenshot oben, wie du dieses Feld nativ im Refresh Theme aktivieren kannst. Dieses Feld kann man auch zum Pflichtfeld machen und es erfüllt vor allem den zweiten Teil den ich oben beschrieben habe: das Feld stellt sicher, dass die Daten, die in dieses Feld eingegeben werden, in den Warenkorb übertragen und letztendlich auf der Bestellseite und in der Bestellung selber übernommen werden.

Wenn du aber andere individuelle Anpassungen brauchst als die verschiedenen Features des Refresh Theme dann wirst du entweder eins unserer Profi-Themes testen müssen, eine App testen, oder das mit einem Experten in dein Theme eincoden müssen. Refresh hat tolle features aber nicht die Advanced Features anderer bezahlbaren Themes. 

Wie möchtest du am besten voranschreiten?

[Lali1988]

Hallo, ich habe das selbe Problemchen und benötige quasi ein Textfeld für personalisierbare Produkte und dies soll dann auch direkt in den Checkout für den Hersteller übernommen werden.

Mein Theme ist "Ride".

[Gabe]

Hey @Lali1988 

Die No-Code Solution zeige ich ja oben im ersten Beitrag wie du das im Theme Editor machen kannst.

Wenn das dir nicht ausreicht, und du keine der Product Option Apps verwenden möchtest, wird das eine Custom Coding Solution verlangen mit einem unserer zertifizierten Shopify Partner und Programmierer.

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.