Webshop Widget · v1.0

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.

Zero dependencies

Vanilla JS, ~5 KB gzipped. Ingen jQuery, ingen React. Indlæses asynkront.

Plug & play

3 linjer kode i din checkout. Shadow DOM beskytter mod CSS-konflikter. Customizable colors.

Live data

Henter aktive pickup-points fra EMA's API i realtid. Auto-rank efter postnummer.

Live demo

Sådan ser widget'en ud

Klik en pickup-point — du får en toast som webshoppen ville modtage et JS-callback.

Installation

Kom i gang på 2 minutter

Basis HTML / custom webshop
<!-- 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>
html · vanilla js
Shopify (theme.liquid eller cart.liquid)
<!-- 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>
liquid · cart attributes
WooCommerce (checkout.php)
<?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>
php · hidden inputs

Konfigurations-options

OptionTypeStandardBeskrivelse
zipstring''Kundens postnummer — bruges til at sortere pickup-points med matching ZIP øverst
language'da' | 'en''da'Sprog for UI-tekster
primaryColorstring (hex)'#DC2626'Accent-farve til søgefelt focus + aktiv markør
darkColorstring (hex)'#0A1128'Tekst- og brand-farve
showSearchbooleantrueVis/skjul søgefelt
maxHeightnumber (px)420Max højde for scroll-listen
onSelectfunction(point)nullCallback når kunden vælger en pickup-point
onClearfunction()nullCallback 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
Avanceret: Server-to-server

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.

Vi bruger cookies

Vi bruger nødvendige cookies for at sitet fungerer (login, betaling, kurv). Med dit samtykke bruger vi også anonyme analytics-cookies fra PostHog, der hjælper os med at forbedre EMA Kurer. Læs mere i vores privatlivspolitik.