More Compatibility

Notes on integrating the VAT ID field with specific third-party extensions and themes.

BSS B2B Registration

To show the VAT ID field including validation on the B2B registration page, add the following container where you want the field to appear (for example below the country field):

<div data-bind="scope: 'vat-id-input'" id="vat_number_container" class="fields">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

At the bottom of the template file, initialize the field and its options:

<script type="text/x-magento-init">
{
    "#vat_number_container": {
        "Magento_Ui/js/core/app": {
            "components": {
                "vat-id-input": {
                    "component": "uiComponent",
                    "children": {
                        "vat_id": {
                            "component": "Geissweb_Euvat/js/form/element/vat-number-front",
                            "config": {
                                "allowedCountries": ["AT","BE","BG","HR","CY","CZ","DK","EE","FI","FR","DE","GR","HU","IE","IT","LV","LT","LU","MT","NL","PL","PT","RO","SK","SI","ES","SE","GB"],
                                "enableAjaxValidation": true,
                                "handle": "customer_account_create",
                                "debug": false,
                                "template": "Geissweb_Euvat/vatfield",
                                "elementTmpl": "Geissweb_Euvat/vat-input",
                                "vatFrontendVisibility": true,
                                "tooltip": {"description": "My Tooltip!"}
                            },
                            "validation_registration": {"": true}
                        }
                    }
                }
            }
        }
    }
}
</script>

To require a validated number as soon as a value is entered, set the validation_registration option as follows:

"validation_registration": {"valid-vat-if-specified": true}

Ultimo theme: aligning the field

With the Ultimo theme the VAT ID field can become misaligned on the registration page. Add the following rule to your _custom.less under app/design/frontend/<Vendor>/<Theme>/web/css/_custom.less:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    #gw-euvat-field label {
        padding: 6px 15px 0 0;
        text-align: right;
        width: 25.8%;
        box-sizing: border-box;
        float: left;
    }
    #gw-euvat-field div.control {
        float: left;
        width: 74.2%;
    }
}