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 support@zapiet.com—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 scripts.
  • Remove these 4 lines of code:
    <script type="text/javascript">
    $(document).ready(function() {  
    
    });
    </script>

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

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>

  


Hide 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 pickup times for specific products (by tag)

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

You will need to tag the products you want to hide the pickup slots for. Then, add the tag you are using instead of the 'Test' in the code below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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.

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.  If you are using a single digit number, add a 0 before it (e.g. "Tue, 01 March").

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. If you are using a single digit number, add a 0 before it (e.g. "Tue, 01 March").

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.