Contoh Coding POS Restaurant dengan Bootstrap, CSS, HTML, dan JavaScript

Membuat perhitungan transaksi

Fungsi berikut memfilter produk berdasarkan kategori dan kata kunci, kemudian membentuk kartu menu.

let category = 'Semua';

function renderProducts() {
  const keyword = document
    .getElementById('searchInput')
    .value
    .toLowerCase();

  const filtered = products.filter(product => {
    const categoryMatch =
      category === 'Semua' || product.cat === category;

    const searchMatch =
      product.name.toLowerCase().includes(keyword) ||
      product.sku.toLowerCase().includes(keyword);

    return categoryMatch && searchMatch;
  });

  document.getElementById('productGrid').innerHTML = filtered
    .map(product => `
      <button class="product-card" data-id="${product.id}">
        <div class="product-visual">${product.icon}</div>
        <h3>${product.name}</h3>
        <strong>${rupiah(product.price)}</strong>
      </button>
    `).join('');
}

Setelah elemen dibuat, tambahkan event klik yang memanggil fungsi addItem() berdasarkan ID produk.