El widget de validación de entrega aparece en cada página de su tienda y les pide a los clientes que validen su código postal antes de la página del carrito.

El widget de validación de entrega funciona con todos los métodos de validación de entrega.

Habilitar el widget de validación de entrega

Dentro de la aplicación Zapiet ‑ Recogida + Entrega, haz clic en Ajustes y luego en Entrega local.
Busca la sección Widget de validación de entrega y haz clic en Habilitar.
Haz clic en Guardar.

El widget de validación de entrega ahora aparecerá en la parte superior de la pantalla en tu tienda en línea.

¿Como funciona?

Validación de código postal

Si utilizas métodos de validación de coincidencia de códigos postales exactos o parciales, tus clientes deberán ingresar sus códigos postales.

Cuando un cliente ingrese un código postal válido, recibirá el mensaje: "¡Excelente, hacemos entregas en su área!"

Cuando un cliente ingresa un código postal no elegible, recibirá el mensaje: "Lo sentimos, no realizamos entregas en su área".

Validación de dirección

Si utilizas métodos de validación de entrega de radio máximo o distancia máxima de conducción, tus clientes deberán ingresar su dirección.

Si tienes habilitada la configuración Habilitar auto-completado de direcciones en Zapiet - Recogida + Entrega > Entrega local > Validación de entrega, tus clientes podrán seleccionar su dirección en el menú desplegable.

Cuando un cliente ingresa una dirección válida, recibirá el mensaje: "Excelente, realizamos entregas en tu área".

Cuando un cliente ingresa una dirección no elegible, recibirá el mensaje: "Lo sentimos, no realizamos entregas en su área".

Personaliza la redacción

Puedes personalizar la redacción en el widget a su gusto.

Dentro de la aplicación Zapiet ‑ Recogida + Entrega, haz clic en Ajustes y luego en Texto y diseño.
Busca el widget Entrega local y haz clic en Mostrar.
Busca los campos de "validator" y edítalos según corresponda.
- Si utilizas métodos de validación de entrega de radio máximo o distancia máxima de conducción, cambia el código postal a dirección.
Puedes cambiar el enlace que redirige a los clientes en función de su elegibilidad de entrega.
Una vez realizados los cambios, haz clic en Guardar.

Los cambios se aplicarán inmediatamente al widget del validador de entrega.

Si has editado el enlace, el botón Seguir comprando redirigirá a tus clientes a otra página dentro de la tienda.

Personaliza los colores

El widget del validador de entrega está creado con HTML, CSS y un poco de JavaScript. Esto significa que puedes modificar los colores de todos los elementos con CSS.

Continúe con los pasos, si está utilizando Zapiet - Widget de recogida y entrega versión 1 o 2. Eche un vistazo a nuestra guía ¿Qué versión del widget estoy usando?.

Si tienes una versión heredada, comuníquese con nosotros en [email protected] y estaremos encantados de instalar la actualización por usted.

Agrega el CSS en Zapiet - Recogida + Entrega > Configuración > Desarrolladores > Estilos personalizados.

Cambiar el color del botón principal

Puedes cambiar el color del botón "Ir".

Por ejemplo, este código hará que el fondo del botón sea amarillo y el color de la fuente gris oscuro.

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

Cambiar el color de fondo de la barra superior

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

Cambiar el color del botón de cerrar

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

Cambiar el color del preludio

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

Al combinar los códigos anteriores, podrás crear una versión ligera del widget como se muestra a continuación.

Personaliza el validador de entrega

Si nuestro widget no es adecuado para tu caso de uso, puede usar una serie de funciones para escribir tu propio validador de entrega.

No ofrecemos implementaciones personalizadas del widget de validación de entrega. Recomendamos contratar a un Shopify Expert para que haga las personalizaciones por ti.

Puedes utilizar todos los métodos de validación de entrega con un widget de validación personalizado. Si decides utilizar el radio máximo o la distancia máxima de conducción, deberás crear manualmente el auto-completado de direcciones de Google.

Ejemplo de widget de validación personalizado

A continuación se muestra un ejemplo de cómo puedes usar la API para crear tu propio widget de validación 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;

// Checks to ensure Store Pickup + Delivery is installed correctly.
if (typeof window.Zapiet === 'undefined' || typeof window.ZapietCachedSettings === 'undefined' || 
typeof window.Zapiet.DeliveryValidator === 'undefined' || window.ZapietCachedSettings.cached_config === 'undefined' || 
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.checkEligiblity(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 disponible aquí:

Gist

API de validación 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 de 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