Ajuda com script usando orderForm

guilherme4 · March 28, 2019, 6:40pm

Oi pessoal, tudo bom?

Temos um script que valida se o usuário está com 12 itens no carrinho para liberar o checkout... Mas as vezes ele dá problema porque é chamando com a função .onload e as vezes ele carrega antes do orderForm, dando erro ao tentar buscar no .orderForm.items.

Alguma ideia de como faço pra garantir que ele seja executado somente após o orderForm ser criado? Procurei nos docs do orderForm algum evento que informa isso mas não achei :(

OBS: não usamos o recurso nativo da vtex pois nossas lojas B2B e B2C usam o mesmo oms e essa validação não se aplica para o B2C.

var permitBuy = 0;
(cartB2B = function(){
	let qtd = 0;
	vtexjs.checkout.orderForm.items.forEach(function(el,i){
		qtd = qtd + el.quantity;
	});
	let ch = vtexjs.checkout.orderForm.salesChannel;
	console.log('p='+ch);
	if( ( (+ch)=='2') ){
		if( ((+qtd)>=12) ){
			console.log('compra');
			document.querySelector('.btn-place-order-wrapper').innerHTML = permitBuy;
		}else{
			console.log('nao');
			document.querySelector('.btn-place-order-wrapper').innerHTML = 'Compra mínima 12 itens.';
		}
	}else{
		document.querySelector('.btn-place-order-wrapper').innerHTML = permitBuy;
	}
});
 
window.onload = function(){
	cartB2B();
	$(window).on('orderFormUpdated.vtex', function(evt, orderForm) {
		document.querySelector('.btn-place-order-wrapper').innerHTML = 'Aguarde...';
		cartB2B();
	});
	$(document).ajaxStop(function(){
		cartB2B();
	});
};
 
document.addEventListener('DOMContentLoaded', function(){ 
	permitBuy = document.querySelector('.btn-place-order-wrapper').innerHTML;
	document.querySelector('.btn-place-order-wrapper').innerHTML = 'Aguarde...';
}, false);

danilosousa.develope · March 29, 2019, 6:55pm

@Guilherme Bernardes da uma olhada e vê se um desses loads em js resolve.

https://stackoverflow.com/questions/588040/window-onload-vs-document-onload

você pode tentar usar também um Ajaxstop()

$( document ).ajaxStop(function() {
  console.log('Ajax Stop')
});

ou usar um setimeOut()

setTimeout(function(){
  console.log("setimeout!");
}, 800);

veja se funciona algum desses pra você.

ou.....

Da pra fazer via Google tag manager também.

guilherme4 · April 1, 2019, 8:08pm

@Danilo Sousa Obrigado pela ajuda, mas nem o timeout nem o ajaxstop conseguiram fazer com que o script execute em 100% dos casos após o orderForm :(

O correto mesmo seria um evento que identifica a criação do orderForm ou um if para verificar se ele já foi criado... Desculpa a "leiguice", mas não faço ideia de como iniciar o script com essas validações rs

danilosousa.develope · April 2, 2019, 1:03pm

@Guilherme Bernardes Eu fiz um teste aqui pelo console do navegador e parece que esta funcionando.

http://prntscr.com/n6emkx

Removi todos aqueles loads, window.onload, addEventListener e usei somente a o AjaxStop chamando sua função.

var permitBuy = 0;
(cartB2B = function(){
	let qtd = 0;
	vtexjs.checkout.orderForm.items.forEach(function(el,i){
		qtd = qtd + el.quantity;
	});
	let ch = vtexjs.checkout.orderForm.salesChannel;
	console.log('p='+ch);
	if( ( (+ch)=='2') ){
		if( ((+qtd)>=12) ){
			console.log('compra');
			document.querySelector('.btn-place-order-wrapper').innerHTML = permitBuy;
		}else{
			console.log('nao');
			document.querySelector('.btn-place-order-wrapper').innerHTML = 'Compra mínima 12 itens.';
		}
	}else{
		document.querySelector('.btn-place-order-wrapper').innerHTML = permitBuy;
	}
});
$(document).ajaxStop(function() {
   cartB2B();
});

vê se deu certo ai.