FROM CACHE - de_header

Comment Box für Zusatzfunktionalitäten nutzen

Gelöst

Comment Box für Zusatzfunktionalitäten nutzen

roland1112
Besucher
2 0 0

Ich möchte die Comment Textarea für Zusatzfunktionalitäten nutzen. Nun wird aber der Userinput nur von einem Feld gelesen, obwohl es 2 Verschiedene gibt. Der Button sendet immer das untere, egal ob man im oberen oder unteren Feld eine Eingabe vornimmt.

Jetzt möchte ich die Buttons mit den jeweiligen Feldern " verknüpfen"

 

Hier der Beispielcode :

<div style="margin-top:-4rem;">
  {% comment %} placeholder="{{ 'templates.contact.form.comment' | t }}]" ||||||||| hier ändern sich die rows auch nicht -.- {% endcomment %}
  <p  style="text-align: left; margin-bot:1.5rem;padding-left: 20px">To request the certificate of analysis enter the batchnumber eg. coa-5AAAAAAAABBC</p>  
  <div class="field" style="display:flex;margin-left:3rem;" >
      <textarea
        rows="1"
        min-height: 7rem;
        id="ContactForm-body"
        class="text-area field__input"
        name="contact[{{ 'templates.contact.form.comment' | t }}]"
        {% comment %}placeholder="{{ 'templates.contact.form.comment' | t }}]"{% endcomment %}
  
      >
        ### EINGABE 1 NICHT NUTZBAR ###{{- form.body -}}
      </textarea>
      <div class="contact__button" style="text-align:left;margin-top:-3.5rem;margin-left:3rem;" >
      <button style="border-radius:1rem;;" type="submit" class="button">
        {{ 'templates.contact.form.send' | t }}
      </button>
      <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
        </div>
    </div>
  <p  style="text-align: left; margin-bot:1.5rem;padding-left: 20px">To unlock the device enter the serialnumber e.g. pin-5AAAAAAAAA333 </p>
  <div class="field" style="display:flex;margin-left:3rem;" >
      <textarea
        rows="1"
        min-height: 15rem;
        id="ContactForm-body"
        class="text-area field__input"
        name="contact[{{ 'templates.contact.form.comment' | t }}]"
        {% comment %} placeholder="{{ 'templates.contact.form.comment' | t }}]"{% endcomment %}
  
      >
        ##EINAGBE 2 WIRD IMMER GENOMMEN ##{{- form.body -}}
      </textarea>
      <div class="contact__button" style="text-align:left;margin-top:-3.5rem;margin-left:3rem;" >
      <button style="border-radius:1rem;" type="submit" class="button">
        {{ 'templates.contact.form.send' | t }}
      </button>
      <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
        </div>
1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18475 2895 4263

Erfolg.

@roland1112 

 

In Shopify ist die Logik auf der Serverseite nicht zugänglich oder bearbeitbar da Shopify eine geschlossene SaaS ist. Du müsstest die Skripts selber extern auf einem eigenen gehosteten server executen.

 

Um die Logik hinter Formularen oder anderen Funktionen im Shopify-Shop selber anzupassen verwende das Liquid im Theme, um zu sehen, wie Formulardaten übermittelt und verarbeitet werden. Dies umfasst Dateien wie contact.liquid, contact-form.liquid oder ähnliche im Theme-Ordner.

 

Einige Einstellungen und Logiken kannst du über den Shopify Admin anpassen, beispielsweise über die Einstellungen für Kontaktformulare, E-Mail-Einstellungen oder automatisierte Workflows.

 

Ansonsten für erweiterte Anpassungen die Shopify API verwenden, um eigene Logiken zu erstellen.

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
18475 2895 4263

Hey @roland1112 

 

Es ist nicht ganz klar um welche "Comment Box für Zusatzfunktionalitäten" es sich handelt, ich werde aber mal deinen Code analysieren denn da scheinen ein paar 🪱-er drin zu sitzen.

 

Das Problem, was du beschreibst, kann auftreten, wenn beide Textbereiche (textarea) und Schaltflächen (button) das gleiche id-Attribut "ContactForm-body" verwenden. In HTML sollte jede id auf der Seite eindeutig sein und wenn zwei Elemente dieselbe ID haben, wird nur das erste korrekt funktionieren.

Jeder Textbereich-Schaltflächen-Kombination sollte eine einzigartige ID und name-Attribut haben. Dies sollte sicherstellen, dass die Benutzereingaben korrekt verarbeitet werden:

 

<div style="margin-top:-4rem;">
  <p style="text-align: left; margin-bot:1.5rem;padding-left: 20px">To request the certificate of analysis enter the batchnumber eg. coa-5AAAAAAAABBC</p>  
  <div class="field" style="display:flex;margin-left:3rem;" >
      <textarea
        rows="1"
        style="min-height: 7rem;"
        id="ContactForm-body1"
        class="text-area field__input"
        name="contact[body1]"
      >### EINGABE 1 NICHT NUTZBAR ###{{- form.body1 -}}</textarea>
      <div class="contact__button" style="text-align:left;margin-top:-3.5rem;margin-left:3rem;" >
      <button style="border-radius:1rem;" type="submit" class="button" form="form1">
        {{ 'templates.contact.form.send' | t }}
      </button>
      <label class="form__label field__label" for="ContactForm-body1">{{ 'templates.contact.form.comment' | t }}</label>
      </div>
  </div>

  <p style="text-align: left; margin-bot:1.5rem;padding-left: 20px">To unlock the device enter the serialnumber e.g. pin-5AAAAAAAAA333 </p>
  <div class="field" style="display:flex;margin-left:3rem;" >
      <textarea
        rows="1"
        style="min-height: 15rem;"
        id="ContactForm-body2"
        class="text-area field__input"
        name="contact[body2]"
      >##EINGABE 2 WIRD IMMER GENOMMEN ##{{- form.body2 -}}</textarea>
      <div class="contact__button" style="text-align:left;margin-top:-3.5rem;margin-left:3rem;" >
      <button style="border-radius:1rem;" type="submit" class="button" form="form2">
        {{ 'templates.contact.form.send' | t }}
      </button>
      <label class="form__label field__label" for="ContactForm-body2">{{ 'templates.contact.form.comment' | t }}</label>
      </div>
  </div>
</div>

 

Jedes textarea und die zugehörige Schaltfläche haben jetzt eine einzigartige ID (ContactForm-body1 und ContactForm-body2). Das name-Attribut der textarea-Elemente wurde ebenfalls angepasst, um den eindeutigen IDs zu entsprechen (contact[body1] und contact[body2]). Die form-Attribute der button-Elemente wurden entfernt, da sie in diesem Kontext nicht erforderlich sind. Stelle auch sicher, dass die Logik auf der Serverseite entsprechend angepasst, um diese neuen name-Attribute zu verarbeiten.

 

Bei weiteren Fragen kann ich gerne unsere Experten empfehlen oder poste deine Fragen in unserer Englischen API Community hier.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

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

roland1112
Besucher
2 0 0

Vielen Dank für die Antwort Gabe,

 

Wo kann ich die Logik auf der Serverseite einsehen?

 

Danke im Voraus!

 

Gabe
Shopify Staff
18475 2895 4263

Erfolg.

@roland1112 

 

In Shopify ist die Logik auf der Serverseite nicht zugänglich oder bearbeitbar da Shopify eine geschlossene SaaS ist. Du müsstest die Skripts selber extern auf einem eigenen gehosteten server executen.

 

Um die Logik hinter Formularen oder anderen Funktionen im Shopify-Shop selber anzupassen verwende das Liquid im Theme, um zu sehen, wie Formulardaten übermittelt und verarbeitet werden. Dies umfasst Dateien wie contact.liquid, contact-form.liquid oder ähnliche im Theme-Ordner.

 

Einige Einstellungen und Logiken kannst du über den Shopify Admin anpassen, beispielsweise über die Einstellungen für Kontaktformulare, E-Mail-Einstellungen oder automatisierte Workflows.

 

Ansonsten für erweiterte Anpassungen die Shopify API verwenden, um eigene Logiken zu erstellen.

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