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

77
public/buyModal.js
View File

@@ -1,13 +1,5 @@
// ======================= const WEBHOOK_URL = "https://your-webhook-url.com";
// CONFIGURATION
// =======================
const WEBHOOK_URL = "https://your-webhook-url.com"; // <-- Set your webhook here
// =======================
// HELPER FUNCTIONS
// =======================
// Create the modal form HTML
function createModal() { function createModal() {
const modal = document.createElement("div"); const modal = document.createElement("div");
modal.id = "buyNowModal"; modal.id = "buyNowModal";
@@ -23,46 +15,50 @@ function createModal() {
modal.style.zIndex = "1000"; modal.style.zIndex = "1000";
modal.innerHTML = ` modal.innerHTML = `
<div style="background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; position: relative;"> <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;">&times;</span> <span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold; font-size: 20px;">&times;</span>
<h2>Buy Product</h2> <h2 style="margin-bottom: 10px;">Order Details</h2>
<form id="buyForm"> <p id="productText" style="margin-bottom: 20px; font-weight: 500;"></p>
<label>Name:<br><input type="text" name="name" required></label><br><br> <form id="buyForm" style="display: flex; flex-direction: column; gap: 12px;">
<label>Company:<br><input type="text" name="company" required></label><br><br> <input type="text" name="name" placeholder="Name" required>
<label>Country:<br><input type="text" name="country" required></label><br><br> <input type="text" name="company" placeholder="Company" required>
<label>Street:<br><input type="text" name="street" required></label><br><br> <input type="text" name="country" placeholder="Country" required>
<label>ZIP:<br><input type="text" name="zip" required></label><br><br> <input type="text" name="street" placeholder="Street" required>
<label>Town:<br><input type="text" name="town" required></label><br><br> <div style="display: flex; gap: 10px;">
<label>Email:<br><input type="email" name="email" required></label><br><br> <input type="text" name="zip" placeholder="ZIP" required style="flex: 1;">
<label>Product:<br><input type="text" name="product" readonly></label><br><br> <input type="text" name="town" placeholder="Town" required style="flex: 2;">
<button type="submit">Submit</button> </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> </form>
</div> </div>
`; `;
document.body.appendChild(modal); document.body.appendChild(modal);
document.getElementById("closeModal").onclick = () => { modal.style.display = "none"; };
// Close button modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
document.getElementById("closeModal").onclick = () => {
modal.style.display = "none";
};
// Close modal on outside click
modal.onclick = (e) => {
if (e.target === modal) modal.style.display = "none";
};
return modal; return modal;
} }
// Show modal and set product
function openModal(productHref) { function openModal(productHref) {
const modal = document.getElementById("buyNowModal"); const modal = document.getElementById("buyNowModal");
modal.style.display = "flex"; 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() { function handleFormSubmit() {
const form = document.getElementById("buyForm"); const form = document.getElementById("buyForm");
form.addEventListener("submit", async (e) => { form.addEventListener("submit", async (e) => {
@@ -91,23 +87,20 @@ function handleFormSubmit() {
}); });
} }
// Attach modal to buttons
function attachButtons() { function attachButtons() {
const buttons = Array.from(document.querySelectorAll("button, a")); const buttons = Array.from(document.querySelectorAll("button, a"));
buttons.forEach(btn => { 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) => { btn.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
const href = btn.getAttribute("href") || btn.dataset.product || "Unknown Product"; const href = btn.getAttribute("href") || btn.dataset.product || "Unknown/0";
openModal(href); openModal(href);
}); });
} }
}); });
} }
// =======================
// INIT
// =======================
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
createModal(); createModal();
handleFormSubmit(); handleFormSubmit();

11
public/index.html.template
View File

@@ -12,6 +12,9 @@
<script>const configUrl = `https://od8n.com/widget/custom/od8n.json`;</script> <script>const configUrl = `https://od8n.com/widget/custom/od8n.json`;</script>
<script src="widget/widget.js"></script> <script src="widget/widget.js"></script>
<script src="buyModal.js"></script>
<link rel="stylesheet" href="widget/custom/od8n.css"> <link rel="stylesheet" href="widget/custom/od8n.css">
@@ -212,7 +215,7 @@
<a href="/agenda/q1-2026.pdf" class="agenda-link">Download Agenda</a> <a href="/agenda/q1-2026.pdf" class="agenda-link">Download Agenda</a>
<div class="workshop-action"> <div class="workshop-action">
<span class="price">$450.00 <br> per Person</span> <span class="price">$450.00 <br> per Person</span>
<a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q1-2026" <a href="https://Q1-2026/450.00"
target="_blank" target="_blank"
class="btn-secondary"> class="btn-secondary">
Book Now Book Now
@@ -228,7 +231,7 @@
<a href="/agenda/q2-2026.pdf" class="agenda-link">Download Agenda</a> <a href="/agenda/q2-2026.pdf" class="agenda-link">Download Agenda</a>
<div class="workshop-action"> <div class="workshop-action">
<span class="price">$450.00 <br> per Person</span> <span class="price">$450.00 <br> per Person</span>
<a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q2-2026" <a href="https://Q2-2026/450.00"
target="_blank" target="_blank"
class="btn-secondary"> class="btn-secondary">
Book Now Book Now
@@ -246,7 +249,7 @@
<a href="/agenda/q3-2026.pdf" class="agenda-link">Download Agenda</a> <a href="/agenda/q3-2026.pdf" class="agenda-link">Download Agenda</a>
<div class="workshop-action"> <div class="workshop-action">
<span class="price">$450.00 <br> per Person</span> <span class="price">$450.00 <br> per Person</span>
<a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q3-2026" <a href="https://Q3-2026/450.00"
target="_blank" target="_blank"
class="btn-secondary"> class="btn-secondary">
Book Now Book Now
@@ -263,7 +266,7 @@
<a href="/agenda/q4-2026.pdf" class="agenda-link">Download Agenda</a> <a href="/agenda/q4-2026.pdf" class="agenda-link">Download Agenda</a>
<div class="workshop-action"> <div class="workshop-action">
<span class="price">$450.00 <br> per Person</span> <span class="price">$450.00 <br> per Person</span>
<a href="https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/form/2e3ee881-a9fd-49d4-83de-40c87f397e91?class=Q4-2026" <a href="https://Q4-2026/450.00"
target="_blank" target="_blank"
class="btn-secondary"> class="btn-secondary">
Book Now Book Now