EMA Pickup Point.
3 linjers kode til din checkout.
Tilbyd dine kunder afhentning hos lokale EMA Pickup Points på Sjælland med en drop-in JavaScript-widget. Virker på Shopify, WooCommerce, Magento og custom webshops — ingen API-integration nødvendigt.
Vanilla JS, ~5 KB gzipped. Ingen jQuery, ingen React. Indlæses asynkront.
3 linjer kode i din checkout. Shadow DOM beskytter mod CSS-konflikter. Customizable colors.
Henter aktive pickup-points fra EMA's API i realtid. Auto-rank efter postnummer.
Sådan ser widget'en ud
Klik en pickup-point — du får en toast som webshoppen ville modtage et JS-callback.
Kom i gang på 2 minutter
<!-- 1. Add a container where the widget should appear -->
<div id="ema-pickup"></div>
<!-- 2. Add hidden inputs to persist the selection in your checkout form -->
<input type="hidden" name="ema_pickup_id" id="ema_pickup_id" />
<input type="hidden" name="ema_pickup_name" id="ema_pickup_name" />
<!-- 3. Load the widget -->
<script src="https://emakurer.dk/widget/pickup-point.js"></script>
<script>
EMAPickupPoint.mount('ema-pickup', {
zip: '2300', // customer's destination ZIP (for ranking)
language: 'da', // 'da' or 'en'
onSelect: function (point) {
document.getElementById('ema_pickup_id').value = point.id;
document.getElementById('ema_pickup_name').value = point.shop_name;
}
});
</script><!-- In your Shopify checkout.liquid or theme product page -->
<div id="ema-pickup" data-section="ema-pickup"></div>
<script src="https://emakurer.dk/widget/pickup-point.js"></script>
<script>
EMAPickupPoint.mount('ema-pickup', {
zip: '{{ customer.default_address.zip | default: "" }}',
language: 'da',
primaryColor: '#0F766E', // match your shop's accent color
onSelect: function (point) {
// Save to cart attributes (visible to the merchant in order details)
fetch('/cart/update.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
attributes: {
'ema_pickup_id': point.id,
'ema_pickup_name': point.shop_name,
'ema_pickup_address': point.shop_address + ', ' + point.shop_zip + ' ' + point.shop_city
}
})
});
}
});
</script><?php // In your WooCommerce checkout.php template ?>
<div id="ema-pickup"></div>
<input type="hidden" name="ema_pickup_id" id="ema_pickup_id" />
<input type="hidden" name="ema_pickup_name" id="ema_pickup_name" />
<script src="https://emakurer.dk/widget/pickup-point.js"></script>
<script>
EMAPickupPoint.mount('ema-pickup', {
zip: '<?php echo esc_js(WC()->customer->get_shipping_postcode()); ?>',
onSelect: function (point) {
document.getElementById('ema_pickup_id').value = point.id;
document.getElementById('ema_pickup_name').value = point.shop_name;
}
});
</script>Konfigurations-options
| Option | Type | Standard | Beskrivelse |
|---|---|---|---|
| zip | string | '' | Kundens postnummer — bruges til at sortere pickup-points med matching ZIP øverst |
| language | 'da' | 'en' | 'da' | Sprog for UI-tekster |
| primaryColor | string (hex) | '#DC2626' | Accent-farve til søgefelt focus + aktiv markør |
| darkColor | string (hex) | '#0A1128' | Tekst- og brand-farve |
| showSearch | boolean | true | Vis/skjul søgefelt |
| maxHeight | number (px) | 420 | Max højde for scroll-listen |
| onSelect | function(point) | null | Callback når kunden vælger en pickup-point |
| onClear | function() | null | Callback når valg ryddes via API |
Programmatic API
| widget.setZip(zip) | Re-rank listen efter nyt postnummer |
| widget.setQuery(text) | Sæt søgetekst programmatisk |
| widget.getSelected() | Returnerer den valgte pickup-point eller null |
| widget.clear() | Ryd kundens valg |
| widget.reload() | Genhent listen fra serveren |
| widget.destroy() | Fjern widget'en fra DOM |
Send ordrer direkte via Genfind B2B API
Hvis du vil have fuld kontrol over booking-flowet (egen pris-beregning, eget checkout), kan du bruge vores autentificerede Genfind API. Endpoints: GET /api/partners/genfind/pickup-points og POST /api/partners/genfind/bookings med pakkeshop_partner_id. Kontakt partner@emakurer.dk for at få udleveret en API-token.
