AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

Añadir un comentario

En este momento, un usuario puede añadir un comentario utilizando la biblioteca amp-form. La presencia del formulario depende del estado del componente amp-access:

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

Determinamos un método POST y una acción XHR, porque las acciones que no son XHR no están permitidas en los métodos POST de AMP. Al ser una demostración, no se guardan los comentarios, así que solo es posible añadir un comentario en cada ocasión. Cuando se añade un comentario, el servidor AMPByExample envía una respuesta JSON que contiene el texto introducido con información adicional, como una marca de tiempo, un avatar y un nombre de usuario.

Este es un ejemplo de respuesta JSON:

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

Esos valores sencillamente se mostrarán en la página utilizando la plantilla 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>

En este ejemplo, solo comprobamos que el valor del comentario no esté vacío; en caso contrario, devolvemos un error que ejecuta el código siguiente:

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

Adicionalmente, añadimos el atributo required para exigir que el comentario tenga texto antes de que se pueda enviar:

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

Cuando añades un comentario y haces clic en el botón para enviarlo, aparece algo similar a lo que se ve en esta captura de pantalla: