Comment ajouter un commentaire

À ce stade, l'utilisateur peut ajouter un commentaire à l'aide de la bibliothèque amp-form. Notez que la présence de amp-form est conditionnee par l'état du composant amp-access:

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

Nous spécifions une méthode POST et une action XHR, car les actions non XHR ne sont pas autorisées avec les méthodes POST dans AMP. Étant donné que nous somme ici dans le cadre d'une démo, nous ne mettons pas l'accent sur les commentaires, il n'est donc possible d'ajouter qu'un seul commentaire à la fois; chaque fois qu'un commentaire est ajouté, le serveur AMPByExample renvoie une réponse JSON contenant le texte saisi avec quelques ajouts, comme un horodatage, un avatar et un nom d'utilisateur.

Voici un exemple de réponse JSON:

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

Le composant amp-form affichera simplement ces valeurs dans la page à l'aide du modèle amp-mustache:

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

Dans cet exemple, nous vérifions uniquement si la valeur du commentaire n'est pas vide; si la valeur est vide, nous retournons une erreur qui provoque l'exécution du code suivant

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

En guise de touche supplémentaire, nous ajoutons l'attribut required pour imposer la présence de texte de commentaire avant l'envoi:

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

Lorsque vous ajoutez un commentaire et cliquez sur le bouton d'envoi, vous voyez un écran similaire à celui-ci: