You can use different code snippets below to hide specific pickup time slots.
Please reach out to us at [email protected]—we’ll be happy to implement this for you. Only proceed if you are comfortable editing code yourself.
The placement of the code will depend on the widget version your store is on. Each code snippet has instructions for each version.
Online store 2.0
If you are using our widget on Online store 2.0, you will need to add the code in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
Legacy versions
If you are using our widget on an older version of our app (that has our files), you will need to add the code in your storepickup-addons.liquid file.
We encourage all merchants to update to the latest version to ensure continued functionality and stability. Please contact us at [email protected], and we would be happy to install the update for you!
Hide pickup times 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, 2:30pm, 3:00pm and 3:00pm.
Online store 2.0
Add this code snippet in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
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";
}
}
});
If you are using our 24-hour clock then your code should look like this:
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";
}
}
});
Legacy versions
Add this code snippet in the storepickup-addons file.
<script type="text/javascript">
$(document).ready(function() {
window.ZapietEvent.listen('pickup.timepicker.opened', function() {
$(".picker__list").find("[aria-label='2:00 PM']").hide();
$(".picker__list").find("[aria-label='2:30 PM']").hide();
$(".picker__list").find("[aria-label='3:00 PM']").hide();
$(".picker__list").find("[aria-label='3:30 PM']").hide();
});
});
</script>
If you are using our 24-hour clock then your code should look like this:
<script type="text/javascript">
$(document).ready(function() {
window.ZapietEvent.listen('pickup.timepicker.opened', function() {
$(".picker__list").find("[aria-label='14:00']").hide();
$(".picker__list").find("[aria-label='14:30']").hide();
$(".picker__list").find("[aria-label='15:00']").hide();
$(".picker__list").find("[aria-label='15:30']").hide();
});
});
</script>
Hide pickup times for specific products by tag
Change the time values to those you would like disabled.
The example code below will disable the times 2:00pm, 2:30pm, 3:00pm and 3:00pm.
If you are using our 24-hour clock replace '2:00 PM' with '14:00'.
Online store 2.0
Add this code snippet in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
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('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";
}
}
});
}
Legacy versions
If you would like to use another tag (instead of "Test"), you can change it below, and then tag your products accordingly.
<script type="text/javascript">
var restricted = false;
{% for item in cart.items %}
{% if item.product.tags contains 'Test' %}
var restricted = true;
{% endif %}
{% endfor %}
if (restricted === true) {
$(document).ready(function() {
window.ZapietEvent.listen('pickup.timepicker.opened', function() {
$(".picker__list").find("[aria-label='2:00 PM']").hide();
$(".picker__list").find("[aria-label='2:30 PM']").hide();
$(".picker__list").find("[aria-label='3:00 PM']").hide();
$(".picker__list").find("[aria-label='3:30 PM']").hide();
});
});
};
</script>
Hide/show pickup times per location
This code can be used to target a specific location. 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 enabled/disabled—keep in mind that 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'.
Online store 2.0
Add this code snippet in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
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";
}
});
}
}
});
Legacy versions
Add this code snippet in the storepickup-addons file.
<script type="text/javascript">
$(document).ready(function() {
window.ZapietOutletId = '';
window.ZapietEvent.listen('updateSelectedLocationId', function(outletId) {
// Store the selected outletId in a global variable
ZapietOutletId = outletId;
});
window.ZapietEvent.listen('pickup.timepicker.opened', function() {
// Specify the exact outletId number to enable the specific times on
if (ZapietOutletId == '12345') {
// Hides all pickup times
$(".picker__list").find("[aria-label]").hide();
// Enable both 8:00 AM and 4:00 PM
$(".picker__list").find("[aria-label='8:00 AM']").show();
$(".picker__list").find("[aria-label='4:00 PM']").show();
}
});
});
</script>
Hide pickup times for a specific date
You can edit the "Tue, 21 December" 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—keep in mind that 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'.
Online store 2.0
Add this code snippet in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
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";
}
}
}
Legacy versions
Add this code snippet in the storepickup-addons file.
<script type = "text/javascript" >
window.onload = function() {
window.ZapietEvent.listen('pickup.datepicker.rendered', function() {
window.ZapietEvent.listen('pickup.timepicker.opened', function() {
var dateButton = $('div[aria-label^="Tue, 21 December"]');
var isDateSelected = dateButton && (dateButton.attr("aria-selected") == "true");
var pickerList = $(".picker__list");
if (isDateSelected) {
pickerList.find("[aria-label='2:00 PM']").hide();
pickerList.find("[aria-label='2:30 PM']").hide();
pickerList.find("[aria-label='3:00 PM']").hide();
pickerList.find("[aria-label='3:30 PM']").hide();
} else {
pickerList.find("[aria-label='2:00 PM']").show();
pickerList.find("[aria-label='2:30 PM']").show();
pickerList.find("[aria-label='3:00 PM']").show();
pickerList.find("[aria-label='3:30 PM']").show();
}
});
});
};
</script>
Hide pickup times 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 "Tue, 21 December" 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—keep in mind that 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 = "12345";
Online store 2.0
Add this code snippet in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
var dates = [
"Wed, 28 June",
"Thu, 29 June"
];
var hours = [
"2:00 PM",
"2:30 PM",
"3:00 PM",
"3:30 PM"
];
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";
});
}
}
Legacy versions
Add this code snippet in the storepickup-addons file.
<script type = "text/javascript" >
window.onload = function() {
var dates = [
"Tue, 21 December",
"Wed, 22 December",
"Thu, 23 December"
];
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('updateSelectedLocationId', function(outletId) {
window.ZapietOutletId = outletId;
});
}
window.ZapietEvent.listen('pickup.timepicker.opened', function() {
var selectedDate = $('.picker__day[aria-selected="true"]').attr('aria-label');
var pickerList = $(".picker__list");
var hourSelectorQuery = hours
.map(function (hour) {
return '[aria-label^="' + hour + '"]';
})
.join(",");
var isAnyDateSelected = !!dates.find(function (date) {
return selectedDate.includes(date);
});
var isLocationSelected = (typeof locationId != "undefined")
&& (window.ZapietOutletId == locationId);
var shouldHideHours = (typeof locationId != "undefined")
? isAnyDateSelected && isLocationSelected
: isAnyDateSelected;
if (shouldHideHours) {
pickerList.find(hourSelectorQuery).hide();
} else {
pickerList.find(hourSelectorQuery).show();
}
});
};
</script>
In the widget, the times you've disabled will now be hidden.
Hide different pickup time slots for weekdays and weekends
Online store 2.0
If you would like to hide specific pickup slots on weekdays and different time slots during the weekend, use the code below.
You can edit the code in order to hide the pickup 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.
Add this code snippet in Zapiet - Pickup + Delivery > Developers, under Custom scripts.
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";
}
});
}
}Troubleshooting
Online store 2.0
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>
Legacy versions
If the code is not working, try adding jQuery on top of the cart file or to storepickup-addons.liquid.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>