Vou compartilhar como eu resolvi esse problema na minha loja após a virada do checkout extensibility.
Usamos Mercado Pago Cartões, Mercado pago Anti fraude e Mercado Pago Pix.
Usamos checkout de uma página.
Usamos o Tiny.
Só vou usar essa solução de maneira paliativa até o shopify e/ou Tiny resolver isso nativamente. Enquanto isso, vamos ficar atentos porque essa solução não é perfeita, pode ser que não funcione em 100% dos casos (por enquanto aqui está funcionando certinho sem problemas).
Intro (falando sobre outros apps, feel free to skip)
Eu sei que tem o app Jataí gratuito, mas eu testei e ele ainda não está 100%. Me parece que ele usa o CEP e consulta alguma base de terceiros para trazer a Rua e o Bairro, mas eu tive alguns casos de erros (e.g., nome da rua era João, e o app retornou Maria), e são erros muito difíceis de pegar a não ser que você verifique pedido a pedido. Além disso o campo complemento vem com complemento + bairro… Talvez em breve o app esteja ótimo e eu agradeço os devs que ofereceram ele gratuitamente.
Já o outro app Checkout ampliado eu não experimentei, mas é pago então quis evitar.
Isso tudo dito…
Passo 0: Isenção de responsabilidade
Isso é o que eu fiz pra minha loja. Pode ser que sua loja exploda e você perca tudo e fique pobre se você apertar os botões errados. Aliás eu recomendo que você nem use essa solução. Melhor aguardar o Shopify resolver.
Passo 1: App Mechanic
Não tenho nenhuma afiliação com esse app. Inclusive eles nem cobram nada, você que escolhe o quanto quer pagar. Você pode começar experimentando pra ver se funciona essa solução pra você. Depois disso, o mínimo sugerido é US$16/mês. Eu pago US$29 porque uso muita coisa dele.
https://apps.shopify.com/mechanic?locale=pt-BR
Passo 2: Separar campo único de endereço em três campos para Rua, Número e Bairro.
Entre em contato com o suporte do shopify via chat e peça para eles fazerem isso aqui:
https://help.shopify.com/pt-BR/en/manual/international/shipping/international-considerations#additional-address
Isto é, adicionar o campo de número e campo de bairro. Peça para deixarem o campo rua, número e bairro como mandatory, e o campo complemento como optional.
Se você ler a documentação para desenvolvedores, vai ver que o que acontece quando esses dois campos são adicionados é o seguinte:
- O formulário de checkout fica com os 4 campos separados: Rua, Número, Complemento, Bairro
- Quando o cliente coloca o pedido, o Shopify junta novamente Rua e número e joga na primeira linha do endereço, e junto complemento e bairro na segunda linha do endereço, isto é:
- address1 = “Rua, número”
- address2 = “Complemento, bairro”
Passo 2.1: Mudar os labels
Sabe no fundo do campo que está escrito “Endereço”? Aquilo vai confundir os clientes. Então o que eu fiz foi ir em Canais de vendas > Loja Virtual > Temas > “…” no seu tema atual > Editar conteúdo do tema-padrão. Depois disso, ali em filtrar itens pesquise por “Endereço” e ali onde tem “Street name label” mude para “Rua”. Salve e teste o seu checkout para ver se está funcionando.
Passo 3: criar automação no Mechanic
Já faz tempo que eu instalei o mechanic, então não sei se tem algum setup inicial. Se tiver, boa sorte com isso.
Mas, entre no app, e vá em Add task, e depois New Blank Task.
Em task name, coloque algo como “Arrumador de campos de endereço para padrão brasileiro”
Em subscriptions, coloque:
mechanic/user/order
Em code, coloque:
{% assign parts1 = order.shipping_address.address1 | split: "" %}
{% assign streetName = parts1[0] | remove_last: ", " | strip %}
{% assign streetNumber = parts1[1] | strip %}
{% assign parts2 = order.shipping_address.address2 | split: "" %}
{% assign complement = parts2[0] | remove_last: ", " | strip %}
{% assign neighborhood = parts2[1] | strip %}
{% assign parts3 = order.billing_address.address1 | split: "" %}
{% assign billingStreetName = parts3[0] | remove_last: ", " | strip %}
{% assign billingStreetNumber = parts3[1] | strip %}
{% assign parts4 = order.billing_address.address2 | split: "" %}
{% assign billingComplement = parts4[0] | remove_last: ", " | strip %}
{% assign billingNeighborhood = parts4[1] | strip %}
{% assign attributes = array %}
{% assign attributes[0] = hash %}
{% assign attributes[1] = hash %}
{% assign attributes[2] = hash %}
{% assign attributes[3] = hash %}
{% assign attributes[4] = hash %}
{% assign attributes[5] = hash %}
{% assign attributes[6] = hash %}
{% assign attributes[7] = hash %}
{% assign attributes[0]["key"] = "aditional_info_extra_endereco" %}
{% assign attributes[0]["value"] = streetName %}
{% assign attributes[1]["key"] = "aditional_info_extra_numero" %}
{% assign attributes[1]["value"] = streetNumber %}
{% assign attributes[2]["key"] = "aditional_info_extra_complemento" %}
{% assign attributes[2]["value"] = complement %}
{% assign attributes[3]["key"] = "aditional_info_extra_bairro" %}
{% assign attributes[3]["value"] = neighborhood %}
{% assign attributes[4]["key"] = "aditional_info_extra_billing_address_endereco" %}
{% assign attributes[4]["value"] = billingStreetName %}
{% assign attributes[5]["key"] = "aditional_info_extra__billing_address_number" %}
{% assign attributes[5]["value"] = billingStreetNumber %}
{% assign attributes[6]["key"] = "aditional_info_extra__billing_address_complemento" %}
{% assign attributes[6]["value"] = billingComplement %}
{% assign attributes[7]["key"] = "aditional_info_extra_billing_address_bairro" %}
{% assign attributes[7]["value"] = billingNeighborhood %}
{% action "shopify" %}
mutation {
orderUpdate(
input: {
id: {{ order.admin_graphql_api_id | json }}
customAttributes: {{ attributes | graphql_arguments }}
}
) {
order {
customAttributes {
key
value
}
}
userErrors {
field
message
}
}
}
{% endaction %}
Vou explicar em linhas gerais o que esse código faz:
- Pega o address1 do pedido e quebra em 2 variáveis, streetName e streetNumber
- Pega o address2 do pedido e quebra em 2 variáveis, complement e neighborhood
- Faz os passos 1 e 2 acima para o address1 e address2 de faturamento (billing)
- Joga essas informações numa variável chamada “attributes”, que contém os pares de note attributes que são inteligíveis pelo seu ERP. No meu caso, uso Tiny, que por exemplo entende um note attribute com key “aditional_info_extra_endereco” como sendo o campo “Rua” do endereço de envio. Lendo o código você consegue ver os outros campos que o Tiny usa. Eu sei que additional se escreve com dois d’s, mas o nome certo para o Tiny é com 1 d mesmo. Não me pergunte por que a turma do tiny usa 1 d só (se não me engano é culpa do PagSeguro… mas fica pra outra hora).
- Por fim a action “shopify” faz a mutação no pedido que apaga todos os note attributes do pedido e coloca essas novas.
Atenção: esse código vai apagar todas as note attributes do seu pedido e substituirá com essas novas. Preciso repetir? Se você usa note attributes de outra forma isso vai quebrar o seu fluxo de trabalho e a culpa vai ser sua que não deu atenção a este amigável aviso. E não, não tem backup. Se você não sabe de precisa ou não de note attributes, ou não sabe o que é isso, desista agora de implementar essa solução. Pode ser que algum app seu use e você nem saiba.
Habilite o código marcando o enable (do lado do task name).
Agora você vai testar se está funcionando.
Passo 4: Testar em um pedido
No shopify, vá em pedidos e escolha algum que já tenha entrado com o seu novo formulário de 4 campos. Não adianta você ir lá e criar um pedido teste via admin (a não ser que você saiba o que é wordjoiner e esteja disposto a criar o teste com ele do jeito que está explicado no passo 2). Faz um pedido via site, no seu novo formulario de checkout, ou deixa entrar um pedido de verdade.
Depois disso, vai no pedido, clique em Mais ações > Send to mechanic.
Na próxima página, selecione “Process with individual mode”, selecione a task que você criou, e clique em Run task with individual orders.
Are you sure? Vai apagar todos os seus note attributes desse pedido. Na dúvida abandone esse tutorial. Mas se isso não for um problema pra você, clique em “Run with individual orders”.
Volte novamente no pedido no shopify e veja se os note attributes foram criados corretamente. Os note attributes aparecem logo abaixo do campo de observações do pedido.
Se estiver tudo certo, vamos ligar a automação para que isso aconteça sozinho sempre que um novo pedido for criado.
Passo 5: Automatizar
Vá para o Mechanic, na task que você criou, ali em subscriptions, e adicione a seguinte linha (não precisa apagar o que já está aí):
shopify/orders/create
Salve e monitore os próximos pedidos para ter certeza de que está funcionando como deveria
Passo 6: Configurar o Tiny para que leia os note attributes
No Tiny, vá em Menu > Início > Integrações
Clique no Shopify
Na aba Pedidos > Fluxo de pedidos, desmarque o interpretador de endereços não estruturados
Na aba Outros > Configurações adicionais, marque “utilizar o endereço informado no note_attributes”
Importe no Tiny um pedido em que o Mechanic tenha atuado, e veja se os campos de endereços estão corretos.
