Pickup point picker

The client's lockers and pickup point counters, and the visitor's choice for the page.

The widget lists the client's smart locker locations and pickup point counters, as chosen in the back office. The visitor searches by name, address or postcode, or sorts by distance with Near me (the browser asks for the location). Each place is a choice in a radio group: Tab reaches the list, the arrow keys move and choose.

The form field

When the widget has a field name (in the back office, or data-input-name on the script tag), the chosen place's id is written into a field of that name: an existing input in the form around the widget, or a hidden input the widget adds right after its container. The field gets input and change events, so the page's own code and form libraries see the choice.

<form action="/checkout" method="post">
  <div id="swidget-k2m9x7q4ab1c"></div>
  <script src="https://<host>/swidget/swidget.js" data-swidget="k2m9x7q4ab1c" data-key="sp_appkey_…"
          data-client="<client code>" data-api="https://open.superroute.ca" data-input-name="pickup_point_id" async></script>
  <!-- added by the widget when the form has no such field: -->
  <!-- <input type="hidden" name="pickup_point_id" value="C5" data-swidget-input="k2m9x7q4ab1c"> -->
  <button>Continue</button>
</form>

Ids

A smart locker location's id starts with L, a pickup point counter's with C (for example L12, C5).

swidget:select

The swidget:select event carries the whole place:

sWidget.on('select', ({ pickup_point }) => {
  // { id: 'L12', kind: 'locker' | 'counter', name, address, city, postcode, latitude, longitude, distance_km, status, … }
});

Calls

The calls are operations of the partner app API, in REST and GraphQL: Partner app REST reference · Partner app GraphQL reference