0

I would like to have a dependency between VAT and Company fields for shipping address during checkout. Whenever VAT is filed, Company should be set as required field and the other way.

Should I use some kind of mixin for such problem? Something like in the documentation - https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_new_field.html#mixin

0

I achieved a similar result by extending the input element.

In my case I added a check box to hide/show company fields via afterProcess() plugin on \Magento\Checkout\Block\Checkout\LayoutProcessor.

    $addressFieldset['custom_checkbox'] = [
        'component' => 'Vendor_CustomerCustomAttributes/js/ui/form/element/single-checkbox',
        'config' => [
            'customScope' => $dataScope,
            'template' => 'ui/form/field',
            'prefer' => 'toogle'
        ],
        'dataScope' => $dataScope . '.custom_checkbox',
        'deps' => $deps,
        'label' => __('Are you a Company?'),
        'provider' => 'checkoutProvider',
        'visible' => true,
        'initialValue' => false,
        'sortOrder' => 155,
        'valueMap' => [
            'true' => true,
            'false' => false
        ]
    ];

below the component js

define([
    'Magento_Ui/js/form/element/single-checkbox',
    'mage/translate'
], function (AbstractField, $t) {
    'use strict';

    return AbstractField.extend({
        defaults: {
            streetLabels: [$t('Company / Section / Unit'), $t('Post Sector Type'), $t('Post Sector')],
            modules: {
                country_id: '${ $.parentName }.country_id',
                company: '${ $.parentName }.company',
                vat_id: '${ $.parentName }.vat_id',
                cod_fisc: '${ $.parentName }.cod_fisc',
                sdi: '${ $.parentName }.sdi',
                pec: '${ $.parentName }.pec'
            }
        },
        
        initialize: function () {
            this._super();
            this.updateFieldVisibility();
        },
        
        updateFieldVisibility: function () {
            this.company().visible(this.value());
            this.vat_id().visible(this.value());
            if(this.country_id().value() == 'IT'){
                this.cod_fisc().visible(false);
                this.sdi().visible(this.value());
                this.pec().visible(this.value());
            } else {
                this.cod_fisc().visible(false);
                this.sdi().visible(false);
                this.pec().visible(false);
            }
        },
        
        onCheckedChanged: function () {
            this._super();
            this.updateFieldVisibility();
        }
    });
});

You can use this approach to modify the component of the VAT and Company fields and achieve the desired behavior.

2
  • Thx for help.I'll give it a go. Do you maybe know how to make field required in the js component?
    – Marceli Po
    Jun 25 '21 at 7:30
  • have a look to a required fiel and check classe and attribute of elements
    – krybbio
    Jun 25 '21 at 14:17

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.