Skip to main content

Create a pickup point selector

When a customer selects pickup point delivery, they need to select an exact location. Configure the pickup point selector on the Delivery Gateway embedded UI with the view field of DGW.mount(opts):

  • As always, you need to define the container element and pass either the merchant ID or a session ID to the DGW instance.
  • Set the type property of view to pickup-point-selection.
window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
   },
});

You can configure the pickup point selector to always open in a modal: set openInModal to true. For example, you can use this setting to open a pickup point selection modal in response to a button click.

tip

We recommend setting hideMainLoadingIndicator to true as well: this hides the main loading indicator normally visible during initialization and after a pickup point has been selected.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
      openInModal: true,
      hideMainLoadingIndicator: true,
   },
});

You can filter for operators with selectedOperatorFilters: it takes an array of operator names which you can find on the Admin Dashboard. The map on the selector will only show the locations of the operators in the array.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "pickup-point-selection",
      openInModal: true,
      hideMainLoadingIndicator: true,
      selectedOperatorFilters: {OP1, OP2},
   },
});