it's possible add custom attribute in div (or input) that contain field of checkout in $jsLayout array?

In my case i want add tabindex attribute

In this screenshot add additionalClass (checkout-field__telephone)


Yes you can override input field using $jsLayout array in you custom module. Hope you know how to create Layoutprocessor plugin.

In you Layoutprocessor override text field file 'elementTmpl' to your custom file from custom module like below code

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['telephone']['config']['elementTmpl'] = 'Vendor_Module/form/element/telephone';

And in you html file you can add your attribute like below Vendor/Module/view/frontend/web/template/form/element/telephone.html

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<input class="input-text" type="tel" tabindex="3" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />
| improve this answer | |
  • Hi Ranganathan, i know the possibility to override html but it is possible not to override the file but simply add an attribute to the parent div (because otherwise I would have to override every type of field)? Otherwise I would have to add many html files just to change an attribute (tabindex in my case) – ClodClod91 May 15 '19 at 10:55

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.