Signup

How to hide specific pickup time slots?

You can use different code snippets below to hide specific pickup time slots.

Note

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.

Online store 2.0

If you are using our widget on Online store 2.0, you will need to

  • Add the code in Store Pickup + Delivery > Developers, under Custom JS
  • Remove these 2 lines of code:
    <script type="text/javascript">
    
    </script>

Versions 7.1.2. and older

If you are using our widget on on older version of our app (that has our files), you will need to

  • Add the code in your storepickup-addons.liquid file
  • Add jQuery in case the code is not working
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Hiding pickup times for all days and all locations

<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>

Change the time values to those you would like disabled. The example code above will disable the times 2:00pm, 2:30pm, 3:00pm and 3:00pm. 

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/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.

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).

<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.

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).

<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.

You will need to change the ZapietOutledId ('12345') to match the location ID you are targeting.

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).

<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>

If you would like to use multiple dates, but apply to all locations, remove this line:

var locationId = "12345";

In the widget, the times you've disabled will now be hidden.


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.