Adicionar atributo volume com cálculo automático

Este tutorial cria um atributo Volume para os produtos e realiza o cálculo automático do mesmo preenchendo as dimensões largura, altura e comprimento.

Na administração do Magento 2 vá até

Loja > Atributos > Produto

Crie um novo atributo. Preenche com as mesmas informações de comprimento, largura ou altura, somente alterando o nome para Volume.

Vá até

Loja > Atributos > Definir Atributo

E adicione o atributo Volume que você acabou de criar ao conjunto de atributos padrão.

Vá até

vendor/magento/module-backend/view/adminhtml/templates/widget/form.phtml

e adicione o seguinte código no final do arquivo:

<script type="text/javascript"> setTimeout(function(){ var lg = document.getElementsByName("product[largura]")[0].value; var at = document.getElementsByName("product[altura]")[0].value; var cm = document.getElementsByName("product[comprimento]")[0].value; document.getElementsByName("product[largura]")[0].value = parseFloat(lg); document.getElementsByName("product[altura]")[0].value = parseFloat(at); document.getElementsByName("product[comprimento]")[0].value = parseFloat(cm); if (isNaN(document.getElementsByName("product[largura]")[0].value)) { document.getElementsByName("product[largura]")[0].value = ""; } if (isNaN(document.getElementsByName("product[altura]")[0].value)) { document.getElementsByName("product[altura]")[0].value = ""; } if (isNaN(document.getElementsByName("product[comprimento]")[0].value)) { document.getElementsByName("product[comprimento]")[0].value = ""; } if (isNaN(document.getElementsByName("product[volume]")[0].value)) { document.getElementsByName("product[volume]")[0].value = ""; } function blockLetters(evt) { if(evt.which < 46 || evt.which > 59) { evt.preventDefault(); } if(evt.which == 46 && document.getElementsByName("product[largura]")[0].value.indexOf('.') != -1 && document.getElementsByName("product[altura]")[0].value.indexOf('.') != -1 && document.getElementsByName("product[comprimento]")[0].value.indexOf('.') != -1) { evt.preventDefault(); } } document.getElementsByName("product[largura]")[0].onkeypress = function() {return blockLetters(event);}; document.getElementsByName("product[altura]")[0].onkeypress = function() {return blockLetters(event);}; document.getElementsByName("product[comprimento]")[0].onkeypress = function() {return blockLetters(event);}; function calculaVolume(){ var volume = 0; var largura = parseFloat(document.getElementsByName("product[largura]")[0].value); var altura = parseFloat(document.getElementsByName("product[altura]")[0].value); var comprimento = parseFloat(document.getElementsByName("product[comprimento]")[0].value); if (largura != null && altura != null && comprimento != null) { volume = largura*altura*comprimento; document.getElementsByName("product[volume]")[0].value = parseFloat(Math.round(volume * 100) / 100).toFixed(2); // document.getElementsByName("product[volume]")[0].onload = function() {fireKeyboardEvent("keyup", 32);}; } } document.getElementsByName("product[largura]")[0].onchange = function() {calculaVolume();}; document.getElementsByName("product[altura]")[0].onchange = function() {calculaVolume();}; document.getElementsByName("product[comprimento]")[0].onchange = function() {calculaVolume();}; }, 3000); </script>

Este código também faz o ajuste das casas decimais e limita o os campos para aceitar somente Float e pontos.