Le widget validateur de livraison apparaît sur chaque page de votre boutique, et demande aux clients de valider leur code postal avant la page du panier.

Le widget de validation de livraison fonctionne avec toutes les méthodes de validation de livraison.

Activer le widget validateur de livraison

Cliquez sur Paramètres, puis sur Livraison locale.
Recherchez la section Widget validateur de livraison et cliquez sur Activer.
Cliquez sur Enregistrer.

Le widget validateur de livraison apparaîtra désormais en haut de l'écran de votre boutique en ligne.

Comment ça fonctionne ?

Validation du code postal

Si vous utilisez des méthodes de validation de correspondance exacte ou partielle du code postal, vos clients devront saisir leur code postal.

Lorsqu'un client saisit un code postal valide, il recevra le message "Génial, nous livrons dans votre région".
Lorsqu'un client saisit un code postal non valide, il recevra le message : "Désolé, nous ne livrons pas dans votre région".

Validation d'adresse

Si vous utilisez les méthodes de validation de livraison par rayon maximal ou par distance de conduite maximale, vos clients devront saisir leur adresse.

Si vous avez activé le paramètre Activer l'auto-complétion d'adresse dans Zapiet - Ramassage + Livraison > Livraison locale > Validation de distance, vos clients pourront sélectionner leur adresse dans le menu déroulant.

Lorsqu'un client saisit une adresse valide, il recevra le message "Génial, nous livrons dans votre région".
Lorsqu'un client saisit une adresse non éligible, il recevra le message "Désolé, nous ne livrons pas dans votre région".

Personnalisez le libellé

Vous pouvez personnaliser le libellé du widget à votre guise.

Cliquez sur Paramètres, puis sur Texte et design.
Recherchez le Widget de livraison, puis cliquez sur Afficher.
Recherchez les champs delivery validator et modifiez-les en conséquence.
- Si vous utilisez les méthodes de validation de livraison par rayon maximal ou par distance de conduite maximale, remplacez le terme code postal par adresse.
Vous pouvez modifier le lien qui redirige les clients en fonction de leur éligibilité à la livraison.
Une fois les modifications apportées, cliquez sur Enregistrer.

Les modifications seront immédiatement appliquées au widget validateur de livraison.
Si vous avez modifié le lien, le bouton Continuer vos achats redirigera vos clients vers une autre page du magasin.

Personnalisez les couleurs

Le widget validateur de livraison est construit en utilisant HTML, CSS et un peu de JavaScript. Cela signifie que vous pouvez modifier les couleurs de tous les éléments avec CSS.

Suivez les étapes, si vous utilisez la version 1 ou 2 du widget Zapiet - Ramassage + Livraison . Jetez un œil à notre article Quelle version du widget est-ce que j'utilise ?.

Si vous utilisez une ancienne version, veuillez nous contacter à [email protected] et nous serons heureux d'installer la mise à jour pour vous !

Ajoutez le CSS dans Zapiet - Ramassage + Livraison > Paramètres > Développeurs > Styles personnalisés.

Changer la couleur principale du bouton

Vous pouvez changer la couleur du bouton "Recherche".

Par exemple, ce code rendra l'arrière-plan du bouton vert et la couleur de la police gris foncé.

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

Changer la couleur d'arrière-plan de la barre supérieure

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

Changer la couleur du bouton de fermeture

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

Changer la couleur du prélude

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

En combinant le code ci-dessus, vous pouvez créer une version claire du widget tel que montré ci-dessous.

Personnaliser le validateur de livraison

Si notre widget ne convient pas à votre cas d'utilisation, vous pouvez utiliser un certain nombre de fonctions pour créer votre propre validateur de livraison.

Nous ne proposons pas d'implémentations personnalisées du widget validateur de livraison. Nous vous recommandons de faire appel à un expert Shopify pour effectuer les personnalisations pour vous.

Vous pouvez utiliser toutes les méthodes de validation de livraison avec un widget validateur personnalisé. Si vous décidez d'utiliser un rayon maximal ou une distance de conduite maximale, vous devrez créer manuellement la saisie semi-automatique des adresses Google.

Exemple de widget validateur personnalisé

Vous trouverez ci-dessous un exemple d'utilisation de l'API pour créer votre propre widget validateur personnalisé.

<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 ici :

Gist

API de validation de livraison

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();

Événements 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