Abfrage der gewählten Option im Code

[NJHolzwerkstatt]

Hallo,

ich habe ein Produkt das ich personalisieren lassen möchte. Das Produkt hat die Option "Anzahl Buchstaben".

Je nach Anzahl der Buchstaben ändert sich der Preis. In einem Textfeld frage ich den persönlichen Text ab.

Nun möchte ich ausschließen das jemand 4 Buchstaben wählt und im Textfeld 10 Buchstaben eingibt.

Die Textlänge im Code kann ich mit "maxlength" abfragen.

Wie verknüpfe bzw. frage ich ab  welche Option gewählt worden ist?

Bsp.: wenn Option "Anzahl Buchstaben" = 4  dann Texfeld max. Länge = 4

Vielen Dank!

[Gabe]

Hey @NJHolzwerkstatt 

Du bietest also Buchstaben (sind das LED Leuchten?) an, die man “kumulativ” in den Warenkorb legen kann. Bei jedem zusätzlichen Buchstaben den man im Kästchen eingibt soll der Preis sich inkrementieren. 

Hast du ein Texteingabefeld wie das folgende Beispiel?

Man könnte z. B. über einen Javascript Code die Anzahl der Buchstaben auslesen, oder mit JS bei jeder Buchstabeneingabe den Quantity Counter +1 setzen, dann erhöht sich der Preis immer automatisch um 1x oder 2x oder wie man es möchte je nachdem was in den Warenkorb gelegt wird. Wenn man die eingegebene Buchstaben direkt mit dem Mengenzähler über eine Javascript verbindet kann man somit vermeiden, dass "jemand 4 Buchstaben wählt und im Textfeld 10 Buchstaben eingibt".

Somit wird diese Programmierung einen Experten verlangen und hier empfehle ich entweder einen unserer Experten hier wie @Finer oder @r8r oder unsere deutsche Partner Agenturen denn die haben ein paar Tricks im Ärmel.

Eine App?

Ansonsten haben wir auch eine Preis-Update und Rechner App die das ggf. auch kann. Die App erlaubt es den Preis den individuellen Spezifikationen anzupassen, und entsprechend zu berechnen. Bei jeder Änderung, die der Kunde vornimmt, wird der Preis des Produkts automatisch aktualisiert und somit kann man damit eine tolle Customer Experience anbieten. Zusätzlich hat man die Möglichkeit, für jedes Produkt einen Mindestpreis festzulegen.

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen! Halte Abstand und bleibe Gesund!

[NJHolzwerkstatt]

Hallo,

zunächst danke für die ausführliche Antwort, ich bin leider erst jetzt dazu gekommen es detailliert zu lesen.  Die Preisgestaltung habe ich über Optionen / Varianten erstellt, das ist kein Problem. 

Ich möchte je nach Auswahl Buchstaben (grüner Rahmen) die Eingabe im Textfeld (roter Rahmen) beschränken. Wähle ich 4 Buchstaben aus soll die maximale Eingabe im Textfeld 4 Buchstaben sein, usw. 

Ich biete individuelle Namensschilder an, der Preis richtet sich nach Anzahl der Buchstaben

https://nj-holzwerkstatt.myshopify.com/collections/namensschild

Danke und viele Grüße

[r8r]

@NJHolzwerkstatt - wenn die Produkte immer dem selben Schema wie hier entsprechen, dann könnte man das JS vom Simple Theme um den emtsprechenden Eventlistener erweitern, der die Maximale Zeichenanzahl im Eingabefeld entsprechend der Variantenauswwahl beschränkt.

Wenn Du dabei Hilfe benötigst, kannst Du mir gerne schreiben.

LG, Mario

[Gabe]

@NJHolzwerkstatt 

Deine Namenschilder und Buchstaben sind ziemlich gross und verlangen etwas an Tischlerarbeit. Das sind aber tolle Holzprodukte! Machst du auch Schnaps- und Bier-Bänke für die Gastronomie? Das ist ein Big Business vor allem in den Englischsprechenden Länder z. B. in Amerikanischen, Englischen, und Irischen Kneipen. Da werden sog. "Shot Trays" angeboten v. a. für touristische Gruppen wie dieses Beispiel hier: https://screenshot.click/f1vak.mp4.

Händler die Ihre eigenen Waren per Handwerk abfertigen, sind meist sehr erfolgreich, denn das ist ein Nischenmarkt und ich würde das groß auf die Glocke hängen, dass du deine eigenen Artikel per Handarbeit abfertigst.

Dann wäre auch dein Theme zu betrachten. Du verwendest das Simple Theme wie es aussieht, stimmt's? Wenn ja, es ist ein wenig emotionslos als Theme und bringt deine tollen Holzprodukte nicht so richtig raus, vor allem die Bilder. Die sehen etwas verloren aus. Unser Dawn Theme kann das viel besser denn es ist ein "Large Images" Theme. Deine Besucher wollen wahrscheinlich in deine Holzprodukte mit einer "Lupe" hineinzoomen oder groß angezeigt sehen.

• Siehe ein Beispiel unseres gratis Dawn Themes hier

Dein Javascript

Also wird das ganze etwas kompliziert, denn wir haben mehrere Conditional Logics die in dieser Optionen Form miteinander agieren wie u. a. die folgenden:

1) Wenn man im "Optionen" Dropdown beispielsweise  option value="4 Buchstaben" wählt, so soll man darauf beschränkt sein nur 4 Buchstaben eingeben zu können im meinText Kästchen -> nicht mehr und auch nicht weniger stimmt's? Soll es in deinem Fall einen Max UND ein Minimum von 4 Buchstaben geben? Wenn ja, braucht man hier ggf. eine  maxlength="4" UND eine minlength="4" ansonsten kann man ja auch weniger als 4 Buchstaben eingeben und trotzdem für 4 Buchstaben zahlen.

2) Und wie sieht es mit den Symbol Kästchen aus? Wie verbindet sich die ganze Logik und Ablauf mit diesem Kästchen und was ist wenn ein Symbol noch dazu gewählt wird? 

Zum maxlength  Code

Ich bin kein Programmierer aber ich sehe in der Chrome Developer Console dein Code als Kommentar eingepflegt:

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

Auf dieser Webseite gibt es ein ähnliches Beispiel zu sehen, wo man nicht mehr als 20 Charaktere eintragen kann im Kästchen Custom_Name und der Code der verwendet wird ist der folgende:

<input required="" maxlength="20" class="required product-form__input" id="custom-name" type="text" name="properties[Custom Name]">

Hier brauchen wir ggf. eine Bedingungslogik, wie eine Switch Statement oder im Falle Liquid eine Case/When statement (mehr dazu in unserem Partner Developer Blog hier😞

{% case maxlength="4" minlength="4" %}
{% when option value="4 Buchstaben" %}
{% case maxlength="5" minlength="5" %}
{% when option value="5 Buchstaben" %}

Usw... Aber da ich kein Programmierer bin gibt es sicherlich eine bessere Methode. Was sagt unser Experte @Finer dazu?

Eine App?

Dann kann man das ganze wahrscheinlich viel einfacher mit einer App einrichten mit der man so eine Form mit "Drag & Drop" bauen kann. Beispiel: Auf der G:Variants & Product Options App Seite sehe ich den folgenden Flow:

Siehe weitere solche App Demos hier die dir die Arbeit enorm erleichtern können:

• https://globo1.myshopify.com/
• https://themedevele.myshopify.com/products/conditional-logic-example
• https://variantcustomproductoptions.com/products/all-options
• product options maxlength minlength
• product options conditional logic

Wenn du möchtest poste das auch in unserer Englischen Community,

• Poste deine Frage samt Details und Workflow (auch den einen oder anderen Screenshot) in unserer Englischen Community hier, denn da haben wir einige Programmierer und Experten. Wenn du doch keine App verwenden möchtest dann werden die auch ein paar Trix im Ärmel haben.

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

[Finer]

@Gabe @NJHolzwerkstatt Ich ggf. würde den Ansatz von @r8r empfehlen.
Im Grunde könnte man sich über Javascript den Value (Zahlenwert) aus dem Eingabefeld der Menge ziehen und ihn in das HTML Attribute "max-length="{Zahlenwert}" setzen.

Wenn der Nutzer "4" auswählt, würde das Eingabefeld nur 4 Zeichen zulassen.
Eventuell kann man das Ganze noch erweitern und den Nutzer mitteilen, wenn er noch Buchstaben übrig hat. 

[r8r]

@Finer jep, genau das wär mein Vorschlag gewesen … würd das aber viel lieber am lebenden Objekt versuchen anstatt mit Pseudocode zu versuchen ins Blaue hinein eine Step-by-step Anleitung zu schreiben. Drum bin ich da noch eher vage geblieben.