Remarques sur l'intégration du champ numéro de TVA avec certaines extensions et thèmes tiers.
BSS B2B Registration
Pour afficher le champ numéro de TVA avec validation sur la page d'inscription B2B, ajoutez le conteneur suivant à l'endroit souhaité (par exemple sous le champ pays) :
<div data-bind="scope: 'vat-id-input'" id="vat_number_container" class="fields">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
En bas du fichier de template, initialisez le champ et ses 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>
Avec cette méthode, la configuration du champ est codée en dur dans le template. Les modifications de la configuration admin ne sont pas prises en compte ici – ajustez le comportement directement dans le code si nécessaire.
Pour exiger un numéro validé dès qu'une valeur est saisie, définissez l'option validation_registration comme suit :
"validation_registration": {"valid-vat-if-specified": true}
Thème Ultimo : alignement du champ
Avec le thème Ultimo, le champ numéro de TVA peut être mal aligné sur la page d'inscription. Ajoutez la règle suivante à votre _custom.less sous 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%;
}
}