Send order API key from live page
This commit is contained in:
26
index.html
26
index.html
@@ -100,6 +100,17 @@
|
|||||||
box-shadow: 0 2px 0 rgba(0,0,0,.18);
|
box-shadow: 0 2px 0 rgba(0,0,0,.18);
|
||||||
}
|
}
|
||||||
.pill input { accent-color: var(--accent); }
|
.pill input { accent-color: var(--accent); }
|
||||||
|
.keybox {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 8px 10px; border-radius: 999px;
|
||||||
|
background: rgba(255,255,255,.06);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.keybox input {
|
||||||
|
width: 140px; border: 0; outline: 0; background: transparent;
|
||||||
|
color: var(--text); font-size: 12px;
|
||||||
|
}
|
||||||
main .wrap { padding-top: 14px; padding-bottom: 28px; }
|
main .wrap { padding-top: 14px; padding-bottom: 28px; }
|
||||||
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
|
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
|
||||||
.card-tile {
|
.card-tile {
|
||||||
@@ -331,6 +342,10 @@
|
|||||||
<span aria-hidden="true">🔎</span>
|
<span aria-hidden="true">🔎</span>
|
||||||
<input id="q" type="search" placeholder="Artikel suchen… (z.B. Badehose, Hoodie, Kappe)" />
|
<input id="q" type="search" placeholder="Artikel suchen… (z.B. Badehose, Hoodie, Kappe)" />
|
||||||
</div>
|
</div>
|
||||||
|
<label class="keybox" title="Bestell‑Key">
|
||||||
|
🔑
|
||||||
|
<input id="orderKey" type="password" placeholder="Bestell‑Key" />
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -489,6 +504,12 @@ document.getElementById("q").addEventListener("input", applyFilters);
|
|||||||
const modal = document.getElementById("orderModal");
|
const modal = document.getElementById("orderModal");
|
||||||
const form = document.getElementById("orderForm");
|
const form = document.getElementById("orderForm");
|
||||||
const setField = (id, v) => document.getElementById(id).value = v || "";
|
const setField = (id, v) => document.getElementById(id).value = v || "";
|
||||||
|
const orderKeyInput = document.getElementById("orderKey");
|
||||||
|
orderKeyInput.value = sessionStorage.getItem("orderKey") || "";
|
||||||
|
orderKeyInput.addEventListener("change", () => {
|
||||||
|
const key = orderKeyInput.value.trim();
|
||||||
|
if (key) sessionStorage.setItem("orderKey", key);
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
document.addEventListener("click", (e) => {
|
||||||
const imgBtn = e.target.closest(".thumb-btn");
|
const imgBtn = e.target.closest(".thumb-btn");
|
||||||
@@ -553,9 +574,12 @@ document.getElementById("detailModal").addEventListener("click", (e) => {
|
|||||||
form.addEventListener("submit", async (e) => {
|
form.addEventListener("submit", async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const payload = Object.fromEntries(new FormData(form).entries());
|
const payload = Object.fromEntries(new FormData(form).entries());
|
||||||
|
const key = sessionStorage.getItem("orderKey") || "";
|
||||||
|
const headers = { "Content-Type": "application/json" };
|
||||||
|
if (key) headers["X-Order-Key"] = key;
|
||||||
const res = await fetch("/wawi/order", {
|
const res = await fetch("/wawi/order", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers,
|
||||||
body: JSON.stringify(payload)
|
body: JSON.stringify(payload)
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
|
|||||||
Reference in New Issue
Block a user