Sie können verschiedene Code-Snippets verwenden, um bestimmte Abholzeitfenster auszublenden oder anzuzeigen, nachdem Sie die Abholzeiten konfiguriert haben.

Fahren Sie nur fort, wenn Sie sich mit der Bearbeitung von Code sicher fühlen. Bitte kontaktieren Sie uns im Chat – wir helfen Ihnen gerne bei der Implementierung.

Widget-Versionen 1 und 2

Diese Schritte gelten nur für die Widget-Versionen 1 oder 2 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 gerne auf die neueste Version für Sie!

Der Code muss unter Zapiet – Abholung + Zustellung > Entwickler > Benutzerdefinierte Skripte hinzugefügt werden.

Abholzeiten für alle Tage und Standorte ausblenden

Ändern Sie die Zeitwerte in diejenigen, die Sie deaktivieren möchten.

Das Beispiel deaktiviert die Zeiten 14:00, 14:30, 15:00 und 15:30.

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
    var pickerList = document.getElementsByClassName("picker__list")[0];
    var timeLabels = ["2:00 PM", "2:30 PM", "3:00 PM", "3:30 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 unser 24-Stunden-Format verwenden, sollte Ihr Code wie folgt aussehen:

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

    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";
        }
    }
});

Abholzeiten für bestimmte Produkte nach Tags ausblenden

Anforderungen:

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

Ändern Sie die Zeitwerte in diejenigen, die Sie deaktivieren möchten.

Das Beispiel deaktiviert die Zeiten 14:00, 14:30, 15:00 und 15:30.

Ersetzen Sie beispielsweise „2:00 PM“ durch „14:00“, wenn Sie das 24-Stunden-Format verwenden.

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

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('pickup.timepicker.opened', function() { 
      var pickerList = document.getElementsByClassName("picker__list")[0];
      var timeLabels = ["2:00 PM", "2:30 PM", "3:00 PM", "3:30 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";
          }
      }
   });
}

Abholzeiten für bestimmte Standorte ein- oder ausblenden

Dieser Code kann verwendet werden, um einen bestimmten Standort anzusprechen. Sie müssen die ZapietOutletId('12345') ändern, sodass sie mit der Standort-ID übereinstimmt, die Sie ansprechen möchten.

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

Sie können die Zeitwerte ändern, die Sie aktivieren/deaktivieren möchten – die Werte unterscheiden sich je nach verwendeter Zeitformatierung (12-Stunden- oder 24-Stunden-Format). Wenn Sie unser 24-Stunden-Format verwenden, ersetzen Sie „2:00 PM“ durch „14:00“.

window.ZapietOutletId = '';

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

window.ZapietEvent.listen('pickup.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 pickup times
            var timeOptions = pickerList.querySelectorAll("[aria-label]");
            timeOptions.forEach(function(timeOption) {
                timeOption.style.display = "none";
            });
            
            // Enable both 9:00 AM and 4:00 PM
            var timeToShow = ["9:00 AM", "4:00 PM"];
            timeToShow.forEach(function(time) {
                var specificTimeOption = pickerList.querySelector("[aria-label='" + time + "']");
                if (specificTimeOption) {
                    specificTimeOption.style.display = "block";
                }
            });
        }
    }
});

Abholzeiten für ein bestimmtes Datum ausblenden

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

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
    var dateButton = document.querySelector("[aria-label^='Fri, 30 June']");
    var isDateSelected = dateButton && (dateButton.getAttribute("aria-selected") == "true");
    var pickerList = document.querySelector(".picker__list");
    
    if (isDateSelected) {
        hideTimeLabel(pickerList, "2:00 PM");
        hideTimeLabel(pickerList, "2:30 PM");
        hideTimeLabel(pickerList, "3:00 PM");
        hideTimeLabel(pickerList, "3:30 PM");
    } else {
        showTimeLabel(pickerList, "2:00 PM");
        showTimeLabel(pickerList, "2:30 PM");
        showTimeLabel(pickerList, "3:00 PM");
        showTimeLabel(pickerList, "3:30 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";
        }
    }
}

Abholzeiten für bestimmte Daten und einen bestimmten Standort ausblenden

Wenn Sie weitere Daten oder einen bestimmten Standort ansprechen möchten, verwenden Sie den untenstehenden Code.
Sie können „Di., 21. Dezember“ bearbeiten, um das gewünschte Datum auszublenden. Wenn Sie eine einstellige Zahl verwenden, fügen Sie eine 0 davor hinzu (z. B. „Di., 01. März“).

Sie müssen die ZapietOutletId ('12345') ändern, sodass sie mit der Standort-ID übereinstimmt, die Sie ansprechen möchten. Die Standort-ID finden Sie unter Zapiet – Abholung + Zustellung > Standorte > [Standortname], wenn Sie bis zum unteren Ende der Seite scrollen.

Wenn Sie mehrere Daten verwenden möchten, diese jedoch auf alle Standorte anwenden wollen, entfernen Sie diese Zeile: var locationId = "12345";

var dates = [
    "Wed, 28 June",
    "Thu, 29 June"
];

var hours = [
    "2:00 PM",
    "2:30 PM",
    "3:00 PM",
    "3:30 PM"
];

var locationId = "12345";
window.ZapietOutletId = '';
if (typeof locationId != "undefined") {
window.ZapietEvent.listen('locationSelected', function(payload) {
if (payload.method == "pickup") {
window.ZapietOutletId = String(payload.location.id);
}
});
}

window.ZapietEvent.listen('pickup.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";
        });
    }
}

Abholzeitfenster an verschiedenen Daten mit unterschiedlichen Zeiten ausblenden

Das folgende Beispiel deaktiviert die Zeitfenster 18:00 und 19:00 Uhr am 24. Dezember sowie die Zeitfenster 16:00, 17:00, 18:00 und 19:00 Uhr am 31. Dezember.

Sie können den Code bearbeiten, um die gewünschten Abholzeitfenster auszublenden. Wenn Sie unser 24-Stunden-Format verwenden, ersetzen Sie „2:00 PM“ durch „14:00“.

Wenn Sie eine andere Sprache als Englisch verwenden, müssen Sie den entsprechenden Wochentag und Monat übersetzen. Zum Beispiel sollte im Französischen „Sa., 24. Dezember“ in „Sam, 24 Décembre“ geändert werden. Ihre Wochentagsbezeichnungen finden Sie unter Zapiet – Abholung + Zustellung > Einstellungen > Text & Design > Kalender.

window.ZapietEvent.listen('pickup.timepicker.opened', function() {
    const config = [
        {
            'date': 'Sun, 24 December, 2023',
            'times': [
                '6:00 PM',
                '7:00 PM'
            ],
        }, 
        {
            'date': 'Sun, 31 December, 2023',
            'times': [
                '4:00 PM',
                '5:00 PM',
                '6:00 PM',
                '7:00 PM',
            ]
        }
    ];
    
    const pickerList = document.querySelector(".picker__list");

    for (let i = 0; i < config.length; i++) {
        const settings = config[i];

        const dateButton = document.querySelector("[aria-label^='" + settings.date + "']");
        
        const isDateSelected = dateButton && (dateButton.getAttribute("aria-selected") == "true");

        if (! isDateSelected) {
            continue;
        }

        for (let x = 0; x < settings.times.length; x++) {
            const time = settings.times[x].toUpperCase();
            hideTimeLabel(pickerList, time);
        }
    }
});

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";
        }
    }
}

Unterschiedliche Abholzeitfenster für Wochentage und Wochenenden ausblenden

Wenn Sie bestimmte Abholzeitfenster an Wochentagen und andere Zeitfenster an Wochenenden ausblenden möchten, verwenden Sie den folgenden Code.

Sie können den Code anpassen, um die Abholzeitfenster auszublenden, die Sie benötigen. Wenn Sie das 24-Stunden-Format verwenden, ersetzen Sie „2:00 PM“ durch „14:00“.

Wenn Sie eine andere Sprache als Englisch verwenden, müssen Sie die Wochentage übersetzen. Zum Beispiel sollte „Sat“ in „Sam“ und „Sun“ in „Dim“ geändert werden, wenn Sie Französisch verwenden. Ihre Wochentagsbezeichnungen finden Sie unter Zapiet – Abholung + Zustellung > Einstellungen > Text & Design > Kalender.

window.ZapietEvent.listen('pickup.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 Abholdaten basierend auf Produkttags ausblenden

Anforderungen:

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

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

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

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("pickup.datepicker.opened", function () {
    window.Zapiet.disableDates(['2024-08-14','2024-08-15','2024-08-16','2024-08-24'])
  });
}

Wie sieht es im Widget aus?

Die Zeiten, die Sie deaktiviert haben, werden nun im Zapiet – Abholung + Zustellung-Widget ausgeblendet.

Fehlerbehebung

Falls der Code nicht funktioniert, versuchen Sie, jQuery oben in die 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

Checkout-Methoden nach Produkttag ausblenden

Zustellungsüberprüfung anhand des Stadtnamens

Bestimmte Zustellzeitfenster ausblenden