0

I added new step on checkout and I created a form for this new step. How can I add Magento built-in Country drop down field and state/province drop down field to my custom checkout form?

2 Answers 2

2
 <item name="country_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
    <item name="config" xsi:type="array">
        <item name="customScope" xsi:type="string">customCheckoutForm</item>
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="deps" xsi:type="array">
            <item name="0" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
    <item name="dataScope" xsi:type="string">customCheckoutForm.country_id</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="sortOrder" xsi:type="string">5</item>
    <item name="label" xsi:type="string" translate="true">Country</item>
    <item name="imports" xsi:type="array">
        <item name="initialOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.country_id]]></item>
        <item name="setOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.country_id]]></item>
    </item>
</item>
<!-- The following items override configuration of corresponding address attributes -->
<item name="region" xsi:type="array">
    <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
    <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="customScope" xsi:type="string">customCheckoutForm</item>
        <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">customCheckoutForm.region</item>
        <item name="deps" xsi:type="array">
            <item name="0" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">customCheckoutForm.region_id</item>
    <item name="label" xsi:type="string">State/Province</item>
    <item name="sortOrder" xsi:type="string">6</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 name="imports" xsi:type="array">
        <item name="initialOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.region_id]]></item>
        <item name="setOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.region_id]]></item>
    </item>
</item>
2
  • Add bove code in layout of checkout page to display built-in Country drop down field and state/province drop down field to my custom checkout form Commented Apr 7, 2020 at 6:41
  • Well done. It worked like a charm :) Commented Sep 24, 2021 at 2:26
-1
insert into directory_country_region (country_id, code, default_name) values ("BD", "BD", "Dhaka");
insert into directory_country_region (country_id, code, default_name) values ("BD", "BD", "Bagerhat");
insert into directory_country_region (country_id, code, default_name) values ("BD", "BD", "Bandarban");
1
  • Thank you for your answer but I don't want to add new country or province in database. I want to add drop down list to a custom form, using default countries of Magento. Commented Mar 28, 2019 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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