Füge einen Kommentar hinzu

An dieser Stelle können Benutzer mithilfe der Bibliothek amp-form einen Kommentar hinzufügen. Beachte, dass das Vorhandensein des Formulars bedingt ist und vom Status der Komponente amp-access abhängt:

<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">

Wir geben eine POST Methode und eine XHR Aktion an, da nicht-XHR Aktionen mit POST Methoden in AMP nicht zulässig sind. Da es sich um eine Demo handelt, bleiben Kommentare nicht erhalten, sodass jeweils nur ein Kommentar hinzugefügt werden kann. Wenn ein Kommentar hinzugefügt wird, reagiert der AMPByExample Server mit einer JSON Antwort, die den eingegebenen Text mit einigen Ergänzungen wie Zeitstempel, Avatar und Name für den Benutzer enthält.

Hier ist ein Beispiel für eine JSON Antwort:

{"Datetime":"09:34:21",
"User":"Charlie",
"Text":"Hello!",
"UserImg":"/img/ic_account_box_black_48dp_1x.png"}

Die Formularkomponente zeigt diese Werte auf der Seite einfach mithilfe des Templates amp-mustache an:

<div submit-success>
  <template type="amp-mustache">
    <div class="comment-user">
      <amp-img width="44" class="user-avatar" height="44" alt="user" src=""></amp-img>
      <div class="card comment">
        <p><span class="user">{{User}}</span><span class="date">{{Datetime}}</span></p>
        <p>{{Text}}</p>
      </div>
    </div>
  </template>
</div>

In diesem Beispiel prüfen wir nur, ob der Wert des Kommentars nicht leer ist. Wenn der Wert leer ist, geben wir einen Fehler zurück, der die Ausführung des folgenden Codes auslöst:

<div submit-error>
  <template type="amp-mustache">
    Error! Looks like something went wrong with your comment, please try to submit it again.
  </template>
</div>

Als Extra fügen wir das Attribut required hinzu, das verlangt, dass ein Kommentartext vorhanden ist, bevor der Kommentar gesendet wird:

<input type="text" class="data-input" name="text" placeholder="Your comment..." required>

Wenn du einen Kommentar hinzufügst und auf den Submit Button klickst, sollte das Ergebnis in etwa so aussehen wie im folgenden Screenshot: