FROM CACHE - de_header
Gelöst

Wunschtext, Individueller Text

taggerzde
Besucher
2 0 0

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 😄 

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
16357 2587 3853

Erfolg.

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?

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

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff
16357 2587 3853

Hey @taggerzde 

 

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

 

giphy

 

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?

 

image.png

 

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:

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 -%}

 

  1. 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 %}

 

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

 

image.png

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

taggerzde
Besucher
2 0 0

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
Shopify Staff
16357 2587 3853

Erfolg.

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?

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