Delivery Time

Collections

​

We added 4 collections to this example:

• Deliveries: general delivery information

• DeliveryDisabledDates: disabled dates (e.g. holidays)

• DeliverySlots: predefined time slots (e.g. 08:00 - 12:00, 14:00 - 18:00)

• DeliveryAvailability: number of deliveries per slot

Pages & Lightboxes

​

Our site contains the following pages and lightboxes:

• Cart page: Contains delivery day and time text elements for displaying the selected delivery times, as well as an ‘Update Delivery Time’ button for opening a lightbox to change the delivery time.

• delivery details lightbox: Contains a date picker for selecting a delivery date and a dropdown element for selecting a predefined delivery time slot.

Backend files

Our site contains the following backend files:

• cart.jsw: Gets information about the current cart.

• events.js: Updates the availability of delivery time slots in the collections.

npm package

​

• We used Moment.js for easier handling of weekend delivery unavailability.

Code

​

Our example site contains code that performs the following actions:

1. After a customer adds a product to their cart, get the cart data and check for an existing selected delivery time slot. If the customer has already selected a slot, display its date and time. If the customer hasn’t selected a time slot for delivery yet, open the lightbox.

2. When the lightbox opens, check the collections for the following:

   • If a specific date and/or time are unavailable (weekends, blocked days/times), block them from the date picker and the time slot dropdown.

   • Based on predefined settings, if the day of purchase is too close to the weekend, only allow time slots in the coming week.

   • If a specific time slot has reached its maximum allocated deliveries, don’t show this slot.

3. When the customer selects their preferred slot and places an order, update the collections.

4. Allow the customer to update their delivery time by clicking the ‘Update Delivery Button’ on the cart page.