Sie können verschiedene Codeausschnitte verwenden, um bestimmte Zustellzeitfenster auszublenden oder anzuzeigen, nachdem Sie Zustellzeitfenster konfiguriert haben.

Fahren Sie nur fort, wenn Sie den Code selbst bearbeiten können. Bitte kontaktieren Sie uns im Chat, wir setzen dies gerne für Sie um.

Widget-Versionen 1 und 2

Diese Schritte gelten nur für die Version 1 oder 2 unseres Widgets von Zapiet – Abholung + Zustellung. Welche Version des Widgets verwende ich?

Wenn Sie eine ältere Version verwenden, kontaktieren Sie uns bitte im Chat. Wir aktualisieren das Widget dann gerne für Sie auf die neueste Version!

Sie müssen den Code in Zapiet – Abholung + Zustellung > Entwickler unter Benutzerdefinierte Skripte hinzufügen.

Zustellzeitfenster für alle Tage und alle Standorte ausblenden

Ändern Sie die Zeitwerte auf die Werte, die Sie deaktivieren möchten.

Der Beispielcode deaktiviert die Zeiten 14:00 Uhr und 15:00 Uhr.

window.ZapietEvent.listen('delivery.timepicker.opened', function() {
    var pickerList = document.getElementsByClassName("picker__list")[0];
    var timeLabels = ["2:00 PM", "3:00 PM"];

    if (!pickerList) {
        return;
    }

    for (var i = 0; i < pickerList.children.length; i++) {
        var timeOption = pickerList.children[i];
        var ariaLabel = timeOption.getAttribute("aria-label");

        if (timeLabels.includes(ariaLabel)) {
            timeOption.style.display = "none";
        }
    }
});

Wenn Sie unsere 24-Stunden-Uhr verwenden, sollte Ihr Code so aussehen:

window.ZapietEvent.listen("delivery.timepicker.opened", function () {
    var pickerList = document.getElementsByClassName("picker__list")[0];
    var timeLabels = ["14:00", "15:00"];

    if (!pickerList) {
       return;
  }

    for (var i = 0; i < pickerList.children.length; i++) {
        var timeOption = pickerList.children[i];
        var ariaLabel = timeOption.getAttribute("aria-label");
   
        if (timeLabels.includes(ariaLabel)) {
            timeOption.style.display = "none";
      }
  }
});

Zustellzeitfenster für bestimmte Produkte nach Tag ausblenden

Anforderungen:

Sie müssen das Warenkorbseite-Widget verwenden (diese Option funktioniert nicht zuverlässig im Einschub-Warenkorb).

Ändern Sie die Zeitwerte auf die Werte, die Sie deaktivieren möchten.

Der folgende Beispielcode deaktiviert die Zeiten 14:00 Uhr und 15:00 Uhr.

Wenn Sie unsere 24-Stunden-Uhr verwenden, verwenden Sie „14:00“ statt "2:00 PM".

Wenn Sie ein anderes Tag (anstelle von „Test“) verwenden möchten, können Sie es unten ändern und Ihre Produkte dann entsprechend markieren.

function productHasTag(product, tag) {
  var tags = product.tags;
  for (var i = 0; i < tags.length; i++) {
    if (tags[i] == tag) {
      return true;
    }
  }
  return false;
}
function cartHasTag(tag) {
  var products = ZapietWidgetConfig.products;
  for (let i = 0; i < products.length; i++) {
    if (productHasTag(products[i], tag)) {
      return true;
    }
  }
  return false;
}
if (cartHasTag("Test")) {
  window.ZapietEvent.listen("delivery.timepicker.opened", function () {
    var pickerList = document.getElementsByClassName("picker__list")[0];
    var timeLabels = ["2:00 PM", "3:00 PM"];
    if (!pickerList) {
      return;
    }
    for (var i = 0; i < pickerList.children.length; i++) {
      var timeOption = pickerList.children[i];
      var ariaLabel = timeOption.getAttribute("aria-label");
      if (timeLabels.includes(ariaLabel)) {
        timeOption.style.display = "none";
      }
    }
  });
}

Zustellzeitfenster nach Standort ein-/ausblenden

Dieser Code kann verwendet werden, um einen bestimmten Standort gezielt anzusprechen. Sie müssen die ZapietOutletId („123456“) ändern, damit sie mit der Standort-ID übereinstimmt, auf die Sie abzielen.

Die Standort-ID finden Sie in Zapiet – Abholung + Zustellung > Standorte > [Standortname], wenn Sie zum Ende der Seite scrollen.

Sie können die Zeitwerte so ändern, wie Sie sie aktivieren/deaktivieren möchten. Die Werte unterscheiden sich je nach Art der verwendeten Uhr (12-Stunden- oder 24-Stunden-Uhr). Wenn Sie unser 24-Stunden-Format nutzen, ersetzen Sie „2:00 PM“ durch „14:00“.

window.ZapietOutletId = '123456';

window.ZapietEvent.listen('locationSelected', function(payload) {
    if (payload.method == "delivery") {
        // Store the selected outletId in a global variable
        window.ZapietOutletId = String(payload.location.id);
    }
});

window.ZapietEvent.listen('delivery.timepicker.opened', function() {
    // Specify the exact outletId number to enable the specific times on
    if (window.ZapietOutletId === '123456') {
        var pickerList = document.querySelector(".picker__list");
        
        if (pickerList) {
            // Hides all delivery times
            var timeOptions = pickerList.querySelectorAll("[aria-label]");
            timeOptions.forEach(function(timeOption) {
                timeOption.style.display = "none";
            });
            
            // Enable both 10:00 AM and 4:00 PM
            var timeToShow = ["10:00 AM", "4:00 PM"];
            timeToShow.forEach(function(time) {
                var specificTimeOption = pickerList.querySelector("[aria-label='" + time + "']");
                if (specificTimeOption) {
                    specificTimeOption.style.display = "block";
                }
            });
        }
    }
});

Zustellzeitfenster für ein bestimmtes Datum ausblenden

Sie können den Code bearbeiten, um das gewünschte Datum auszublenden. Wenn Sie eine einstellige Zahl verwenden, fügen Sie davor eine 0 hinzu (z. B. „Di, 01. März“).

Wenn Sie eine andere Sprache als Englisch verwenden, müssen Sie den Tag und Monat, auf den Sie abzielen, übersetzen. Wenn Sie beispielsweise Deutsch verwenden, sollte „Sat, 24. Dezember“ „Sa, 24. Dezember“ lauten.

window.ZapietEvent.listen("delivery.timepicker.opened", function () {
  var dateButton = document.querySelector("[aria-label^='Fri, 22 December']");
  var isDateSelected =
    dateButton && dateButton.getAttribute("aria-selected") == "true";
  var pickerList = document.querySelector(".picker__list");
  if (isDateSelected) {
    hideTimeLabel(pickerList, "2:00 PM");
    hideTimeLabel(pickerList, "3:00 PM");
  } else {
    showTimeLabel(pickerList, "2:00 PM");
    showTimeLabel(pickerList, "3:00 PM");
  }
});
function hideTimeLabel(parentElement, timeLabel) {
  if (parentElement) {
    var timeOption = parentElement.querySelector(
      "[aria-label='" + timeLabel + "']",
    );
    if (timeOption) {
      timeOption.style.display = "none";
    }
  }
}
function showTimeLabel(parentElement, timeLabel) {
  if (parentElement) {
    var timeOption = parentElement.querySelector(
      "[aria-label='" + timeLabel + "']",
    );
    if (timeOption) {
      timeOption.style.display = "block";
    }
  }
}

Zustellzeitfenster für bestimmte Daten und einen bestimmten Ort ausblenden

Wenn Sie auf mehrere Daten oder einen bestimmten Standort abzielen möchten, verwenden Sie den folgenden Code. Sie können den Code bearbeiten, um die benötigten Daten auszublenden. Wenn Sie eine einstellige Zahl verwenden, fügen Sie davor eine 0 hinzu (z. B. „Di, 01. März“).

Sie müssen die ZapietOutletId („12345“) ändern, damit sie mit der Standort-ID übereinstimmt, auf die Sie abzielen. Die Standort-ID finden Sie in Zapiet – Abholung + Zustellung > Standorte > [Standortname], wenn Sie zum Ende der Seite scrollen.

Wenn Sie mehrere Datumsangaben verwenden, diese aber auf alle Standorte anwenden möchten, entfernen Sie diese Zeile: var locationId = "123456";

var dates = ["Thu, 09 November", "Fri, 10 November"];
var hours = ["2:00 PM", "3:00 PM"];
var locationId = "123456";
window.ZapietOutletId = "";
if (typeof locationId != "undefined") {
  window.ZapietEvent.listen("locationSelected", function (payload) {
    if (payload.method == "delivery") {
      window.ZapietOutletId = String(payload.location.id);
    }
  });
}
window.ZapietEvent.listen("delivery.timepicker.opened", function () {
  var selectedDate = document
    .querySelector('.picker__day[aria-selected="true"]')
    .getAttribute("aria-label");
  var pickerList = document.querySelector(".picker__list");
  var hourSelectorQuery = hours
    .map(function (hour) {
      return '[aria-label^="' + hour + '"]';
    })
    .join(",");
  var isAnyDateSelected = dates.some(function (date) {
    return selectedDate.includes(date);
  });
  var isLocationSelected =
    typeof locationId !== "undefined" && window.ZapietOutletId === locationId;
  var shouldHideHours =
    typeof locationId !== "undefined"
      ? isAnyDateSelected && isLocationSelected
      : isAnyDateSelected;
  if (shouldHideHours) {
    hideHours(pickerList, hourSelectorQuery);
  } else {
    showHours(pickerList, hourSelectorQuery);
  }
});
function hideHours(parentElement, selectorQuery) {
  if (parentElement) {
    var hourOptions = parentElement.querySelectorAll(selectorQuery);
    hourOptions.forEach(function (hourOption) {
      hourOption.style.display = "none";
    });
  }
}
function showHours(parentElement, selectorQuery) {
  if (parentElement) {
    var hourOptions = parentElement.querySelectorAll(selectorQuery);
    hourOptions.forEach(function (hourOption) {
      hourOption.style.display = "block";
    });
  }
}

Unterschiedliche Zustellzeitfenster für Wochentage und Wochenenden aus

Wenn Sie bestimmte Zustellzeitfenster an Wochentagen und verschiedene Zeitfenster am Wochenende ausblenden möchten, verwenden Sie den folgenden Code.

Sie können den Code bearbeiten, um die benötigten Zustellzeitfenster auszublenden. Wenn Sie unsere 24-Stunden-Uhr verwenden, ersetzen Sie „2:00 PM“ durch „14:00“.

Wenn Sie eine andere Sprache als Englisch verwenden, müssen Sie den Wochentag übersetzen. Wenn Sie beispielsweise Deutsch verwenden, sollte „Sat“ in „Sa“ und „Sun“ in „So“ geändert werden. Sie finden Ihre Wochentagsetiketten in Zapiet – Abholung + Zustellung > Einstellungen > Text & Design > Kalender.

window.ZapietEvent.listen('delivery.timepicker.opened', function () {
    var isWeekendSelected = document.querySelectorAll('[aria-label*="Sat,"][aria-selected=true],[aria-label*="Sun,"][aria-selected=true]').length > 0;
    var pickerList = document.querySelector('.picker__list');
    
    if (isWeekendSelected) {
        hideTimeLabels(pickerList, ["3:00 PM", "4:00 PM"]);
    } else {
        hideTimeLabels(pickerList, ["9:00 AM", "10:00 AM"]);
    }
});

function hideTimeLabels(parentElement, timeLabels) {
    if (parentElement) {
        var timeOptions = parentElement.querySelectorAll("[aria-label]");
        timeOptions.forEach(function(timeOption) {
            if (timeLabels.includes(timeOption.getAttribute("aria-label"))) {
                timeOption.style.display = "none";
            }
        });
    }
}

Bestimmte Zustellzeitfenster nach Produkt-Tags ausblenden

Anforderungen:

Sie müssen das Warenkorbseite-Widget verwenden (diese Option funktioniert nicht zuverlässig im Einschub-Warenkorb).

Ändern Sie die Datumswerte in die Werte, die Sie deaktivieren möchten.

Wenn Sie ein anderes Tag (anstelle von „Test“) verwenden möchten, können Sie es unten ändern und Ihre Produkte dann entsprechend kennzeichnen.

function productHasTag(product, tag) {
  var tags = product.tags;
  for (var i = 0; i < tags.length; i++) {
    if (tags[i] == tag) {
      return true;
    }
  }
  return false;
}

function cartHasTag(tag) {
  var products = ZapietWidgetConfig.products;
  for (let i = 0; i < products.length; i++) {
    if (productHasTag(products[i], tag)) {
      return true;
    }
  }
  return false;
}

if (cartHasTag("Test")) {
  window.ZapietEvent.listen("delivery.datepicker.opened", function () {
    window.Zapiet.disableDates(['2024-08-14','2024-08-15','2024-08-16','2024-08-24'])
  });
}

Wie wird es im Widget aussehen?

Die von Ihnen deaktivierten Zeiten werden jetzt im Widget von Zapiet – Abholung + Zustellung ausgeblendet.

Fehlerbehebung

Wenn der Code nicht funktioniert, versuchen Sie, jQuery oben in der Warenkorbdatei hinzuzufügen.
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```

Verwandte Artikel

Checkout-Methoden abhängig vom Kunden-Tag aktivieren

Erzeugen einer _ZapietID