1

I've added a custom field to the shipping address in checkout:

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['date'] = [
            'component' => '<vendor>_<module>/js/shipping-provider',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => '<vendor>_<module>/date',
                'options' => [],
                'id' => 'date'
            ],
            'dataScope' => 'shippingAddress.date',
            'label' => __('Date'),
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [
                'required-entry' => true
            ],
            'sortOrder' => 200,
            'id' => 'date'
        ];

As you can see I set required-entry to true for validation purposes. But now I always get that the field is a required field error message even though the field has a value set.

Here is the field:

<input class="input-text" type="text" data-bind="
    hasFocus: focused,
    datepicker: { storage: value, options: options },
    attr: {
        value: value,
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        disabled: disabled
    }" readonly/>

Any idea on this?

Update Here is the shipping-provider.js

define([
    'Magento_Ui/js/form/element/abstract',
    'jquery',
    'mage/calendar'
], function (Abstract, $, calendar) {
    'use strict';

    $.extend(true, $, {
        calendarConfig: {
            onSelect: function (date, datepicker) {
                // do stuff
            }
        }
    });

    return Abstract.extend(Abstract, calendar);
});
  • Can you post your js component? <vendor>_<module>/js/shipping-provider – Khoa TruongDinh May 23 '17 at 6:23
  • Hi, thanks for your reply. Doesn't matter. It's the same behaviour with the abstract provider 'component' => 'Magento_Ui/js/form/element/abstract'. The problem is just the 'required-entry' => true line. If I comment that, everything works as expected. Data is transferred to the quote and then saved to the order. – steros May 23 '17 at 7:11
  • 1
    damn...I checked again just to be 100% sure and it seems I ran into a caching problem. It really is the shipping-provider :O I'll attach a stub. – steros May 23 '17 at 7:18
1

So extending from abstract has proven to be not working. I have to extend from date (makes sense). So this is working just fine:

define([
    'jquery',
    'Magento_Ui/js/form/element/date',
], function ($, date) {
    'use strict';

    return date;
});

Problem is now I need to extend the calendar itself and if I do so it is not working again:

define([
    'jquery',
    'Magento_Ui/js/form/element/date',
], function ($, date) {
    'use strict';

    $.extend(true, $, {
        calendarConfig: {
            onSelect: function (date, datepicker) {
                // do stuff
            }
        }
    });

    return date;
});

The problem is that onSelect interferes with internal Magento functions. Extending with changing other values like minDate works. So I have to do this:

define([
    'jquery',
    'Magento_Ui/js/form/element/date',
], function ($, date) {
    'use strict';

    $.extend(true, $, {
        calendarConfig: {
            minDate: getMinDate()
        }
    });

    return date.extend({
        onValueChange: function (value) {
            // do stuff here instead
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.