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 '19 at 11:06
0

public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $subject, $result) { $districtAttributeCode = 'district_id'; $districtField = [ 'component' => 'Vendor_Module/js/form/element/district', 'config' => [ 'customScope' => 'shippingAddress', 'customEntry' => 'shippingAddress.district', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/select', ], 'dataScope' => 'shippingAddress.district_id', 'provider' => 'checkoutProvider', 'filterBy' => [ 'target' => '${ $.provider }:${ $.parentScope }.region_id', 'field' => 'region_id', ], 'customEntry' => 'shippingAddress.region_id' ];

$result['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$districtAttributeCode] = $districtField;

return $result; }

public function afterProcess(\Magento\Checkout\Block\Checkout\DirectoryDataProcessor $directoryDataProcessor, $jsLayout) { if (!isset($jsLayout['components']['checkoutProvider']['dictionaries']['district_id'])) { $jsLayout['components']['checkoutProvider']['dictionaries']['district_id'] = [ [ 'value' => ’’, 'label' => ‘’, 'title' => ‘’, ‘region_id’ => ‘’, ],….

]; } return $jsLayout; }

enter code here

define([ 'Magento_Ui/js/form/element/select' ], function ( Select) { 'use strict';

return Select.extend({
    defaults: {
        skipValidation: false,
        imports: {
            update: '${ $.parentName }.region_id:value',
            initialOptions: "index =

checkoutProvider:dictionaries.district_id", setOptions: "index = checkoutProvider:dictionaries.district_id" } }, }); });

| improve this answer | |

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.