Making Booking Date a Required Field

⚠️ Caution

This is an advanced tutorial and is not supported by BookThatApp. It requires working knowledge of web development languages such as HTML, CSS, JavaScript, and Liquid.
If you are not comfortable making these changes yourself, we strongly recommend hiring a Shopify Expert.

Ajax Themes and Required Booking Dates

BookThatApp automatically makes the booking date a required field. However, for Shopify themes that use Ajax to add products to the cart, you must manually customize the JavaScript responsible for adding items to the cart.

This is necessary because Ajax-based add-to-cart actions can bypass the app’s built-in validation.

Example JavaScript Validation

The simplest approach is to locate your Ajax add-to-cart code and add a custom check to ensure a booking date has been selected before allowing the product to be added to the cart.

$(".addtocart").click(function(e){  
  var elem = $(this);

  if ($('#booking-start').val() === "") {
    alert('Please select a date');
    return false;
  }

  $(elem).prop("disabled", true)

  e.preventDefault();
  addItem('add-item-form');     
});

Support Notice

While we’re happy to answer general questions via a support ticket, implementing or modifying Ajax functionality falls outside our no-charge support scope.

If you need hands-on assistance, we recommend working with a Shopify Expert experienced in Ajax-based themes.