Adicionar customização na página de checkout

VTEX in your native language 🌎 Português
, ,
1

Olá! Preciso colocar um “gatilho de compra” na página de checkout VTEX do tipo " Falta apenas R$ X Reais para você conseguir frete grátis" , o problema que estou tendo é que não consigo pegar com javascript a class do valor final, existe alguma forma de apresentar isto?

Estou usando este javascript:

let a = document.getElementsByClassName("total-selling-price")[0].innerText;
let b = a.replaceAll("R$" ,"");
let c = b.replace(",",".");
if(c >= 150){
   document.getElementById("alert-frete-gratis").textContent = "Parabéns! Você ganhou Frete Grátis 😍"
}
else{
   document.getElementById("alert-frete-gratis").textContent = "Faltam apenas " +"R$ " + (150 - c).toFixed(2) + " FRETE GRÁTIS!";
}

Também estou utilizando este html para modificar:

 <h3 style="font-size:0.85rem;font-weight:bold;color:#000;margin:10px auto;text-align:center;line-height: 16px;padding: 10px 0;" id="alert-frete-gratis"> </h3>
1 Like
2

Deu uma olhada no VTEX.js? De repente você consegue pegar os dados do orderForm.
https://developers.vtex.com/vtex-rest-api/docs/vtexjs-for-checkout

$(window).on("orderFormUpdated.vtex", function(evt, orderForm) {
  alert("Someone changed the orderForm!")
  console.log(orderForm)
})
1 Like
3

Eu Já fiz algo semelhante, recomendo você usar o vtexjs para pegar o valor do orderForm e usar os eventos orderFormUpdated.vtex, para recalcular o valor de acordo com a atualização do orderForm e o evento popstate , para recalcular quando trocar de página!

1 Like
4

Como usar esse vtexjs em um componente ?