Adding DatePicker to checkout

  • Resolved meltdown2

    (@meltdown2)


    13 years, 3 months ago

    Goal: Add a mandatory datepicker to eshop checkout.
    Site: indianhomecooks.com

    Here’s the datepicker-specific code I have:

    // Add an additional field to the checkout within a new fieldset
add_filter('eshopaddtocheckout','eshop_extras_checkout');
function eshop_extras_checkout($echo){
	$echo .= '<fieldset class="eshop eshop_extra">' . "\n";
	$echo .= '<legend>Delivery:</legend>' . "\n";
	$echo .= '<label for="eshop_extra">'.__('Date To Be Delivered','eshop').' <span class="reqd">*</span><br />
		  <input class="short" type="text" name="eshop_extra" value="" id="datepicker" maxlength="20" size="20" /></label><br />';
	$echo .= '</fieldset>' . "\n";
	return $echo;
}

    However, the end result is that it just displays the input label with an input field…that’s it, no calender.

    I have to admit that I’m not exactly clear as to how to use the jQuery UI Widgets plugin and suspect I’ve missed a step. Could I trouble you to walk me thru the process?

    Thanks so much for your help 🙂

    http://ww.wp.xz.cn/extend/plugins/jquery-ui-widgets/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter meltdown2

    (@meltdown2)

    13 years, 3 months ago

    Still no joy. Here are my settings:

    1) Custom jQuery Code in jQuery UI Widgets Options:

    $(function() {
$( "#datepicker" ).datepicker();
});

    2) Datepicker only selected in jQuery UI Scripts.

    3) The datepicker id is being called:

    // Add an additional field to the checkout within a new fieldset
add_filter('eshopaddtocheckout','eshop_extras_checkout');
function eshop_extras_checkout($echo){
	$echo .= '<fieldset class="eshop eshop_extra">' . "\n";
	$echo .= '<legend>Delivery:</legend>' . "\n";
	$echo .= '<label for="eshop_extra">'.__('Date To Be Delivered','eshop').' <span class="reqd">*</span><br />
		  <input class="short" type="text" name="eshop_extra" id="datepicker" value="" /></label><br />';
	$echo .= '</fieldset>' . "\n";
	return $echo;
}

    4) From my themes header.php:

    <script type="text/javascript">

	document.documentElement.className = 'js';

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>

<link rel="stylesheet" type="text/css" href="css/jquery.datepick.css">
<script type="text/javascript" src="js/jquery.datepick.js"></script>

</head>

    I suspect that the trouble lies with the header.php file. What exactly should be here? And should there also be something in my themes functions.php?

    Thanks for any comments 🙂

    Thread Starter meltdown2

    (@meltdown2)

    13 years, 3 months ago

    OK, I’ve now uploaded jquery.datePicker-min.js to my themes /js folder, and update the url in my themes header.php but still without success:
    <script type='text/javascript' src='http://indianhomecooks.com/wp-content/themes/TheCorporation/js/jquery.datePicker-min.js'></script>

    Thread Starter meltdown2

    (@meltdown2)

    13 years, 3 months ago

    Success! I overlooked the plugin creators instruction to properly wrap the jQuery inside the proper wrapper:

    jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker();
});

    Oh joy!

    Plugin Author David Gwyer

    (@dgwyer)

    13 years, 3 months ago

    Glad you got it sorted!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding DatePicker to checkout’ is closed to new replies.