Google site with mini e-commerce features

Perfect! You want a self-contained order form on your site where the user enters Product Code, Quantity, and Price, and the total amount is automatically calculated using embedded HTML + JavaScript. Here’s a clean solution you can embed directly into Google Sites.

---

HTML + JavaScript Order Form

<div style="max-width:500px; margin:auto; font-family:sans-serif;">
  <h3>Place Your Order</h3>

  <table id="orderTable" style="width:100%; border-collapse: collapse;">
    <tr>
      <th style="border-bottom:1px solid #ccc;">Product Code</th>
      <th style="border-bottom:1px solid #ccc;">Quantity</th>
      <th style="border-bottom:1px solid #ccc;">Price (₹)</th>
      <th style="border-bottom:1px solid #ccc;">Subtotal (₹)</th>
    </tr>
    <tr>
      <td><input type="text" class="pcode" placeholder="GR01"></td>
      <td><input type="number" class="qty" value="1" min="1"></td>
      <td><input type="number" class="price" value="0" min="0"></td>
      <td class="subtotal">0</td>
    </tr>
  </table>

  <button onclick="addRow()" style="margin-top:10px;">Add Another Product</button>

  <h4>Total: ₹<span id="total">0</span></h4>

  <h4>Delivery Details</h4>
  <input type="text" id="name" placeholder="Your Name" style="width:100%; margin:5px 0;">
  <input type="text" id="phone" placeholder="Phone Number" style="width:100%; margin:5px 0;">
  <textarea id="address" placeholder="Delivery Address" style="width:100%; margin:5px 0;"></textarea>

  <button onclick="submitOrder()" style="margin-top:10px;">Submit Order</button>
</div>

<script>
function calculateTotal() {
  let total = 0;
  const rows = document.querySelectorAll("#orderTable tr:not(:first-child)");
  rows.forEach(row => {
    const qty = parseFloat(row.querySelector(".qty").value) || 0;
    const price = parseFloat(row.querySelector(".price").value) || 0;
    const subtotal = qty * price;
    row.querySelector(".subtotal").innerText = subtotal.toFixed(2);
    total += subtotal;
  });
  document.getElementById("total").innerText = total.toFixed(2);
}

// Add new product row
function addRow() {
  const table = document.getElementById("orderTable");
  const row = table.insertRow();
  row.innerHTML = `
    <td><input type="text" class="pcode" placeholder="Code"></td>
    <td><input type="number" class="qty" value="1" min="1"></td>
    <td><input type="number" class="price" value="0" min="0"></td>
    <td class="subtotal">0</td>
  `;
  row.querySelectorAll(".qty, .price").forEach(input => input.addEventListener("input", calculateTotal));
  calculateTotal();
}

// Listen for changes to recalc total
document.querySelectorAll(".qty, .price").forEach(input => input.addEventListener("input", calculateTotal));

function submitOrder() {
  calculateTotal();
  const rows = document.querySelectorAll("#orderTable tr:not(:first-child)");
  let orderDetails = "";
  rows.forEach((row, i) => {
    const code = row.querySelector(".pcode").value;
    const qty = row.querySelector(".qty").value;
    const price = row.querySelector(".price").value;
    orderDetails += `${i+1}. Code: ${code}, Quantity: ${qty}, Price: ₹${price}\n`;
  });
  const name = document.getElementById("name").value;
  const phone = document.getElementById("phone").value;
  const address = document.getElementById("address").value;
  const total = document.getElementById("total").innerText;

  // Prepare email link (mailto)
  const mailtoLink = `mailto:youremail@example.com?subject=New%20Order&body=Name:%20${encodeURIComponent(name)}%0APhone:%20${encodeURIComponent(phone)}%0AAddress:%20${encodeURIComponent(address)}%0AOrder:%0A${encodeURIComponent(orderDetails)}%0ATotal:%20₹${total}`;
  window.location.href = mailtoLink;
}
</script>

---

How it Works

1. User enters Product Code, Quantity, Price.

2. Subtotals and total are automatically calculated.

3. Can add multiple products dynamically with “Add Another Product”.

4. User fills name, phone, address.

5. Clicking Submit Order opens the default email client with all order details pre-filled, ready to send to you.

6. You can manually confirm payment via UPI/Instamojo/Razorpay separately.

---

✅ Advantages

• Fully embedded on Google Sites.

• No backend needed.

• Works instantly for small jewelry stores.

• Automatic calculation of totals.

❌ Limitations

• Customers need to send email via their mail client.

• Payments are handled manually via UPI or payment links.

---

If you want, I can make a version that also includes a UPI QR code or Razorpay link directly in the form so customers can pay instantly after filling the order — all on the same page.

Do you want me to add that next?