Das Zustellungsüberprüfungs-Widget erscheint auf jeder Seite Ihres Shops und fordert die Kunden auf, ihre Postleitzahl oder Adresse vor der Warenkorbseite zu bestätigen.
Das Zustellungsüberprüfungs-Widget funktioniert mit jeder Zustellüberprüfungs-Methode.
Widget für Zustellungsüberprüfung aktivieren
Klicken Sie in Zapiet – Abholung + Zustellung auf Einstellungen und dann auf Lokale Zustellung.
Klicken Sie im Abschnitt „Zustellungsüberprüfungs-Widget“ auf Aktivieren.
Klicken Sie auf Speichern.
Das Zustellungsüberprüfungs-Widget erscheint nun in Ihrem Online-Shop am oberen Rand des Bildschirms.
Wie funktioniert es?
Überprüfung nach Postleitzahl
Wenn Sie die Überprüfungsmethoden mit der exakten oder teilweisen PLZ-Übereinstimmung verwenden, müssen Ihre Kunden ihre Postleitzahl eingeben.
Wenn ein Kunde eine gültige Postleitzahl eingibt, erhält er die Meldung „Super, wir liefern in Ihr Gebiet“.
Wenn ein Kunde eine nicht zulässige Postleitzahl eingibt, erhält er die Meldung „Leider liefern wir nicht in Ihr Gebiet“.
Überprüfung nach Adresse
Wenn Sie die Überprüfungsmethoden mit maximalem Radius oder maximaler Fahrstrecke verwenden, müssen Ihre Kunden ihre Adresse eingeben.
Wenn Sie in Zapiet – Abholung + Zustellung > Lokale Zustellung > Zustellüberprüfung die Automatische Adressvervollständigung aktiviert haben, können Ihre Kunden ihre Adresse aus dem Dropdown-Menü auswählen.
Wenn ein Kunde eine gültige Adresse eingibt, erhält er die Meldung „Super, wir liefern in Ihr Gebiet“.
Wenn ein Kunde eine nicht zulässige Adresse eingibt, erhält er die Meldung „Wir liefern leider nicht in Ihr Gebiet“.
Wortlaut anpassen
Sie können den Wortlaut im Widget anpassen, je nachdem, welche Zustellüberprüfung-Methode Sie verwenden.
Klicken Sie in Zapiet – Abholung + Zustellung auf Einstellungen und dann auf Text und Design.
Klicken Sie neben dem Zustellungswidget auf Einblenden.
Suchen Sie nach den Feldern für die Zustellüberprüfung und bearbeiten Sie sie entsprechend.
Wenn Sie die Zustellüberprüfung-Methoden „Maximaler Radius“ oder „Maximale Fahrstrecke“ verwenden, ändern Sie "Postleitzahl" in "Adresse".
Sie können den Link ändern, über den Kunden je nach ihrer Zustellungszulässigkeit weitergeleitet werden.
Sobald die Änderungen vorgenommen wurden, klicken Sie auf Speichern.
Die Änderungen werden sofort in das Widget für die Zustellungsprüfung übernommen.
Wenn Sie den Link bearbeitet haben, wird die Schaltfläche "Weiter einkaufen" Ihre Kunden auf eine andere Seite innerhalb des Shops umleiten.
Farben anpassen
Das Zustellüberprüfung-Widget ist mit HTML, CSS und ein wenig JavaScript erstellt. Das bedeutet, dass Sie die Farben aller Elemente mit CSS ändern können.
Fahren Sie mit den Schritten fort, wenn Sie die Version 1 oder 2 des Widgets von Zapiet – Abholung + Zustellung verwenden. Schauen Sie sich unseren Artikel „Welche Version des Widgets verwende ich?“ an.
Wenn Sie eine ältere Version verwenden, wenden Sie sich bitte an [email protected]. Wir installieren das Update gerne für Sie!
Fügen Sie das CSS in Zapiet – Abholung + Zustellung > Einstellungen > Entwickler > Benutzerdefinierte Stile hinzu.
Farbe primärer Schaltfläche ändern
Sie können die Farbe der Schaltfläche „Los“ ändern.
Dieser Code macht beispielsweise den Hintergrund der Schaltfläche grün und die Schriftfarbe dunkelgrau.
.zapiet-delivery-validator__submit {
background: #00A29B !important;
color: #383838 !important;
}
Hintergrundfarbe oberer Leiste ändern
#zapiet-delivery-validator__topbar {
background: #EAE8EB !important;
}
Farbe der Schließen-Schaltfläche ändern
.zapiet-delivery-validator__close svg {
fill: #888888 !important;
}
Farbe der Beschriftung ändern
#zapiet-delivery-validator__label {
color: #333 !important;
}Durch die Kombination des obigen Codes können Sie eine helle Version des Widgets erstellen, wie unten gezeigt.
Passen Sie das Zustellungsüberprüfungs-Widget an
Sollte unser Widget für Ihren Anwendungsfall nicht geeignet sein, können Sie mit einer Reihe von Funktionen Ihr eigenes Zustellungsüberprüfungs-Widget programmieren.
Wir bieten keine benutzerdefinierten Implementierungen des Zustellungsüberprüfungs-Widgets an. Wir empfehlen, einen Shopify-Experten zu beauftragen, die Anpassungen für Sie vorzunehmen.
Sie können alle Zustellungsüberprüfungs-Methoden mit einem benutzerdefinierten Überprüfungswidget verwenden. Wenn Sie sich für die Verwendung des maximalen Radius oder der maximalen Fahrstrecke entscheiden, müssen Sie die automatische Vervollständigung von Google-Adressen manuell erstellen.
Beispiel für ein benutzerdefiniertes Zustellungsüberprüfungs-Widget
Nachfolgend finden Sie ein Beispiel dafür, wie Sie mit der API Ihr eigenes benutzerdefiniertes Zustellungsüberprüfungs-Widget programmieren können.
<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 finden Sie hier:
Zustellüberprüfung-API
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();
JavaScript-Ereignisse
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