FROM CACHE - de_header

Custom Textfeld auf der Produktseite als Pflichtfeld machen im Code?

Gelöst

Custom Textfeld auf der Produktseite als Pflichtfeld machen im Code?

Litecard
Tourist
10 1 0

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>

 

 

 

 

 

1 AKZEPTIERTE LÖSUNG
Finer
Shopify Partner
2128 463 764

Erfolg.

@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?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

Lösung in ursprünglichem Beitrag anzeigen

9 ANTWORTEN 9

Finer
Shopify Partner
2128 463 764

@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>

 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Litecard
Tourist
10 1 0

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
Shopify Staff
18494 2903 4269

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.

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

Finer
Shopify Partner
2128 463 764

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

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Litecard
Tourist
10 1 0

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

 

Finer
Shopify Partner
2128 463 764

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

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Litecard
Tourist
10 1 0

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

Screenshot (24).png

Finer
Shopify Partner
2128 463 764

Erfolg.

@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?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Litecard
Tourist
10 1 0

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?

Screenshot (26).png

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

Screenshot (25).png

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

Ich Schätze ihre Hilfe wirklich sehr!