Custom Textfeld auf der Produktseite als Pflichtfeld machen im Code?

[Litecard]

Ich habe ein Textfeld auf meiner Produktseite und möchte das als Pflichtfeld machen. ich habe das Textfeld im code programmiert aber habe keine wirklichen Kenntnisse! 

Wo und was kann ich im Code verändern um ein Pflichtfeld zu erstellen?

<div class="product-form__input">
              <label class="form__label" for="custom-link">Dein Wunschlink</label>
              <input Class="field" required type="text" id="custom-link" form="{{product_form_id}}" name="properties[Dein Link]"/>
           </div>

[Finer]

@Litecard im Grunde sind das nicht falsch aus. Allerdings benötigst du nicht das form-Attribut. Schau dir mal mein Beispiel an, dieses solltest du verwenden können.

<p class="line-item-property__field">
  <label for="dein-wunschlink">Dein Wunschlink</label>
  <input required class="required" id="dein-wunschlink" type="text" name="properties[Dein Wunschlink]">
</p>

[Litecard]

Hallo Finer,

vielen dank für die Antwort.

der Code funktioniert aber leider immer noch nicht so wie ich das wollte.

da ist jetzt zwar ein Textfeld so wie davor auch aber man kann immer noch das Produkt in den Warenkorb legen ohne das Textfeld auszufüllen.

[Gabe]

Hey @Litecard 

Es sollte normalerweise ausreichen, um das Textfeld als Pflichtfeld zu behandeln. Allerdings kann es sein, dass etwas anderes im Code oder im Shopify-Theme das Verhalten beeinflusst.

Stelle vielleicht sicher, dass das Textfeld innerhalb des <form>-Tags liegt, der den "In den Warenkorb"-Button enthält. Das sollte etwa so aussehen:

<form action="/cart/add" method="post" enctype="multipart/form-data" id="{{product_form_id}}">
   ...
   <div class="product-form__input">
      <label class="form__label" for="custom-link">Dein Wunschlink</label>
      <input class="field" required type="text" id="custom-link" name="properties[Dein Link]"/>
   </div>
   ...
   <button type="submit" name="add" id="AddToCart" class="btn">In den Warenkorb</button>
</form>

Überprüfe, ob es JavaScript-Code gibt, der das Standardverhalten des Formulars überschreibt oder verhindert. Suche nach Event-Handlern wie submit, click oder preventDefault. Wenn es solchen Code gibt, stelle sicher, dass die Validierung des Pflichtfeldes berücksichtigt wird, bevor das Produkt in den Warenkorb gelegt wird.

Stelle auch sicher, dass keine CSS-Regel oder JavaScript-Code das required-Attribut entfernt oder überschreibt. Man kann das in der Developer Console überprüfen (Rechtsklick -> Inspect), und das Element inspizieren, um sicherzustellen, dass das required-Attribut vorhanden ist.

Anonsten kann es sein, dass dein Theme auf eine bestimmte Weise angepasst wurde, die das normale Verhalten der Pflichtfelder beeinträchtigt. In diesem Fall empfehle ich, dich an das Support-Team des Theme-Entwicklers zu wenden, um weitere Hilfe zu erhalten.

[Finer]

@Litecard wie hast du denn den Code eingefügt? Welches Theme verwendest du denn?

[Litecard]

ich habe den code von dir in die stelle eingefügt, wo mein code war.

[Finer]

@Litecard ok, meine Frage war etwas unspezifisch: An welcher Stelle im Liquid Code (Datei und Zeile), hast du den Code eingefügt? Kannst du mir das Snippet oder die Section nennen?

Wenn du mir noch dein Theme nennen kannst, würde das auch helfen.

[Litecard]

Also ich habe das Ride Theme und mache das im main-custom2-produkt.liquid

[Finer · Accepted solution]

@Litecard setzte den Code in die buy-button.liquid (snippets) direct vor:

<div class="product-form__buttons">

Danach musst du in dem Liquid:

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

 Das "novalidate" entfernen. Das sorgt nämlich dafür, dass keine Pflichtfelder (required) nicht berücksichtigt werden.

Das sollte also dann folgendermaßen aussehen:

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

Gibt es einen Grund, weshalb du so viele main-product.liquids (main-custom-produkt.liquid / main-coustum2-produkt.liquid ...) hast?

[Litecard]

nein eigentlich nicht aber ich habe den code über ein YouTube Video bearbeitet und will eigentlich nur das ein Textfeld auf der Produkt Seite existiert, was man ausfüllen muss (Pflicht Feld) um das Produkt in den Warenkorb zu legen.

ich habe das gemacht was sie gesagt haben und es funktioniert auch aber nur bei meinem Upload Bottom von meiner personazier app und nicht bei dem Text?

Den Code von dem Textfeld habe ich von meinem altem genommen, weil das Textfeld von ihnen nicht am Theme angepasst war?

PS: Sorry für die umstände, ich kenne mich noch nicht so gut mit Coden aus. 

Ich Schätze ihre Hilfe wirklich sehr!