AMP

Menambahkan komentar

Di titik ini, pengguna dapat menambahkan komentar menggunakan koleksi amp-form. Perhatikan bagaimana kemunculan formulir bersifat kondisional, bergantung pada status komponen amp-access:

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

Kami menentukan metode POST dan tindakan XHR, karena tindakan non XHR tidak diizinkan dengan metode POST di AMP. Karena ini adalah demo, kami tidak memberikan banyak komentar, jadi 1 komentar hanya dapat ditambahkan dalam satu kesempatan. Setiap kali komentar ditambahkan, server AMPByExample membalas dengan respons JSON yang berisi teks yang dimasukkan dengan beberapa tambahan, seperti stempel waktu, avatar, dan nama untuk pengguna.

Berikut adalah contoh respons JSON:

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

Komponen formulir hanya akan menampilkan nilai di dalam halaman menggunakan amp-mustache template:

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

Dalam contoh ini, kami hanya memeriksa apakah nilai komentar tidak kosong. Jika nilainya kosong, kami menampilkan error yang menyebabkan kode berikut dijalankan:

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

Sebagai sentuhan tambahan, kami menambahkan atribut required untuk menerapkan kehadiran teks komentar sebelum mengirim komentar:

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

Saat menambahkan komentar dan mengklik tombol kirim, Anda kini harusnya melihat sesuatu yang serupa dengan screenshot berikut: