Criar custom field no checkout

Boa tarde

Tenho uma loja online e preciso adicionar um campo de data de nascimento no checkout e guardar no banco de dados. Como posso fazer isso?

Também quero saber como faço isso

Talvez isso ajude:

Aparentemente não é possível fazer isso pelo CMS igual a custom field de categorias de produtos né?

Não queria ter que montar o ambiente e fazer deploy pois nao tenho experiencia de desenvolvimento com VTEX IO.

No caso da documentação que eu mandei, não se trata de desenvolvimento no VTEX IO necessariamente.

Hoje em dia com a API do Checkout, você consegue adicionar dados adicionais no formulário do pedido (orderForm). Aí seria uma questão de inserir esses dados através de customização da UI do Checkout, até onde entendo, com HTML/CSS/Javascript.

Se a proposta for de adicionar um campo adicional no cadastro do cliente, aí isso precisa ser criado na entidade de dados CL do Master Data. E aí, novamente, seria o caso de inserir esses dados através de customização da UI do Checkout, mas chamando a API do Master Data.

Existe algum exemplo disso? Posso colocar no custom checkout.js?

@merceloki é possivel sim, voce tem que adicionar centro do checkout6.js e uma linha no css para mostrar ele. Dentro do MD é necessário que a entidade possua os campos ‘birthDate’ como leitura publica e ‘email’ como filtro público.Arquivos que precisa subir no checkout:

checkout5-custom.css (268,Bytes)

#birthDate.input-small {
  width:  150px;
  padding: 0 10px;
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 2px;
    font-size: 14px;
    color: #000;
    line-height: 33px;
    height: 36px;
    font-family: 'Open Sans', sans-serif;
}

checkout6-custom.js (2,1,KB)

  $(window).on("orderFormUpdated.vtex", function(e,_orderForm){
    birthDate = $("#birthDate");
  	if(birthDate.val().length == 0){
      var _email = ((_orderForm.clientProfileData != null) ? _orderForm.clientProfileData.email : $("#client-email").val());
      	if(_email.length == 0) _email = $("#client-pre-email").val();
      if(_email.length > 0){
          $.ajax({
          url: "https://api.vtexcrm.com.br/" + vtex.accountName + "/dataentities/CL/search/?_fields=birthDate&_where=email=" + _email,
          dataType: "json",
          type: "GET",
          crossDomain: !0,
          headers: {
            Accept: "application/vnd.vtex.ds.v10 json",
            "Content-Type": "application/json; charset=utf-8"
          },
            success: function(o) {
              if(o.length > 0) {
                birthDate.val(o[0].birthDate.split("T")[0]);
              } 
              console.log("get birthDate")
            },
          fail: function(e){console.log(e);console.log("erro get birthDate");}
        })
      }
    }
  });
}),
$(window).on("componentDone.vtex", function() {
  birthDate = $("#birthDate");
  if(birthDate.length>0 && vtexjs.checkout.orderForm.clientProfileData != null && birthDate.val().length > 0){
    $.ajax({
      url: "https://api.vtexcrm.com.br/" + vtex.accountName + "/dataentities/CL/documents/",
      dataType: "json",
      type: "PATCH",
      crossDomain: !0,
      data: JSON.stringify({email: vtexjs.checkout.orderForm.clientProfileData.email, birthDate: birthDate.val()}),
      headers: {
        Accept: "application/vnd.vtex.ds.v10 json",
        "Content-Type": "application/json; charset=utf-8"
      },
      success: function(e) {console.log(e), console.log("salvei birthDate")},
      fail: function(e){console.log(e);console.log("erro patch birthDate");}
    })
  }
})
1 Like

Valeu peça força

Quando eu tento deixar o campo birthDate como público da esse erro ao salvar:

O campo birthDate (Data de nascimento) não pode ser público.

Sabe o que pode ser?

Deixa ele sem mesmo.

Se ficar sem a chamada retorna erro de Cannot read private field

entao é meio que uma sinuca de bico

Dá uma olhada nisso aqui:

Recentemente ajustamos o comportamento de alguns campos do Master Data para ajudarmos nossos clientes a serem compatíveis com LGPD e GDPR.

1 Like