Javascript API

Error check functions

The following function will only work if the widget is set up to display errors:

For the date check, make sure that the checkbox "Show an error message if a date hasn't been selected" is checked in Widget settings
For the time slot check, make sure that the checkbox "Show an error message if a time slot hasn't been selected" is checked in Widget settings

window.Buunto.datePicker.hasDateError()

This function returns true if the date is missing and false otherwise. It doesn't affect the error display on the widget.

window.Buunto.datePicker.hasTimeSlotError()

This function returns true if the time slot is missing and false otherwise. It doesn't affect the error display on the widget.

window.Buunto.datePicker.hasErrors()

This function combines hasDateError() and hasTimeSlotError() , it returns true if the date or the time slot is missing and false otherwise. It doesn't affect the error display on the widget.

window.Buunto.datePicker.checkErrors()

This function returns the same result as the hasErrors() but it also triggers the error display on the widget.

window.Buunto.datePicker.getCutOffTime()

This function returns the first available date and its cut off time. For example:

{
    "firstAvailableDate": "2025-03-02",
    "cutOffTime": "2025-03-01T14:00:00+00:00"
}

Events

The widget is triggering custom events. You can subscribe to them using document.addEventListener.

BuuntoDatePicker:selectionChange

This event is triggered every time something has been selected or deselected within the Widget. It passes the selection in the event detail.

method : returns either LOCAL_DELIVERY or STORE_PICKUP , when the delivery method selector isn't enabled LOCAL_DELIVERY will be returned by default.
date : returns undefined when the date is unselected, then returns the date in YYYY-MM-DD format.
dateDisplay : returns undefined when the date is unselected, then returns the date in the display format. The display format is different depending on the shop's language.
timeSlot : returns undefined when the time slot is unselected, then returns the selected time slot as an object. For example: { from: "12:00", to: "18:00" }
timeSlotDisplay : returns undefined when the time slot is unselected, then returns the time slot in the display format. The format depends on the shop's current language.
location : returns undefined when no location is selected, then returns the selected location as an object. For example: { id: 99462742363 } . This applies to both pickup and delivery locations.

Example:

document.addEventListener("BuuntoDatePicker:selectionChange", (e) => {
  const { method, date, dateDisplay, timeSlot, timeSlotDisplay, location } = e.detail
  // Your code here.
})

BuuntoDatePicker:cartAttributesUpdated

This event is triggered after the widget has updated the cart attributes for the current selection. It passes the same selection attributes as BuuntoDatePicker:selectionChange .

Use this event when your custom code needs to run after Buunto has finished saving the selected date, time slot, method, or location to the cart.

Example:

document.addEventListener("BuuntoDatePicker:cartAttributesUpdated", (e) => {
  const { method, date, dateDisplay, timeSlot, timeSlotDisplay, location } = e.detail
  // Your code here.
})

BuuntoDatePicker:displayErrors

This event is called every time the error display is refreshed. It provides a boolean state of the form errors in the event detail.

hasDateError : will be true when the date is missing, false otherwise
hasTimeSlotError : will be true when the time slot is. missing, false otherwise

Example:

document.addEventListener("BuuntoDatePicker:displayErrors", (e) => {
  const { hasDateError, hasTimeSlotError } = e.detail
  // Your code here.
})

BuuntoDatePicker:hasErrors

This event is called for every selection change. It provides a boolean state of the form errors in the event detail.

hasDateError : will be true when the date is missing, false otherwise
hasTimeSlotError : will be true when the time slot is. missing, false otherwise

Example:

document.addEventListener("BuuntoDatePicker:hasErrors", (e) => {
  const { hasDateError, hasTimeSlotError } = e.detail
  // Your code here.
})

Change the widget's selection

window.Buunto.datePicker.selectDate(date)

Changes the selected date in the widget. The date parameter can either be a date string in ISO format, or undefined to reset the date.

Examples:

window.Buunto.datePicker.selectDate("2024-11-26")
window.Buunto.datePicker.selectDate(undefined)

Checkout URL

window.Buunto.datePicker.getCheckoutUrl(url)

Returns the URL to send the customer to checkout. When "Prefill the Shipping address fields with the selected pickup location address" is enabled in the Locations settings and the customer selected Store pickup, the pickup location's address is added to the URL, so the checkout opens with that address already filled in. Otherwise the URL is returned unchanged.

Use it when your theme sends customers to checkout from its own JavaScript instead of submitting the cart form, otherwise the address can't be prefilled. The url parameter is optional and defaults to /checkout . Its path and query parameters are kept.

Example:

const checkoutUrl = "/checkout"
window.location = window.Buunto?.datePicker?.getCheckoutUrl?.(checkoutUrl) ?? checkoutUrl

Using ?. and ?? keeps the checkout button working if the date picker isn't loaded.