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
Haz clic en Ajustes y luego en Entrega local.
En la sección del Widget de validación de entregas de envíos, haz clic en el tema en el que desees instalar nuestro widget y haz clic en Vista previa en el tema.
Esto abrirá los Ajustes de personalización en tu tema, y habilitará nuestro widget validador de entregas en ese tema.
Haz click en Guardar.
El widget del validador de entregas aparecerá ahora en la parte superior de la pantalla de tu tienda online.
¿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: "¡El código postal esta disponible en su área!"
Cuando un cliente ingresa un código postal no elegible, recibirá el mensaje: "Lo sentimos, no hacemos envíos a 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: "¡Entrega local esta disponible en su área!".
Cuando un cliente ingresa una dirección no elegible, recibirá el mensaje: "Lo sentimos, no hacemos envíos a su área".
Personaliza la redacción
Puedes personalizar la redacción en el widget a su gusto.
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í:
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
Deshabilitar el widget validador de entregas
Si ya no necesitas nuestro widget validador de entregas en un tema determinado, o simplemente quieres eliminarlo, puedes desactivar el widget validador de entregas en tu tema.
Haz clic en Ajustes y luego en Entrega local.
En la sección Widget validador de entrega, haz clic en el tema en el que deseas deshabilitar nuestro widget y haz clic en Vista previa en el tema.
Esto abrirá los Ajustes de personalización en tu tema.
Haz clic en el icono de la papelera situado junto al widget del validador de entregas.
Haz clic en Guardar.
Nuestro widget validador de entregas ya no debería mostrarse en este tema.