Oliver/od8n_homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Oliver
2025-10-03 06:34:06 -03:00
parent 478e23b337
commit f71c8f3da7
2 changed files with 42 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/buyModal.js
+35 -42
View File
@@ -1,13 +1,5 @@
// =======================
// CONFIGURATION
// =======================
const WEBHOOK_URL = "https://your-webhook-url.com"; // <-- Set your webhook here
const WEBHOOK_URL = "https://your-webhook-url.com";
// =======================
// HELPER FUNCTIONS
// =======================
// Create the modal form HTML
function createModal() {
const modal = document.createElement("div");
modal.id = "buyNowModal";
@@ -23,46 +15,50 @@ function createModal() {
modal.style.zIndex = "1000";
modal.innerHTML = `
<div style="background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; position: relative;">
<span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold;">&times;</span>
<h2>Buy Product</h2>
<form id="buyForm">
<label>Name:<br><input type="text" name="name" required></label><br><br>
<label>Company:<br><input type="text" name="company" required></label><br><br>
<label>Country:<br><input type="text" name="country" required></label><br><br>
<label>Street:<br><input type="text" name="street" required></label><br><br>
<label>ZIP:<br><input type="text" name="zip" required></label><br><br>
<label>Town:<br><input type="text" name="town" required></label><br><br>
<label>Email:<br><input type="email" name="email" required></label><br><br>
<label>Product:<br><input type="text" name="product" readonly></label><br><br>
<button type="submit">Submit</button>
<div style="background: #fff; padding: 25px; border-radius: 12px; max-width: 450px; width: 95%; position: relative; font-family: sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
<span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold; font-size: 20px;">&times;</span>
<h2 style="margin-bottom: 10px;">Order Details</h2>
<p id="productText" style="margin-bottom: 20px; font-weight: 500;"></p>
<form id="buyForm" style="display: flex; flex-direction: column; gap: 12px;">
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="company" placeholder="Company" required>
<input type="text" name="country" placeholder="Country" required>
<input type="text" name="street" placeholder="Street" required>
<div style="display: flex; gap: 10px;">
<input type="text" name="zip" placeholder="ZIP" required style="flex: 1;">
<input type="text" name="town" placeholder="Town" required style="flex: 2;">
</div>
<input type="email" name="email" placeholder="Email" required>
<input type="hidden" name="product">
<input type="hidden" name="price">
<button type="submit" style="padding: 10px; background: #007BFF; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">Submit</button>
</form>
</div>
`;
document.body.appendChild(modal);
// Close button
document.getElementById("closeModal").onclick = () => {
modal.style.display = "none";
};
// Close modal on outside click
modal.onclick = (e) => {
if (e.target === modal) modal.style.display = "none";
};
document.getElementById("closeModal").onclick = () => { modal.style.display = "none"; };
modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
return modal;
}
// Show modal and set product
function openModal(productHref) {
const modal = document.getElementById("buyNowModal");
modal.style.display = "flex";
modal.querySelector('input[name="product"]').value = productHref;
let product = productHref;
let price = "";
if (productHref.includes("/")) {
const parts = productHref.split("/").filter(Boolean);
product = parts[parts.length - 2] || "Product";
price = parts[parts.length - 1] || "0";
}
modal.querySelector('input[name="product"]').value = product;
modal.querySelector('input[name="price"]').value = price;
modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`;
}
// Handle form submission
function handleFormSubmit() {
const form = document.getElementById("buyForm");
form.addEventListener("submit", async (e) => {
@@ -91,23 +87,20 @@ function handleFormSubmit() {
});
}
// Attach modal to buttons
function attachButtons() {
const buttons = Array.from(document.querySelectorAll("button, a"));
buttons.forEach(btn => {
if (btn.textContent.trim() === "Buy Now") {
const text = btn.textContent.trim();
if (text === "Buy Now" || text === "Book Now") {
btn.addEventListener("click", (e) => {
e.preventDefault();
const href = btn.getAttribute("href") || btn.dataset.product || "Unknown Product";
const href = btn.getAttribute("href") || btn.dataset.product || "Unknown/0";
openModal(href);
});
}
});
}
// =======================
// INIT
// =======================
document.addEventListener("DOMContentLoaded", () => {
createModal();
handleFormSubmit();