Skip to main content

Create a delivery method selector

Set up a delivery method selector for the Delivery Gateway embedded UI: the selector allows your customers to choose between the available delivery methods, such as home delivery, pickup point delivery, or store pickup.

Your delivery method selector will display all delivery methods that you enabled for your Delivery Gateway merchant.

Define the delivery method selector 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 delivery-method-selection.
window.DGW.mount({
    containerId: "delivery-gateway",
    merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    view: {
        type: "delivery-method-selection",
    },
    });

When the customer selects a delivery method, the next steps - such as setting a delivery address or selecting a pickup point - can either open in a modal or in place. Use the openSelectedMethodInModal boolean to define the behavior:

window.DGW.mount({
    containerId: "delivery-gateway",
    merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    view: {
        type: "delivery-method-selection",
        openSelectedMethodInModal: true,
    },
    });

For pickup point delivery, you can present each operator as a separate checkbox at the initial method selection: customers can immediately select a specific operator. Then the customer selects a location: the options are filtered to the selected operator.

You can define this behavior with the operatorsAsSeparateMethods field:

window.DGW.mount({
    containerId: "delivery-gateway",
    merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    view: {
        type: "delivery-method-selection",
        operatorsAsSeparateMethods, true,
    },
    });

For home delivery, you can display the icons of the available providers on the delivery method selector with showHomeDeliveryOperatorIcons:

window.DGW.mount({
    containerId: "delivery-gateway",
    merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    view: {
        type: "delivery-method-selection",
        showHomeDeliveryOperatorIcons: true,
    },
    });