Extra fields provide some options for customization. Let's see them in more details below.
The codes for extra fields need to be added to the source code of your website or via an app for Ecwid, that customizes the storefront
Advanced settings for date picker
You are also able to customize the date picker: what hours are available, what is the minimum time to choose, show or hide time selection and more. The example code displays a new custom date picker field at shipping method step for In-store Pickup methods.
Customizations applied
- it displays time selection in 24-hour format with 30 minute intervals
- the max date to select is 31st of December 2020
- minimum is 2 hours after the current date
- the available pickup hours are limited by week day
// Customize time and date selection for order pickup datepicker
ec.order.extraFields.pickup_time_select = {
'title': 'Select date of pickup',
'required': true,
'type': 'datetime',
'checkoutDisplaySection': 'pickup_details',
'orderDetailsDisplaySection': 'order_comments',
// Default date picker presets
'datePickerOptions': {
'minDate': new Date(new Date().getTime() + 2*60*60*1000), // Order is prepared for 2 hours minimum. Hiding 2 hours from the current time. Default is 0
'maxDate': new Date(2020, 12, 31),
'showTime': true,
'incrementMinuteBy': 30,
// limit available hours for each week day
'limitAvailableHoursWeekly': {
'MON': [
['08:30', '13:30'],
['14:00', '17:30']
],
'TUE': [
['14:00', '17:30']
],
'WED': [
['01:00', '13:30']
],
'THU': [
['14:00', '23:30']
],
'FRI': [
['14:00', '17:30']
]
}
}
};
Ecwid.refreshConfig && Ecwid.refreshConfig();
Once an order is placed, this information will be displayed in the order comments section of order details for both customer and a merchant.
As with the other extra fields, you can override this date picker settings based on the shipping method selected by a customer in storefront. See the overrides array of conditions and changes.
Datepicker attributes
| Field | Type | Description |
|---|---|---|
| datePickerOptions | <DatePickerOptions> | Datepicker's customizable attributes |
DatePickerOptions
| Field | Type | Description |
|---|---|---|
| minDate | Date | Min allowed date to select by customer |
| maxDate | Date | Max allowed date to select by customer |
| limitAvailableHoursWeekly | Array<LimitAvailableHoursWeekly> | Limit available hours for each day of the week. Values: MON, TUE, WED, THU, FRI, SAT, SUN |
| showTime | boolean | Use true to show time picker, false to hide it |
| incrementTimeBy | integer | Time intervals in minutes. If 30 is set, the times will be like: 12:30, 13:00, 13:30.. |
LimitAvailableHoursWeekly
Specify time frames for each day of the week, multiple timeframes are available, see example code above.