Every once in a while I get asked to add a date picker to the checkout page of a Shopp e-commerce site, usually to allow the customer to choose a delivery date for the order. There are a ton of date picker scripts out there, including a jQuery UI Datepicker (which I find ugly and difficult to reskin without adding a lot of extra bulk to your site), so I’m not going to list them all here. For my purposes, I use pickadate.js because it is lightweight, uses jQuery (which Shopp also uses), and looks great out of the box.
The first thing you’ll need to do is enable theme templates, if you haven’t already done so. Once that’s done, open your checkout.php file and add the following wherever you want your date picker field to be:
<label for="delivery-date">Delivery Date</label>
<?php
shopp('checkout.order-data', array(
'name' => 'Delivery Date',
'type' => 'text',
'id' => 'datepicker')
);
?>
This creates the input field you’re going to attach the date picker to, and gives it an id of “datepicker”. Next you’ll need to download the pickadate.js package and drop the .js and .css files into your theme folder. Then edit your theme’s functions.php file by adding the following:
add_action( 'wp_enqueue_scripts', 'pickadate_scripts' );
function pickadate_scripts() {
// only load the date picker on the checkout page
if ( is_shopp_checkout() ) {
wp_enqueue_script( 'picker', get_stylesheet_directory_uri() . '/js/picker.js', 'jquery' );
wp_enqueue_script( 'picker-date', get_stylesheet_directory_uri() . '/js/picker.date.js', array( 'jquery', 'picker' ) );
wp_enqueue_style( 'picker', get_stylesheet_directory_uri() . '/css/picker-default.css' );
wp_enqueue_style( 'picker-date', get_stylesheet_directory_uri() . '/css/picker-default.date.css' );
}
}
Note the paths I’ve used; I usually put all of my theme’s CSS and JS files into separate folders so you may need to change your paths if you put them elsewhere. Now that the pickadate.js files are queued to show up on the checkout page, you need to attach the date picker to the field you added to the checkout page. This should also go in your functions.php file:
// Date picker for checkout pages
add_action( 'wp_head', 'pickadate_inline' );
function pickadate_inline () {
if ( is_shopp_checkout() ) {
echo "
<script>
jQuery(document).ready(function($) {
$('#datepicker').pickadate();
});
</script>";
}
}
It’s really that simple. If you need to modify the date picker behavior, take a look at the date picker documentation.