WooCommerce 체크아웃 사용자 정의 텍스트 필드에서 Datepicker 사용

WooCommerce 체크아웃 사용자 정의 텍스트 필드에서 Datepicker 사용

WooCommerce에서 내 테마(Storefront) 기능 PHP에서 다음을 사용하여 WooCommerce 카트 페이지에 필드를 연결하고 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']));
            }
            ?>

그러나 필드를 클릭하면 날짜 선택 위젯이 시작되지 않습니다.JQuery가 작동하려면 헤더에 다음과 같은 코드가 필요하다는 것을 알고 있습니다.

<script>
$( function() {
$( "#datepicker" ).datepicker(); } );
</script>

이것은 저에게 효과가 없어서 Storefront 테마의 checkout.js 파일에 이 기능을 넣으려고 했는데 추가된 필드에 캘린더 위젯 기능이 없었습니다.

많이 있어요..js그것들에 포함을 위해 새것을 시작해야 합니까?

먼저 다음과 같은 작업이 필요합니다.

• enqueu 메인 jquery-ui datepicker 스크립트
• 사용자 지정 스크립트를 다음과 같이 변경합니다.jQuery(function($){대신에$(function(){…

사용자 지정 텍스트 필드를 활성화하기 위해 코드는 다음과 같습니다.

// 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>';
}

코드가 작동합니다.활성 하위 테마(또는 테마)의 php 파일 또는 플러그인 파일에 있습니다.

테스트를 거쳐 작동합니다.스토어프론트 테마에서는 다음과 같은 것을 얻을 수 있습니다.

스타일링이 필요할 수도 있습니다.

이것이 더 이상 필요하지 않다는 업데이트일 뿐입니다.Woocommerce를 사용하면 스타일을 '데이트'로 간단히 변경할 수 있고, 나머지는 Yahoo!

언급URL : https://stackoverflow.com/questions/47045814/enable-datepicker-in-a-woocommerce-checkout-custom-text-field