Adicionar atributo volume com cálculo automático

De Tek-System Wiki
Ir para navegação Ir para pesquisar

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.