Question

在WooCommerce中，我可以将一个字段连接到我的WooCommerce购物车页面＆amp;在我的主题（店面）函数PHP中使用以下内容显示OK：

<?
            // 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>

这对我不起作用，所以我想把这个函数放到Storefront主题的checkout.js文件中，但添加的字段没有日历小部件功能。

我需要为他们开设一个新的.js吗？

Answer 1

首先你需要：

Enqueu main jquery-ui datepicker script
使用<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>而不是jQuery(function($){ ...

因此，要为自定义文本字段启用 $(function(){ ，您的代码将为：

datepicker

代码放在活动子主题（或主题）的function.php文件中，或者放在任何插件文件中。

经过测试和工作。在店面主题上，您将获得：

您可能需要设计样式......

Answer 2

只需更新一下，便不再需要这样做。借助Woocommerce，您只需将样式更改为“日期”即可为您处理剩下的一切-雅虎！

在WooCommerce Checkout自定义文本字段中启用Datepicker

2 个答案: