Android Radio Konfigurator: Unterschied zwischen den Versionen
Aus Wiki rund um Android-Navis für BMW E38/E39/E46/E53
Andre (Diskussion | Beiträge) |
Andre (Diskussion | Beiträge) |
||
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 32: | Zeile 32: | ||
#nvk .nvk-card.hl{border:2px solid #36c;border-left-width:8px;background:rgba(51,102,204,.12);padding:12px 14px} | #nvk .nvk-card.hl{border:2px solid #36c;border-left-width:8px;background:rgba(51,102,204,.12);padding:12px 14px} | ||
#nvk .nvk-card.hl b{font-size:1.1em} | #nvk .nvk-card.hl b{font-size:1.1em} | ||
#nvk .nvk-row{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:2px 0;border-bottom:1px solid rgba(128,128,128,.3)} | |||
#nvk .nvk-row label{flex:1;margin:0;min-width:240px} | |||
#nvk .nvk-row a{white-space:nowrap;font-weight:600} | |||
#nvk .nvk-img.wide{max-width:min(100%,460px);max-height:none} | #nvk .nvk-img.wide{max-width:min(100%,460px);max-height:none} | ||
#nvk #nvk-form{margin-top:22px} | #nvk #nvk-form{margin-top:22px} | ||
| Zeile 50: | Zeile 53: | ||
<div class="nvk-f" style="max-width:300px"><label for="nvk-cap" id="nvk-capq">Sicherheitsfrage *</label><input id="nvk-cap" type="text" inputmode="numeric"></div> | <div class="nvk-f" style="max-width:300px"><label for="nvk-cap" id="nvk-capq">Sicherheitsfrage *</label><input id="nvk-cap" type="text" inputmode="numeric"></div> | ||
<input id="nvk-hp" type="text" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;width:1px"> | <input id="nvk-hp" type="text" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;width:1px"> | ||
<label class="nvk-o"><input type="checkbox" id="nvk-dsgvo"> Ich stimme zu, dass meine Angaben zur Bearbeitung der Anfrage per E-Mail verarbeitet werden. *</label> | <label class="nvk-o"><input type="checkbox" id="nvk-dsgvo"> Ich stimme zu, dass meine Angaben zur Bearbeitung der Anfrage per E-Mail verarbeitet werden.<span id="nvk-dslink"></span> *</label> | ||
<button type="button" class="nvk-btn" id="nvk-send">Anfrage senden</button> | <button type="button" class="nvk-btn" id="nvk-send">Anfrage senden</button> | ||
<div id="nvk-status" class="nvk-note" style="display:none"></div> | <div id="nvk-status" class="nvk-note" style="display:none"></div> | ||
</fieldset> | </fieldset> | ||
<div id="nvk-legal" class="nvk-help" style="margin-top:20px"><b>Hinweis:</b> Der Konfigurator gibt eine unverbindliche Orientierung zu passenden Artikeln. Ausstattung und Anschlüsse können je nach Baujahr, Modell und Umbauten abweichen. Bitte gleiche Deine Auswahl vor der Bestellung mit Deinem Fahrzeug ab. Im Zweifel nutze die Anfrage-Funktion, wir prüfen die Zusammenstellung gern für Dich.<div id="nvk-legal-links" style="margin-top:4px"></div></div> | |||
<noscript>Für den Konfigurator wird JavaScript benötigt.</noscript> | <noscript>Für den Konfigurator wird JavaScript benötigt.</noscript> | ||
<script> | <script> | ||
| Zeile 98: | Zeile 102: | ||
/* Shop-Anbindung: API = radios.php (liefert Radio-Liste und Artikelnummern). Warenkorb = Shopware-Link pro Artikelnummer. */ | /* Shop-Anbindung: API = radios.php (liefert Radio-Liste und Artikelnummern). Warenkorb = Shopware-Link pro Artikelnummer. */ | ||
var API = "https://xtrons.ibus-app.de/radios.php"; | var API = "https://xtrons.ibus-app.de/radios.php"; | ||
var | /* CART_TRANSFER = true: Warenkorb-Button öffnet den Shop mit ?nvk=ARTIKELNUMMERN. Das funktioniert nur, wenn im Shop das Skript shop-warenkorb-uebergabe.js eingebunden ist. */ | ||
var CART_TRANSFER = true; | |||
/* Ziel der Übergabe: Shop-Controller aus Plugin 1.1.0 (serverseitig, unabhängig vom Browser-Cache). | |||
Älterer Weg über das Theme-Skript: var TRANSFER_URL = CART + "?nvk="; */ | |||
var TRANSFER_URL = "https://shop.ibus-app.de/nvk?add="; | |||
var CART = "https://shop.ibus-app.de/checkout/cart"; | var CART = "https://shop.ibus-app.de/checkout/cart"; | ||
/* Rechtliche Seiten (Links unter dem Konfigurator und beim Datenschutz-Haken). Leer = Link wird nicht angezeigt. */ | |||
var LEGAL = { agb: "https://shop.ibus-app.de/allgemeine-geschaeftsbedingungen", widerruf: "https://shop.ibus-app.de/widerrufsrecht", datenschutz: "https://shop.ibus-app.de/datenschutz" }; | |||
/* ---- 1) Baureihen -------------------------------------------------------- | /* ---- 1) Baureihen -------------------------------------------------------- | ||
v = Shop-Kategorie (Link: SHOP + bmw-radios/ + v + /) | v = Shop-Kategorie (Link: SHOP + bmw-radios/ + v + /) | ||
| Zeile 291: | Zeile 301: | ||
===================================================================== */ | ===================================================================== */ | ||
var $ = function (id) { return document.getElementById(id); }; | var $ = function (id) { return document.getElementById(id); }; | ||
var sel = {}, picked = {}, summary = "", capA = 0, capB = 0, radioCache = {}, chosenRadio = null; | var sel = {}, picked = {}, summary = "", capA = 0, capB = 0, radioCache = {}, chosenRadio = null, cartFill = null; | ||
var fieldsEl = $("nvk-fields"), optsEl = $("nvk-opts"), outEl = $("nvk-out"); | var fieldsEl = $("nvk-fields"), optsEl = $("nvk-opts"), outEl = $("nvk-out"); | ||
function full(u) { return u.indexOf("/thumb/") === -1 ? u : u.replace("/thumb/", "/").replace(/\/[^\/]+$/, ""); } | function full(u) { return u.indexOf("/thumb/") === -1 ? u : u.replace("/thumb/", "/").replace(/\/[^\/]+$/, ""); } | ||
| Zeile 449: | Zeile 459: | ||
sm.textContent = "Verfügbare Radios für Deinen BMW " + veh.t + " (" + list.length + ")"; det.appendChild(sm); | sm.textContent = "Verfügbare Radios für Deinen BMW " + veh.t + " (" + list.length + ")"; det.appendChild(sm); | ||
list.forEach(function (it) { | list.forEach(function (it) { | ||
var | var row = document.createElement("div"); row.className = "nvk-row"; | ||
var lab = document.createElement("label"); lab.className = "nvk-o"; | var lab = document.createElement("label"); lab.className = "nvk-o"; | ||
var rb = document.createElement("input"); rb.type = "radio"; rb.name = "nvk-radio"; | var rb = document.createElement("input"); rb.type = "radio"; rb.name = "nvk-radio"; | ||
rb.checked = chosenRadio ? chosenRadio.sku === it.sku : false; | rb.checked = chosenRadio ? chosenRadio.sku === it.sku : false; | ||
rb.addEventListener("change", function () { chosenRadio = it; | rb.addEventListener("change", function () { chosenRadio = it; if (cartFill) cartFill(); }); | ||
lab.appendChild(rb); | |||
lab.appendChild(document.createTextNode(" " + it.name + (it.price ? " - " + it.price : "") + (fits(it) ? " (passt zu Deiner Auswahl)" : ""))); | |||
lab.appendChild(rb); lab.appendChild( | row.appendChild(lab); row.appendChild(link(it.url, "Shop →")); | ||
det.appendChild(row); | |||
det.appendChild( | |||
}); | }); | ||
outEl.appendChild(det); | outEl.appendChild(det); | ||
| Zeile 471: | Zeile 479: | ||
p.textContent = "Das oben gewählte Radio (falls ausgewählt) und diese Artikel werden direkt im Shop in den Warenkorb gelegt:"; | p.textContent = "Das oben gewählte Radio (falls ausgewählt) und diese Artikel werden direkt im Shop in den Warenkorb gelegt:"; | ||
box.appendChild(p); | box.appendChild(p); | ||
items.forEach(function ( | var listEl = document.createElement("div"); box.appendChild(listEl); | ||
cartFill = function () { | |||
listEl.innerHTML = ""; | |||
var lines = (chosenRadio ? ["Radio: " + chosenRadio.type] : []).concat(items.map(function (x) { return x.t; })); | |||
lines.forEach(function (t) { var r = document.createElement("div"); r.textContent = "- " + t; listEl.appendChild(r); }); | |||
}; | |||
cartFill(); | |||
var n = document.createElement("div"); n.className = "nvk-help"; | var n = document.createElement("div"); n.className = "nvk-help"; | ||
n.textContent = "Kameras, TPMS, Werkzeug und Artikel ohne Direktlink wählst Du bitte über die Links oben im Shop aus."; | n.textContent = "Kameras, TPMS, Werkzeug und Artikel ohne Direktlink wählst Du bitte über die Links oben im Shop aus."; | ||
| Zeile 504: | Zeile 518: | ||
vb.appendChild(vlab); vb.appendChild(vin); vb.appendChild(cb); vb.appendChild(ta); vb.appendChild(ls); box.appendChild(vb); | vb.appendChild(vlab); vb.appendChild(vin); vb.appendChild(cb); vb.appendChild(ta); vb.appendChild(ls); box.appendChild(vb); | ||
} | } | ||
if (!CART_TRANSFER) { outEl.appendChild(box); return; } | |||
var btn = document.createElement("button"); btn.type = "button"; btn.className = "nvk-btn"; btn.style.marginTop = "8px"; | var btn = document.createElement("button"); btn.type = "button"; btn.className = "nvk-btn"; btn.style.marginTop = "8px"; | ||
btn.textContent = "Auswahl in den Warenkorb legen"; | btn.textContent = "Auswahl in den Warenkorb legen"; | ||
| Zeile 514: | Zeile 529: | ||
if (chosenRadio) list.unshift({ t: chosenRadio.type, sku: chosenRadio.sku }); | if (chosenRadio) list.unshift({ t: chosenRadio.type, sku: chosenRadio.sku }); | ||
if (!list.length) { st.textContent = "Es ist noch nichts zum Bestellen ausgewählt."; return; } | if (!list.length) { st.textContent = "Es ist noch nichts zum Bestellen ausgewählt."; return; } | ||
st.textContent = " | var w = window.open("", "_blank"); | ||
st.textContent = "Artikelnummern werden ermittelt …"; | |||
var ids = list.filter(function (x) { return x.aid; }).map(function (x) { return x.aid; }); | var ids = list.filter(function (x) { return x.aid; }).map(function (x) { return x.aid; }); | ||
var get = ids.length ? fetch(API + "?aid=" + ids.join(",")).then(function (r) { return r.json(); }).then(function (j) { return j.skus || {}; }) : Promise.resolve({}); | var get = ids.length ? fetch(API + "?aid=" + ids.join(",")).then(function (r) { return r.json(); }).then(function (j) { return j.skus || {}; }) : Promise.resolve({}); | ||
get.then(function (map) { | get.then(function (map) { | ||
var skus = []; | var skus = []; | ||
list.forEach(function (x) { var | list.forEach(function (x) { var k = x.sku || map[x.aid]; if (k) skus.push(k); }); | ||
if (!skus.length) throw new Error("none"); | if (!skus.length) throw new Error("none"); | ||
var url = TRANSFER_URL + encodeURIComponent(skus.join(",")); | |||
if (w) { | |||
w.location.href = url; | |||
st.textContent = "Der Shop wurde in einem neuen Tab geöffnet (" + skus.length + " von " + list.length + " Artikeln übergeben). Bitte dort den Warenkorb kontrollieren. Ist ein Artikel nicht bestellbar, weist der Shop darauf hin."; | |||
} else { | |||
st.textContent = "Der neue Tab wurde blockiert. Bitte Pop-ups erlauben oder diesen Link nutzen: "; | |||
}).catch(function () { st.textContent = "Das hat leider nicht geklappt. Bitte nutze die Shop-Links oben."; }); | st.appendChild(link(url, "Warenkorb im Shop öffnen →")); | ||
} | |||
}).catch(function () { if (w) w.close(); st.textContent = "Das hat leider nicht geklappt. Bitte nutze die Shop-Links oben."; }); | |||
} | } | ||
function renderResult() { | function renderResult() { | ||
| Zeile 620: | Zeile 638: | ||
}); | }); | ||
$("nvk-reset").addEventListener("click", function () { sel = {}; picked = {}; chosenRadio = null; update(); }); | $("nvk-reset").addEventListener("click", function () { sel = {}; picked = {}; chosenRadio = null; update(); }); | ||
var legalEl = $("nvk-legal-links"), firstLink = true; | |||
[ ["agb", "AGB"], ["widerruf", "Widerrufsbelehrung"], ["datenschutz", "Datenschutzerklärung"] ].forEach(function (x) { | |||
var key = x[0]; | |||
if (!LEGAL[key]) return; | |||
if (!firstLink) legalEl.appendChild(document.createTextNode(" | ")); | |||
firstLink = false; legalEl.appendChild(link(LEGAL[key], x[1])); | |||
}); | |||
if (LEGAL.datenschutz) { | |||
var dl = $("nvk-dslink"); | |||
dl.appendChild(document.createTextNode(" (")); dl.appendChild(link(LEGAL.datenschutz, "Datenschutzerklärung")); dl.appendChild(document.createTextNode(")")); | |||
} | |||
newCaptcha(); | newCaptcha(); | ||
update(); | update(); | ||
| Zeile 625: | Zeile 654: | ||
</script> | </script> | ||
</div> | </div> | ||
</html> | </html> | ||
<small>Stand: 21.10.2026</small><br> | <small>Stand: 21.10.2026</small><br> | ||
Aktuelle Version vom 22. Oktober 2026, 13:46 Uhr
Mit diesem Tool kann auf Basis von Fahrzeug und vorhandenen Komponenten eine Liste nötiger Komponenten erstellt werden.
Zu den gewählten Komponenten werden Links in den I-BUS Shop gezeigt und abschließend kann mit der Auswahl eine Anfrage-Mail an das I-BUS App Team gesendet werden.
Hinweis: Der Konfigurator gibt eine unverbindliche Orientierung zu passenden Artikeln. Ausstattung und Anschlüsse können je nach Baujahr, Modell und Umbauten abweichen. Bitte gleiche Deine Auswahl vor der Bestellung mit Deinem Fahrzeug ab. Im Zweifel nutze die Anfrage-Funktion, wir prüfen die Zusammenstellung gern für Dich.
Stand: 21.10.2026