cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2: How I can call country and region use UI in checkout?

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Magento 2: How I can call country and region use UI in checkout?

I want to show country and region in custom step checkout but its just show input not select.

<item name="region" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</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/input</item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">billingAddress.region</item>
    <item name="sortOrder" xsi:type="string">6</item>
    <item name="label" xsi:type="string">State/Province</item>
    <item name="visible" xsi:type="boolean">false</item>
</item>
<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">billingAddress.region_id</item>
    </item>
    <item name="sortOrder" xsi:type="string">7</item>
    <item name="label" xsi:type="string">State/Province</item>
    <item name="customEntry" xsi:type="string">region</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
    </item>
    <!-- Value of region_id field is filtered by the value of county_id attribute -->
    <item name="filterBy" xsi:type="array">
        <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
        <item name="field" xsi:type="string">country_id</item>
    </item>
</item>
<item name="postcode" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</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/input</item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">billingAddress.postcode</item>
    <item name="label" xsi:type="string">Zip/Postal Code</item>
    <item name="sortOrder" xsi:type="string">8</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="string">true</item>
    </item>
</item>
<item name="country_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/country</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">billingAddress.country_id</item>
    </item>
    <item name="label" xsi:type="string">Country</item>
    <item name="sortOrder" xsi:type="string">9</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
    </item>
</item>

Let me know where I am wrong or if anything is missing here...

Any help would be appreciated Smiley Happy