Veja como colocar uma busca automática de CEP na página de finalização do pedido woocommerce.
Você vai precisar deste plugin abaixo para colocar o código somente na página de finalização do pedido.
Depois de instalar, adicione novo.
Na primeira parte cole esse código:
<script>
const states = [
{name:'Acre', uf: 'AC'},
{name:'Alagoas', uf: 'AL'},
{name:'Amapá', uf: 'AP'},
{name:'Amazonas', uf: 'AM'},
{name:'Bahia', uf: 'BA'},
{name:'Ceará', uf: 'CE'},
{name:'Distrito Federal', uf: 'DF'},
{name:'Espírito Santo', uf: 'ES'},
{name:'Goiás', uf: 'GO'},
{name:'Maranhão', uf: 'MA'},
{name:'Mato Grosso', uf: 'MT'},
{name:'Mato Grosso do Sul', uf: 'MS'},
{name:'Minas Gerais', uf: 'MG'},
{name:'Pará ', uf: 'A)'},
{name:'Paraíba', uf: 'PB'},
{name:'Paraná', uf: 'PR'},
{name:'Pernambuco', uf: 'PE'},
{name:'Piauí', uf: 'PI'},
{name:'Rio de Janeiro', uf: 'RJ'},
{name:'Rio Grande do Norte', uf: 'RN'},
{name:'Rio Grande do Sul', uf: 'RS'},
{name:'Rondônia', uf: 'RO'},
{name:'Roraima', uf: 'RR'},
{name:'Santa Catarina', uf: 'SC'},
{name:'São Paulo', uf: 'SP'},
{name:'Sergipe', uf: 'SE'},
{name:'Tocantins', uf: 'TO'},
]
window.onload = function (){
// document.querySelector('#billing_naeighborhood').setAttribute('readonly', true)
// document.querySelector('#billing_city').setAttribute('readonly', true)
// document.querySelector('#billing_address_1').setAttribute('readonly', true)
// document.querySelector('#billing_state').setAttribute('readonly', true)
document.querySelector('#billing_postcode').addEventListener('blur', function(){
var cep = this.value
var query = `https://viacep.com.br/ws/${cep}/json/`
fetch(query).then(res => {
if(res.status === 200){
var response = res.json()
response.then(address => {
document.querySelector('#billing_neighborhood').value = address.bairro
document.querySelector('#billing_city').value = address.localidade
document.querySelector('#billing_address_1').value = address.logradouro
document.querySelector('#billing_state').value = address.uf
var ufData = states.filter( state => state.uf == address.uf)
console.log( 'uf data', ufData)
document.querySelector( '#select2-billing_state-container' ).innerText = ufData[0].name
})
}
}).catch(err => {
document.querySelector( '#billing_neighborhood' ).setAttribute( 'readonly', false )
document.querySelector( '#billing_city' ).setAttribute( 'readonly', false )
document.querySelector( '#billing_address_1' ).setAttribute( 'readonly', false )
document.querySelector( '#billing_state' ).setAttribute( 'readonly', false )
})
})
}
</script>
Na segunda parte deixe neste formato e salve.
Na finalização do pedido, quando for feito uma consulta, vai preencher automaticamente os dados.
O cliente vai digitar, CEP, número e complemento.
Para usar esse código para outras finalidades de preenchimento automático que não seja no woocommerce, use assim
Crie esses campos:
<input type=”tel” name=”billing_postcode” id=”billing_postcode” placeholder=”cep” maxlength=”9″>
<input type=”text” name=”billing_neighborhood” id=”billing_neighborhood” placeholder=”bairro” >
<input type=”text” name=”billing_city” id=”billing_city” placeholder=”cidade”>
<input type=”text” name=”billing_address_1″ id=”billing_address_1″ placeholder=”endereço”>
<input type=”text” name=”billing_state” id=”billing_state” placeholder=”estado”>
e coloque o código no final da página conforme o exemplo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CEP Auto completar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
*Para testar, Digite o cep e pule o campo<br><br>
<input type="tel" name="billing_postcode" id="billing_postcode" placeholder="cep" maxlength="9">
<br><br>
<input type="text" name="billing_neighborhood" id="billing_neighborhood" placeholder="bairro" >
<br>
<input type="text" name="billing_city" id="billing_city" placeholder="cidade">
<br>
<input type="text" name="billing_address_1" id="billing_address_1" placeholder="endereço">
<br>
<input type="text" name="billing_state" id="billing_state" placeholder="uf">
<br><br>
Estado: <div id="select2-billing_state-container"><div>
<script>
const states = [
{name:'Acre', uf: 'AC'},
{name:'Alagoas', uf: 'AL'},
{name:'Amapá', uf: 'AP'},
{name:'Amazonas', uf: 'AM'},
{name:'Bahia', uf: 'BA'},
{name:'Ceará', uf: 'CE'},
{name:'Distrito Federal', uf: 'DF'},
{name:'Espírito Santo', uf: 'ES'},
{name:'Goiás', uf: 'GO'},
{name:'Maranhão', uf: 'MA'},
{name:'Mato Grosso', uf: 'MT'},
{name:'Mato Grosso do Sul', uf: 'MS'},
{name:'Minas Gerais', uf: 'MG'},
{name:'Pará ', uf: 'A)'},
{name:'Paraíba', uf: 'PB'},
{name:'Paraná', uf: 'PR'},
{name:'Pernambuco', uf: 'PE'},
{name:'Piauí', uf: 'PI'},
{name:'Rio de Janeiro', uf: 'RJ'},
{name:'Rio Grande do Norte', uf: 'RN'},
{name:'Rio Grande do Sul', uf: 'RS'},
{name:'Rondônia', uf: 'RO'},
{name:'Roraima', uf: 'RR'},
{name:'Santa Catarina', uf: 'SC'},
{name:'São Paulo', uf: 'SP'},
{name:'Sergipe', uf: 'SE'},
{name:'Tocantins', uf: 'TO'},
]
window.onload = function (){
// document.querySelector('#billing_neighborhood').setAttribute('readonly', true)
// document.querySelector('#billing_city').setAttribute('readonly', true)
// document.querySelector('#billing_address_1').setAttribute('readonly', true)
// document.querySelector('#billing_state').setAttribute('readonly', true)
document.querySelector('#billing_postcode').addEventListener('blur', function(){
var cep = this.value
var query = `https://viacep.com.br/ws/${cep}/json/`
fetch(query).then(res => {
if(res.status === 200){
var response = res.json()
response.then(address => {
document.querySelector('#billing_neighborhood').value = address.bairro
document.querySelector('#billing_city').value = address.localidade
document.querySelector('#billing_address_1').value = address.logradouro
document.querySelector('#billing_state').value = address.uf
var ufData = states.filter( state => state.uf == address.uf)
console.log( 'uf data', ufData)
document.querySelector( '#select2-billing_state-container' ).innerText = ufData[0].name
})
}
}).catch(err => {
document.querySelector( '#billing_neighborhood' ).setAttribute( 'readonly', false )
document.querySelector( '#billing_city' ).setAttribute( 'readonly', false )
document.querySelector( '#billing_address_1' ).setAttribute( 'readonly', false )
document.querySelector( '#billing_state' ).setAttribute( 'readonly', false )
})
})
}
</script>
</body>
</html>
<< Anterior Como instalar uma notificação de venda ao vivo real ou fake para sua loja virtual
Deixe um comentário