We've had a few inquiries about capturing delivery dates on the cart page for Shopify so I thought I'd write it up.

The first step is to choose a datepicker. I recommend going with the jQuery UI Datepicker as a lot of themes are already using jQuery. To add this to your theme, add the following lines to the head section of theme.liquid:


<head>
...
{{ 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/smoothness/jquery-ui.css' | stylesheet_tag }}
{{ 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js' | script_tag }}
...
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $(".datepicker").datepicker({minDate: 0});
    $('#ui-datepicker-div').css('clip', 'auto'); // fix for not showing properly - see http://stackoverflow.com/questions/2682259/jquery-ui-datepicker-not-displaying
  });
</script>
</head>

Make sure you add it after jQuery.

Updated 2011-09-10: Added fix for the datepicker not showing sometimes.

Now go to cart.liquid, and add an input field for your datepicker. Make sure it is inside the <form> element:

<form action="/cart" method="post" id="cartform">
  ...
  <label for="delivery-date">Delivery Date:</label>
  <input id="delivery-date" type="text" name="attributes[delivery_date]" value="{{ cart.attributes[delivery_date] }}" class="datepicker" />
  ...
</form>

That's it. Your orders will now include a delivery date attribute that will show when the order should be delivered.

Useful links:

Incidentally, if you would like to manage bookings (e.g. courses or rentals) and delivery dates for products in your Shopify store, including real-time availability and blackout dates, check out our booking management system for Shopify - BookThatApp.