Booking Deliveries and Pick-ups

This guide walks you through how to collect a delivery or pick-up date and time on the cart page. This approach works well for services such as meal pickup, grocery delivery, floral pickup, and more.

The selected date and time will apply to the entire cart.

Before You Begin

• The cart booking form collects one date and time per order (not per product).
• This setup manages availability based on the Delivery / Pick-Up product.
• If you need to manage capacity for individual items, use a booking widget on each product page instead.
• Your theme may require jQuery if it is not already included.
• Need help? Contact our support team.

Step-by-Step Setup

1. In BookThatApp, create a product named Delivery or Pick Up.
2. Set the Capacity setting to Product Based.

3. Enter a capacity value that matches how many orders you can handle at one time.

   Example: If you can make 2 deliveries at once, set Capacity to 2.

4. Set the Duration to the length of each time window.

   Example: For 3-hour delivery windows, set Duration to 3 hours.
5. Set your Operating Hours.
6. (Optional) Import the products that may be included in the delivery so they appear in the booking details.
   • Bulk import instructions: here.
7. In your Shopify Admin, open your Theme Files (not the Customize visual editor).
8. Create a snippet named cart-booking-form.liquid and paste the code shown in the "Code snippet" section below.

Code snippet (paste into cart-booking-form.liquid)

{% assign delivery_product = all_products['delivery'] %}
<div class="cart-booking-form">
  <div>
    <label for="booking">Please enter the date for your order:</label>
    <input id="booking" type="text" name="attributes[Date]" 
      value="{{ cart.attributes["Date"] }}" 
      data-bta-product-config="{{ delivery_product.metafields.bookthatapp.config }}" 
      data-duration="30" 
      class="datepicker bta bta-dp-start required bta-load-enable" size="12" autocomplete="off" 
      data-handle="{{ delivery_product.handle }}" 
      data-variant="{{ delivery_product.variants.first.id }}" 
      readonly="readonly" disabled="disabled" data-mindate="0" />
  </div>

  <div>
    <label for="bookingTime">Please enter the time for your order:</label>
    <select id="bookingTime" name="attributes[Time]" 
      class="bta-opening-hours bta-load-enable" disabled="disabled"
      data-datepicker="booking"
      data-prompt="Select time..." data-bta-display-range="true" 
      data-bta-slot-interval="30">
      <option class="loading">Loading...</option>
    </select>
    <span class="bta-no-slots-available" style="display:none;">No times available</span>
  </div>

  <div class="bta-validation-messages" style="display:none">
    <p class="bta-validation-date-missing">Please select a date</p>
  </div>

  <input id="delivery_id" type="hidden" name="attributes['Booking Variant']" value="{{ delivery_product.variants.first.id }}" />
</div>

<script>
  var bta = {
    product_id: {{ delivery_product.id }}
  }
</script>

9. In your cart template file (commonly named main-cart-items.liquid), include the snippet inside the cart form: 
   {% render 'cart-booking-form' %}
10. You will likely want to apply custom CSS to the booking form via your theme file. This will vary from theme to theme.

How It Works

When a customer checks out, BookThatApp creates a single booking that includes:

• The delivery/pick-up time slot
• All products are configured to be part of the booking