3

I try to do dropdown option filter and autofill postcode.

for select step are Country > City > State/Province > District > autofill postcode

What I have done

  • convert city textbox to dropdown and populate city name(from DB).
  • add dropdown for district and populate district name(from DB).
  • create table for district (district_id , region_id , postcode)

My Code

plugin file

class LayoutProcessorPlugin{

/**
 * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
 * @param array $jsLayout
 * @return array
 *
 */

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
    array  $jsLayout
) {
    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['city'] = [
        'component' => 'Magento_Ui/js/form/element/select',
        'config' => [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/select',
            'name' => __('City'),

        ],
        'dataScope' => 'shippingAddress.city',
        'label' => __('City'),
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 120,
        'name' => __('City'),
        'validation' => [
            'required-entry' => true,
        ],
        'options' => $this->districttoOptionArray(),



    ];
    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
    ['shippingAddress']['children']['shipping-address-fieldset']['children']['subcity'] = [
        'component' => 'Magento_Ui/js/form/element/select',
        'config' => [
            'customScope' => 'shippingAddress',
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/select',
            'name' => __('subcity')
        ],
        'dataScope' => 'shippingAddress.subcity',
        'label' => __('แขวง'),
        'provider' => 'checkoutProvider',
        'visible' => true,
        'validation' => [],
        'sortOrder' => 121,
        'name' => __('subcity'),
        'validation' => [
            'required-entry' => true,
        ],
        'options' => $this->subdistricttoOptionArray(),



    ];
    return $jsLayout;
}

Output

enter image description here

My problem

  1. I don't know how magento2 do filter (like in Checkout/LayputProcessor filter state by country dropdown)

    'filterBy' => [ 'target' => '${ $.provider }:${ $.parentScope }.country_id', 'field' => 'country_id', ]

  2. how to auto fill postcode textbox

reference : create field in checkout page (Magento2 "delivery date" module creation from scratch)

  • did you get the solution. – Sumit Verma Aug 9 at 11:06

Your Answer

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

Browse other questions tagged or ask your own question.