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.
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 eitherLOCAL_DELIVERY
orSTORE_PICKUP
, when the delivery method selector isn't enabledLOCAL_DELIVERY
will be returned by default.date
: returnsundefined
when the date is unselected, then returns the date inYYYY-MM-DD
format.dateDisplay
: returnsundefined
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
: returnsundefined
when the time slot is unselected, then returns the selected time slot as an object. For example:{ from: "12:00", to: "18:00" }
timeSlotDisplay
: returnsundefined
when the time slot is unselected, then returns the time slot in the display format. The format depends on the shop's current language.
Example:
document.addEventListener("BuuntoDatePicker:selectionChange", (e) => { const { method, date, dateDisplay, timeSlot, timeSlotDisplay } = 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 betrue
when the date is missing,false
otherwisehasTimeSlotError
: will betrue
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 betrue
when the date is missing,false
otherwisehasTimeSlotError
: will betrue
when the time slot is. missing,false
otherwise
Example:
document.addEventListener("BuuntoDatePicker:hasErrors", (e) => { const { hasDateError, hasTimeSlotError } = e.detail // Your code here. })