Widget API | Zapiet - Pickup + Delivery

We have a list of events that you can access when relevant actions are taken in the widget. Those events are accessible through the ZapietEvent interface.

To listen to the events described here, use the window.ZapietEvent.listen() method. This method accepts two arguments:

The event name
An optional callback function with the event's payload

Example:

window.ZapietEvent.listen("widget_loaded", function() {
  alert("Zapiet widget loaded!");
});

Take a look at our Widget API documentation for more information.

Available events

Preparation time, slot limits and conditional activation are supported via locations API.

The following events are available in v7.0.5 and above:

widget_loaded
- Fired when the widget finishes loading in the page and is ready to be used.

selected_method

Fired when a checkout method is selected in the widget.
Payload type: "delivery" | "pickup" | "shipping"

Example:

window.ZapietEvent.listen("selected_method", function(checkout_method) {     
  switch (checkout_method) { 
    case "pickup": 
      // Do something when pickup is selected 
      break; 
    case "delivery": 
      // Do something when delivery is selected 
      break; 
    case "shipping": 
      // Do something when shipping is selected 
      break; 
  }
});

delivery.datepicker.rendered
- Fired when the delivery calendar is rendered on the page.

delivery.datepicker.opened
- Fired when the delivery calendar is opened.

delivery.timepicker.rendered
- Fired when the delivery time picker is rendered on the page.

delivery.timepicker.opened
- Fired when the delivery time picker is opened.

pickup.datepicker.rendered
- Fired when the pickup calendar is rendered on the page.

pickup.datepicker.opened
- Fired when the pickup calendar is opened.

pickup.timepicker.rendered
- Fired when the pickup time picker is rendered on the page.

pickup.timepicker.opened
- Fired when the delivery time picker is opened.

shipping.datepicker.rendered
- Fired when the shipping calendar is rendered on the page.

shipping.datepicker.opened
- Fired when the shipping calendar is opened.

checkoutEnabled

Fired when the checkout button is enabled and provides the checkout params.

Payload type:

{
    method: "pickup" | "shipping" | "delivery",
    location: {
      id: number,
      company_name: string,
      date_picker_enabled: boolean,
      latitude: string,
      longitude: string,
      address_line_1: string,
      address_line_2: string,
      city: string,
      country: string,
      postal_code: string,
      region: string,
      region_code: string,
      slots: array,
      custom_attribute_1: string,
      custom_attribute_2: string,
      custom_attribute_3: string,
      more_information: string,
      opening_hours: any,
      distance: string,
      limits_enabled: string,
      time_picker_enabled: boolean
    },
    date: string,
    time: string,
    start_time: string,
    slot_id: number,
    postal_code: string
}

Example:

window.ZapietEvent.listen("checkoutEnabled", function(params) {
  if (params.method == "pickup") {
    console.log("Checkout enabled with Store pickup selected");
  }
});

The following events are currently available on the newest version of our app:

Zapiet.setCheckoutMethod( "delivery" | "pickup" | "shipping"):
- Used to select a checkout method: Shipping, Delivery or Pickup.
Zapiet.getSelectedCheckoutMethod():
- Used to get the selected checkout method.
Zapiet.getAvailableCheckoutMethods():
- Used to get available checkout methods.

locationSelected

Fired whenever a location is selected, either for delivery or pickup.

Payload type:

{
    method: "pickup" | "shipping" | "delivery",
    location: {
      id: number,
      company_name: string,
      date_picker_enabled: boolean,
      latitude: string,
      longitude: string,
      address_line_1: string,
      address_line_2: string,
      city: string,
      country: string,
      postal_code: string,
      region: string,
      region_code: string,
      slots: array,
      custom_attribute_1: string,
      custom_attribute_2: string,
      custom_attribute_3: string,
      more_information: string,
      opening_hours: any,
      distance: string,
      limits_enabled: string,
      time_picker_enabled: boolean
    }
}

Example:

window.ZapietEvent.listen("locationSelected", function(params) {
  if (params.method == "pickup") {
    console.log("Pickup location selected: " + params.location.company_name);    
  }
});

Cart attributes

We use the Shopify Cart API to add the necessary attributes to your orders.

List of the possible attributes:

Checkout-Method: "pickup" | "delivery" | "shipping"
Pickup-Location-Id
Pickup-Location-Company
Pickup-Location-Address-Line-1
Pickup-Location-Address-Line-2
Pickup-Location-City
Pickup-Location-Region
Pickup-Location-Postal-Code
Pickup-Location-Country
Pickup-Date
Pickup-Time
Delivery-Location-Id
Delivery-Date
Delivery-Time
Delivery-Slot-Id (Internal use only)
Shipping-Date
Custom-Attribute-1
Custom-Attribute-2
Custom-Attribute-3

Draft orders

Widget is not showing on cart page

Multiple shipping profiles (Carrier Service API rates)

Rates setup guide (Zapiet - Pickup + Delivery rates)

Checkout widget