magento 2.4 checkout layout processor to detect the user's city value

35 Views Asked by At

on magento checkout, I need to show the company field based on the city value entered by the user. In order to do this I've followed magento guide (https://developer.adobe.com/commerce/php/tutorials/frontend/custom-checkout/add-checkbox/) and I've created my layout processor plugin and my js component. My code so far (I've removed irrelevant code):

-- component js:

define([
    'Magento_Ui/js/form/element/abstract',
    'mage/translate'
], function (Abstract, $t) {
    'use strict';

    return Abstract.extend({

        defaults: {
            visible: true,
            modules: {
                city: '${ $.parentName }.city',
                business_customer: '${ $.parentName }.company'
            }
        },

        updateFields: function () {

            if(this.city().value() == 'YYY') {
                this.company().show();
            } else {
                this.company().hide();
            }

        },

        setInitialValue: function () {
            this._super();
            this.company().hide();
            return this;
        },

        onUpdate: function () {
            this.updateFields();
            return this._super();
        }

    });
});

-- LayoutProcessor.php:

class LayoutProcessorPlugin
{
    
    public function afterProcess (LayoutProcessor $subject, array $jsLayout)
    {
        $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
        $billingConfiguration = [...];

        if (isset($shippingConfiguration)) {
            $shippingConfiguration = $this->processAddress(
                $shippingConfiguration,
                'shippingAddress',
                [
                    'checkoutProvider',
                    'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.city',
                    'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.company'
                ]
            );
        }

        if (isset($billingConfiguration)) {
            [...]
        }

        return $jsLayout;
    }

    private function processAddress($addressFieldset, $dataScope, $deps)
    {
        $addressFieldset['foo'] = [
            'component' => 'Vendor_Module/js/city',
            'config' => [
                'customScope' => $dataScope
            ],
            'dataScope' => $dataScope . '. city',
            'deps' => $deps,
            'visible' => true
        ];

        return $addressFieldset;
    }

}

Note the key of the array addressFieldset in the processAddress function of the layout processor. If I read the official documentation (the tutorial I linked at the beginning of the post), this key should be the field code (eg: my field code is city, so the array should be $addressFieldset['ciy'] ). But if I put "city" as key, then the city field disappears from the checkout. If I put a non-existing code as key, then everything works perfectly.

I tried putting the "visible" attribute both in the php and in js file, but nothing changes (the update works only if I use a key that is different from the code of the field).

So my question is: what should I put as key of the array? If I should, indeed, put "city", then how I can avoid it to disappear from checkout?

0

There are 0 best solutions below