Csomagpontválasztó widget beágyazása

1. Beillesztendő kód

<div id="cpv-widget"></div>
<script>
  (function () {
    var el = document.getElementById("cpv-widget");
    var iframe = document.createElement("iframe");
    iframe.src = "https://csomagpontvalaszto.hu/widget";
    iframe.style.cssText = "width:100%;height:560px;border:1px solid #e5e7eb;border-radius:12px";
    iframe.title = "Csomagpontválasztó";
    el.appendChild(iframe);

    window.addEventListener("message", function (e) {
      if (e.origin !== "https://csomagpontvalaszto.hu") return;
      if (!e.data || e.data.type !== "cpv:selected") return;
      var p = e.data.point;
      // Itt mentsd el a kiválasztott pontot (pl. rejtett input mezőkbe):
      console.log("Kiválasztott csomagpont:", p);
    });
  })();
</script>

2. A kiválasztott pont adatai

Amikor a vásárló rákattint egy pontra, a widget postMessage üzenetet küld a beágyazó oldalnak:

{
  type: "cpv:selected",
  point: {
    id, provider, providerName, type,
    name, address, city, zip, lat, lng
  }
}

Ezeket mentsd rejtett input mezőkbe (pl. cpv_point_id, cpv_point_address), így a megrendeléssel együtt beérkezik a rendszeredbe.

3. Beállítások

• ?providers=foxpost – csak adott futárszolgálat pontjai (vesszővel több is: foxpost,gls).
• ?view=list – térkép nélküli, csak listás mód (keskeny helyre). Alapértelmezés: térkép + lista.
• Magasság: az iframe height értékét szabadon állíthatod.
• Mobilon is működik, a lista görgethető.

4. Élő előnézet

5. Statisztika

A widget minden betöltéskor névtelen eseményt küld a mi analitikánkba (widget_load, a beágyazó domain nevével), kiválasztáskor pedig widget_select eseményt. Így látjuk, hány webáruház használja – személyes adatot nem gyűjtünk, és a te vásárlóid adatai nem kerülnek hozzánk.