Включить Datepicker в настраиваемом текстовом поле WooCommerce Checkout
В WooCommerce я могу подключить поле к моей странице корзины WooCommerce. & показывает ОК, используя следующие функции PHP (Storefront) моей темы:
<?
// ADD Custom Fields to Checkout Page
/**
* Add the field to the checkout
**/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
date_default_timezone_set('America/Los_Angeles');
$mydateoptions = array('' => __('Select PickupDate', 'woocommerce' ));
echo '<div id="my_custom_checkout_field"><h3>'.__('Delivery Info').'</h3>';
woocommerce_form_field( 'order_pickup_date', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'id' => 'datepicker',
'required' => true,
'label' => __('Delivery Date'),
'placeholder' => __('Select Date'),
'options' => $mydateoptions
),$checkout->get_value( 'order_pickup_date' ));
echo '</div>';
}
/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
global $woocommerce;
// Check if set, if its not set add an error.
if (!$_POST['order_pickup_date'])
wc_add_notice( '<strong>PickupDate</strong> ' . __( 'is a required field.', 'woocommerce' ), 'error' );
}
/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['order_pickup_date']) update_post_meta( $order_id, 'PickupDate', esc_attr($_POST['order_pickup_date']));
}
?>
Однако виджет DatePicker не запускается, когда вы щелкаете в поле. Я знаю, что для работы JQuery требуется следующий код в заголовке:
<script>
$( function() {
$( "#datepicker" ).datepicker(); } );
</script>
У меня это не сработало, поэтому я решил добавить эту функцию в файл checkout.js в теме Storefront, но добавленное поле не имело функции виджета календаря.
Там много .js в них нужно начинать новый для включений?
Решение
Сначала вам нужно будет:
- Enqueu основной скрипт jquery-ui datepicker
- Измените свой собственный скрипт, начиная с
jQuery(function($){вместо$(function(){…
Таким образом, чтобы включить datepicker для вашего пользовательского текстового поля ваш код будет:
// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() {
// Only on front-end and checkout page
if( is_admin() || ! is_checkout() ) return;
// Load the datepicker jQuery-ui plugin script
wp_enqueue_script( 'jquery-ui-datepicker' );
}
// Call datepicker functionality in your custom text field
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field', 10, 1);
function my_custom_checkout_field( $checkout ) {
date_default_timezone_set('America/Los_Angeles');
$mydateoptions = array('' => __('Select PickupDate', 'woocommerce' ));
echo '<div id="my_custom_checkout_field">
<h3>'.__('Delivery Info').'</h3>';
// YOUR SCRIPT HERE BELOW
echo '
<script>
jQuery(function($){
$("#datepicker").datepicker();
});
</script>';
woocommerce_form_field( 'order_pickup_date', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'id' => 'datepicker',
'required' => true,
'label' => __('Delivery Date'),
'placeholder' => __('Select Date'),
'options' => $mydateoptions
),$checkout->get_value( 'order_pickup_date' ));
echo '</div>';
}
Код помещается в файл function.php вашей активной дочерней темы (или темы) или также в любой файл плагина.
Проверено и работает. На тему магазина вы получите следующее:
Возможно, вам придется стилизовать его …
Другие решения
Просто обновление, что это больше не нужно. С Woocommerce вы можете просто поменять стиль на «date», и он решит все остальное для вас — Yahoo!
detector