Membuat Aplikasi Product Structured Data Generator dengan JavaScript

Membuat Aplikasi Product Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh Membuat Aplikasi Product Structured Data Generator dengan JavaScript. Kode ini akan menghasilkan output berupa kode yang dapat langsung disalin oleh pengguna.

Product Structured Data Generator

Product Structured Data Generator


HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Structured Data Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Product Structured Data Generator</h1>
    <form id="productForm">
      <div class="form-group">
        <label for="productName">Nama Produk</label>
        <input type="text" class="form-control" id="productName" required>
      </div>
      <div class="form-group">
        <label for="productDescription">Deskripsi Produk</label>
        <textarea class="form-control" id="productDescription" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label for="productPrice">Harga Produk</label>
        <input type="number" class="form-control" id="productPrice" required>
      </div>
      <div class="form-group">
        <label for="productImage">URL Gambar Produk</label>
        <input type="url" class="form-control" id="productImage" required>
      </div>
      <button type="submit" class="btn btn-primary">Generate</button>
    </form>
    <div id="output" class="mt-4"></div>
  </div>

  <script>
    document.getElementById('productForm').addEventListener('submit', function(event) {
      event.preventDefault();

      var productName = document.getElementById('productName').value;
      var productDescription = document.getElementById('productDescription').value;
      var productPrice = document.getElementById('productPrice').value;
      var productImage = document.getElementById('productImage').value;

      var output = document.getElementById('output');
      output.innerHTML = `
        <pre>
          <code>
            {
              "@context": "https://schema.org/",
              "@type": "Product",
              "name": "${productName}",
              "description": "${productDescription}",
              "offers": {
                "@type": "Offer",
                "price": "${productPrice}",
                "priceCurrency": "IDR"
              },
              "image": "${productImage}"
            }
          </code>
        </pre>
      `;
    });
  </script>
</body>
</html>
HTML

Silakan salin kode di atas ke dalam file HTML dan jalankan aplikasi Product Structured Data Generator ini. Pengguna dapat mengisi formulir dengan informasi produk yang diinginkan, kemudian mengklik tombol “Generate” untuk menghasilkan kode output yang sesuai dengan struktur data terstruktur untuk produk. Kode output akan ditampilkan di bawah formulir.

Pastikan Anda telah menyertakan Bootstrap CSS melalui tautan <link> di bagian <head> untuk memastikan tampilan yang rapi dan responsif.

Tutorial lainnya:

Semoga aplikasi ini bermanfaat dalam menghasilkan kode struktur data terstruktur untuk produk dengan mudah dan cepat!

Artikel Terbaru ⭐