Broom & Mope

Place your order online and pay only when it’s ready for delivery.

document.addEventListener("DOMContentLoaded", function () { Ecwid.OnPageLoaded.add(function (page) { if (page.type !== "CHECKOUT") return; // Use MutationObserver to wait for the shipping address section const observer = new MutationObserver(() => { const shippingSection = document.querySelector('[data-test-id="customer-form"]'); // Avoid injecting multiple times if (shippingSection && !document.getElementById("geoLocationWrapper")) { // Create wrapper const wrapper = document.createElement("div"); wrapper.id = "geoLocationWrapper"; wrapper.style.marginTop = "20px"; // Label const label = document.createElement("label"); label.innerText = "Use My Location (Optional)"; label.style.display = "block"; label.style.marginBottom = "6px"; label.style.fontWeight = "bold"; // Input const input = document.createElement("input"); input.type = "text"; input.id = "geoInput"; input.placeholder = "Click the button to detect location"; input.readOnly = true; input.style.width = "100%"; input.style.padding = "8px"; input.style.border = "1px solid #ccc"; input.style.borderRadius = "6px"; input.style.marginBottom = "8px"; // Button const btn = document.createElement("button"); btn.type = "button"; btn.innerHTML = ` Use My Location `; btn.style.backgroundColor = "#086cfc"; btn.style.color = "white"; btn.style.border = "none"; btn.style.padding = "10px 14px"; btn.style.borderRadius = "6px"; btn.style.cursor = "pointer"; btn.style.display = "flex"; btn.style.alignItems = "center"; btn.style.gap = "6px"; // Geolocation logic btn.onclick = function () { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { const lat = position.coords.latitude.toFixed(5); const lng = position.coords.longitude.toFixed(5); input.value = `Lat: ${lat}, Long: ${lng}`; }, function () { alert("Unable to retrieve your location."); } ); } else { alert("Geolocation is not supported by your browser."); } }; // Assemble UI wrapper.appendChild(label); wrapper.appendChild(input); wrapper.appendChild(btn); shippingSection.appendChild(wrapper); // Done: disconnect observer observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true, }); }); });