2

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)

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.