You can use different code snippets to hide or show specific delivery time slots, after you've configured delivery slots.
Only proceed if you are comfortable editing code yourself. Please reach out to us on chat—we’ll be happy to implement this for you.
Widget versions 1 and 2
These steps apply only to the Zapiet - Pickup + Delivery widget version 1 or 2. Which version of the widget am I using?
If you're on a legacy version, please reach out to us on chat, and we would be happy to update the widget to the newest version for you!
You will need to add the code in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
Hide delivery slots for all days and all locations
Change the time values to those you would like disabled.
The example code will disable the times 2:00pm and 3:00pm.
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";
}
}
});
If you are using our 24-hour clock then your code should look like this:
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";
}
}
});Hide delivery slots for specific products by tag
Requirements:
You need to use the cart page widget (this option will not work reliably in the drawer cart).
Change the time values to those you would like disabled.
The example code below will disable the times 2:00pm and 3:00pm.
If you are using our 24-hour clock replace '2:00 PM' with '14:00'.
If you would like to use another tag (instead of "Test"), you can change it below, and then tag your products accordingly.
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";
}
}
});
}Hide/show delivery slots per location
This code can be used to target a specific location. You will need to change the ZapietOutletId ('123456') to match the location ID you are targeting.
Location ID can be found in Zapiet - Pickup + Delivery > Locations > [location name], if you scroll to the bottom of the page.
You can change the time values to those you would like enabled/disabled—the values will be different depending on the type of clock you're using (12-hour or 24-hour). If you are using our 24-hour clock, replace '2:00 PM' with '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";
}
});
}
}
});
Hide delivery slots for a specific date
You can edit the code in order to hide the date you need. If you are using a single digit number, add a 0 before it (e.g. "Tue, 01 March").
If you're using a language other than English, you will need to translate the day and month you're targeting. For example, if you're using French, "Sat, 24 December" should be "Sam, 24 Décembre".
You can change the time values to those you would like disabled—the values will be different depending on the type of clock you're using (12-hour or 24-hour). If you are using our 24-hour clock, replace '2:00 PM' with '14:00'.
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";
}
}
}
Hide delivery slots for specific dates and a specific location
If you would like to target more dates, or a specific location, use the code below.
You can edit the code in order to hide the dates you need. If you are using a single digit number, add a 0 before it (e.g. "Tue, 01 March").
If you're using a language other than English, you will need to translate the day and month you're targeting. For example, if you're using French, "Sat, 24 December" should be "Sam, 24 Décembre".
You will need to change the ZapietOutletId ('12345') to match the location ID you are targeting. Location ID can be found in Zapiet - Pickup + Delivery > Locations > [location name], if you scroll to the bottom of the page.
You can change the time values to those you would like disabled—the values will be different depending on the type of clock you're using (12-hour or 24-hour). If you are using our 24-hour clock, replace '2:00 PM' with '14:00'.
If you would like to use multiple dates, but apply to all locations, remove this line: 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";
});
}
}
Hide different delivery slots for weekdays and weekends
If you would like to hide specific delivery slots on weekdays and different time slots during the weekend, use the code below.
You can edit the code in order to hide the delivery slots you need. If you are using our 24-hour clock replace '2:00 PM' with '14:00'.
If you're using a language other than English, you will need to translate the day of the week. For example, if you're using French, "Sat" should be "Sam" and "Sun" should be "Dim". You can find your day of the week labels in Zapiet - Pickup + Delivery > Settings > Text & Design > Calendar.
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";
}
});
}
}Hide specific delivery dates based on product tags
Requirements:
You need to use the cart page widget (this option will not work reliably in the drawer cart).
Change the date values to those you would like disabled.
If you would like to use another tag (instead of "Test"), you can change it below, and then tag your products accordingly.
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'])
});
}How it will look in the widget?
The times you've disabled will now be hidden in Zapiet - Pickup + Delivery widget.
Troubleshooting
If the code is not working, try adding jQuery on top of the cart file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>