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.
Versions 7.1.2 and older
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.
Please contact us on [email protected] so we can check if you're eligible for an update to Online store 2.0!
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() {
$(".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();
});If you are using our 24-hour clock then your code should look like this:
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();
});
Versions 7.1.2. and older
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 (v7)
This code snippet only works with v7—it is not supported on Online store 2.0.
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'.
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 ZapietOutledId ('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
ZapietOutletId = String(payload.location.id);
}
});
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();
}
});
Versions 7.1.2. and older
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.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();
}
});
});
Versions 7.1.2. and older
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 ZapietOutledId ('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, 21 December",
"Thu, 22 December",
"Fri, 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('locationSelected', function(payload) {
if (payload.method == "pickup") {
window.ZapietOutletId = String(payload.location.id);
}
});
}
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();
}
});
Versions 7.1.2. and older
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.
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>
Versions 7.1.2. and older
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>