O widget de validação de entrega aparece em todas as páginas da sua loja e solicita que os clientes validem seu código postal ou endereço antes da página do carrinho.

O widget de validação de entrega funciona com todos os métodos de validação de entrega.

Ativar o widget de validação de entrega

Clique em Configurações, depois em Entrega Local.
Na seção Widget de validação de entrega, selecione o tema no qual deseja instalar o widget e clique em Visualizar no tema.
Isso abrirá as configurações de personalização do seu tema e ativará nosso widget de validação de entrega nesse tema.
Clique em Salvar.

O widget de validação de entrega agora aparecerá no topo da tela em sua loja online.

Como funciona?

Validação de código postal

Se estiver usando métodos de validação de código postal exato ou parcial, seus clientes precisarão inserir seus códigos postais.

Quando um cliente insere um código postal válido, ele verá a mensagem “Ótimo, entregamos na sua área”.

Quando um cliente insere um código postal não elegível, verá a mensagem “Desculpe, não entregamos na sua área”.

Validação de endereço

Se estiver usando métodos de validação de raio máximo ou distância máxima de condução, seus clientes precisarão inserir seu endereço.

Se a configuração Ativar autocompletar endereço estiver habilitada em Entrega Local > Validação de entrega, seus clientes poderão selecionar seu endereço no menu suspenso.

Quando um cliente insere um endereço válido, verá a mensagem “Ótimo, entregamos na sua área”.

Quando um cliente insere um endereço não elegível, verá a mensagem “Desculpe, não entregamos na sua área”.

Personalizar os textos

Você pode personalizar os textos no widget dependendo do método de validação de entrega que estiver usando.

Clique em Configurações, depois em Texto e design.
Clique em Mostrar ao lado de Widget de entrega.
Procure pelos campos de validação de entrega e edite-os conforme necessário.
- Se estiver usando os métodos de raio máximo ou distância máxima de condução, altere código postal para endereço.
Você pode alterar o link que redireciona os clientes com base na elegibilidade para entrega.
Depois de fazer as alterações, clique em Salvar.

As mudanças serão aplicadas imediatamente no widget de validação de entrega.

Se você editou o link, o botão Continuar comprando redirecionará seus clientes para outra página dentro da loja.

Personalizar as cores

O widget de validação de entrega é construído usando HTML, CSS e um pouco de JavaScript. Isso significa que você pode modificar as cores de todos os elementos com CSS.

Siga os passos se estiver usando a versão 1 ou 2 do widget Zapiet - Entrega e Recolhas. Veja nosso artigo Qual versão do widget estou usando?.

Se você estiver usando uma versão legada, entre em contato conosco em [email protected], e teremos prazer em instalar a atualização para você!

Adicione o CSS em Zapiet - Entrega e Recolhas > Configurações > Desenvolvedores > Estilos personalizados.

Alterar a cor do botão principal

Você pode mudar a cor do botão "Ir".

Por exemplo, este código fará o fundo do botão ficar verde e a cor da fonte cinza escuro:

.zapiet-delivery-validator__submit {
background: #00A29B !important; 
color: #383838 !important;
}

Alterar a cor de fundo da barra superior

#zapiet-delivery-validator__topbar {
background: #EAE8EB !important; 
}

Alterar a cor do botão de fechar

.zapiet-delivery-validator__close svg {
fill: #888888 !important; 
}

Alterar a cor do preâmbulo

#zapiet-delivery-validator__label {
color: #333 !important; 
}

Combinando o código acima, você pode criar uma versão clara do widget, como mostrado abaixo.

Personalizar o widget de validação de entrega

Se nosso widget não for adequado para o seu caso de uso, você pode usar várias funções para escrever seu próprio validador de entrega.

Não oferecemos implementações personalizadas do widget de validação de entrega. Recomendamos contratar um especialista da Shopify para fazer as personalizações para você.

Você pode usar todos os métodos de validação de entrega com um widget de validador personalizado. Se decidir usar raio máximo ou distância máxima de condução, será necessário configurar manualmente o autocompletar de endereço do Google.

Exemplo de widget de validação personalizado

Aqui está um exemplo de como você pode usar a API para criar seu próprio widget de validação personalizado.

<form onsubmit="validateZipCode(); return false;">
<input type="text" id="zipcode" placeholder="Enter zipcode here ..." />
<input type="submit" value="Go" />
</form>

<script type="text/javascript">
function validateZipCode(e) { 
const zipcode = document.getElementById('zipcode').value;

if (
typeof window.Zapiet === 'undefined' ||
typeof window.ZapietCachedSettings === 'undefined' ||
typeof window.Zapiet.DeliveryValidator === 'undefined' ||
typeof window.ZapietCachedSettings.cached_config === 'undefined' || 
typeof window.ZapietCachedSettings.cached_config.delivery_validator === 'undefined'
) {
console.warn('Zapiet - Custom delivery validator error. Please ensure you have Store Pickup + Delivery correctly installed. Contact [email protected] for assistance.'); 
return false;
}

Zapiet.DeliveryValidator.checkEligibility(zipcode, function(response) {
// Eligible callback
Zapiet.DeliveryValidator.eligibleForDelivery(response);
}, function() {
// Not eligible callback
Zapiet.DeliveryValidator.notEligibleForDelivery();
}, function() {
// Error callback
Zapiet.DeliveryValidator.error();
});

return false;
}
</script>

Gist disponível aqui:

Gist

API do Validador de Entrega

Zapiet.DeliveryValidator.checkEligiblity(postal_code, eligible_callback, not_eligible_callback, error_callback);

Zapiet.DeliveryValidator.updateModalContent(heading, content, button_label);

Zapiet.DeliveryValidator.showTopBar();

Zapiet.DeliveryValidator.hideTopBar();

Zapiet.DeliveryValidator.showModal();

Zapiet.DeliveryValidator.hideModal();

Eventos JavaScript

delivery.validator_widget.top_bar.opened
delivery.validator_widget.top_bar.closed
delivery.validator_widget.modal.opened
delivery.validator_widget.modal.closed
delivery.validator_widget.modal.content_updated
delivery.validator_widget.eligible
delivery.validator_widget.not_eligible
delivery.validator_widget.error

Desativar o widget de validação de entrega

Se você não precisar mais do widget de validação de entrega em determinado tema ou apenas quiser removê-lo, pode desativá-lo no tema.

Clique em Configurações, depois em Entrega Local.
Na seção Widget de validação de entrega, selecione o tema no qual deseja desativar o widget e clique em Visualizar no tema.
Isso abrirá as configurações de personalização do seu tema.
Clique no ícone de lixeira ao lado do widget de validação de entrega.
Clique em Salvar.

Nosso widget de validação de entrega não deverá mais aparecer nesse tema.