Can anyone please explain below line in magento2 checkout page

  <item name="customEntry" xsi:type="string">shippingAddress.region</item>

This line is part of the checkout layout handle (checkout_index_index.xml):

<!-- code above -->
<item name="region_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="customEntry" xsi:type="string">shippingAddress.region</item>
<!-- code bellow -->

The top level item is named "region_id" and therefore, with the child item "component", its component is set to "Magento_Ui/js/form/element/region".

The actual file that matches this string is found at /vendor/magento/module-ui/view/base/web/js/form/element/region.js

The item "config" actually configures the component. If you were to add any item of type string, just like the "customEntry" is added, this is immediately available to the component as JavaScript variable, and therefore can be referenced in the HTML template.

For example, if you were to declare the "customEntry" as

<item name="customEntry" xsi:type="string">My fixed message here!</item>

you should be able to type this KO binding in the HTML template:

<div><span data-bind="text: customEntry"></span></div>

And the span will be filled with the value "My fixed message here!"

In Magento_Ui/js/form/element/region component this is used in a different fashion (lines 88-90)

if (this.customEntry) {// eslint-disable-line max-depth

In effect, this toggles the input if the "customEntry" is not undefined I guess.

Now, the last question is what is shippingAddress.region.

Well, that would be an already present JavaScript object named "shippingAddress" which has a property "region".

How do you find it?

Login in as a customer that has a shipping address already saved and open the checkout page in magento. Open "Inspect" and then "Console" in Mozilla Firefox. Execute

var reg = requirejs('uiRegistry');

Now, the "reg" variable contains all the data from magento uiRegistry. Next, lets list all entries in the registry with


Then, filter these results by typing "shipping" in the "Filter output".

Now, take a moment a thank Alam Storm for this way of looping through the uiRegistry.

Eventually, you will notice that Magento_Checkout/js/view/shipping-address/address-renderer/default is loaded.

The actual file that matches this string is found at /vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js

You will notice that this file asks a "quote" object to be inserted via Magento_Checkout/js/model/quote.

Later on line 30, quote.shippingAddress() is called an assigned to a variable named shippingAddress.

You should debug, using Mozilla "Debugger", the corresponding js file found in /pub/static and see if you have actual "region" set to this shippingAddress set and what the value is.

By the way, the value here, should match the value entered in the "State/Province" field of the "Addresses" in the Customer edit page in the admin of the site.

  • Can you please do one more fever? Do you know how to add notice in this customentry? – Rutvee Sojitra Aug 31 '18 at 9:04

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.