NAV

Customize extra fields

Extra fields provide some options for customization. Let’s see them in more details below.

Change extra field based on shipping method

Save different hidden data based on selected shipping method

<script>
// Initialize extra fields
//...

// Save type of shipping selected to order as hidden data
ec.order.extraFields.shipping_type = {
    // We save 'flat rate' value by default
    'value': 'flat rate',
    'overrides' : [
    // We can use multiple conditions / shipping methods 
        {
            'conditions': {
                'shippingMethod' : 'In-store Pickup'
            },
            'fieldsToOverride': {
                // If selected shipping is 'In-store Pickup', we save 'pickup'
                'value': 'pickup' 
            }
        }
    ]
}
</script>

You can change the attributes of an extra field based on a shipping method selected by customer. This is done by adding overriding rules to the existing extra field attributes – overrides array of conditions.

At the moment you are able to use the selected shipping method name as a condition only. However, you can add several conditions to a single extra field, so you can use different override rules for different shipping methods selected.

Advanced settings for date picker

Customize date and time selection in datepicker

<script>
    // 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,
            'autoClose': false,
            'use24hour': 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']
                ]
            },
            // disallow specific dates
            'disallowDates': [
                // Same-day pickup can start from 3PM only
                ['2017-04-25 15:00:00', '2017-04-25 23:59:59'],

                // Custom dates (some interval has been reserved by other customer)
                ['2017-04-26 08:30', '2017-04-26 10:00']
            ]
        },

        // Change datepicker settings based on selected shipping method
        'overrides': [
            {
                'conditions': {
                    'shippingMethod': 'Pickup from 5th Avenue'
                },
                'fieldsToOverride': {
                    '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,
                        'autoClose': false,
                        'use24hour': true,
                        'incrementMinuteBy': 30,
                        'limitAvailableHoursWeekly': {
                            'MON': [
                                ['08:30', '13:30'],
                                ['14:00', '17:30']
                            ],
                            'TUE': [
                                ['14:00', '17:30']
                            ]
                        },

                        // disallow specific dates
                        'disallowDates': [
                            // Same-day pickup can start from 3PM only
                            ['2017-04-25 15:00:00', '2017-04-25 23:59:59'],

                            // Custom dates (some interval has been reserved by other customer)
                            ['2017-04-26 08:30', '2017-04-26 10:00']
                        ]
                    }
                }
            },

            {
                'conditions': {
                    'shippingMethod': 'Pickup from Times Square'
                },
                'fieldsToOverride': {
                    '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,
                        'autoClose': false,
                        'use24hour': true,
                        'incrementMinuteBy': 30,
                        // Limiting working hours for weekends
                        'limitAvailableHoursWeekly': {
                            'SAT': [
                                ['08:30', '13:30'],
                                ['14:00', '17:30']
                            ],
                            'SUN': [
                                ['14:00', '17:30']
                            ]
                        }
                    }
                }
            },

            {
                'conditions': {
                    'shippingMethod': 'Pickup from Empire State Building'
                },
                'fieldsToOverride': {
                    'available': false // Hide datepicker if shipping method is a 'Pickup from Empire State Building'
                }
            }
        ]
    };
</script>

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 on the right 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

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

FieldTypeDescription
datePickerOptions<DatePickerOptions>Datepicker’s customizable attributes

DatePickerOptions

FieldTypeDescription
minDateDateMin allowed date to select by customer
maxDateDateMax allowed date to select by customer
limitAvailableHoursWeeklyArray<LimitAvailableHoursWeekly>Limit available hours for each day of the week. Values: MON, TUE, WED, THU, FRI, SAT, SUN
disallowDatesArray<DisallowDates>Disallow several specific timeframes (from date - to date)
showTimebooleanUse true to show time picker, false to hide it
incrementTimeByintegerTime intervals in minutes. If 30 is set, the times will be like: 12:30, 13:00, 13:30..
use24HourFormatbooleanUse true to use 24-hour format, false to use 12-hour (AM/PM) format
autoClosebooleanUse true to close datepicker popup right after the day is selected (not time!). false to close popup only if customer clicks outside of it

LimitAvailableHoursWeekly

Specify time frames for each day of the week, multiple timeframes are available, see example on the right.

DisallowDates

Specify time frames which are not available to select, see example on the right.