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:
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!
- Teste den folgenden Code in die Datei
product-template.liquid :
{% assign productTags = product.tags | join: ', ' %}
{% if productTags contains 'Individualisierbar' %}
{%- endif -%}
- 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.first }}: {{ p.last }}
{% endunless %}
{% endfor %}
{% endfor %}
- 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.
Schade. Ich habe gedacht sowas wäre in einem Baukasten Shop wie Spotify Standard, wie Größe, Farbe usw.