Добавление пользовательского средства выбора персидского календаря в поля оформления заказа в Woocommerce - PullRequest
Новая
       17

Добавление пользовательского средства выбора персидского календаря в поля оформления заказа в Woocommerce

1 голос
/ 11 марта 2019

Я пытаюсь добавить персидский календарь в пользовательское поле оформления заказа в WooCommerce. Я добавил JS и CSS-файлы персидского средства выбора даты в свою тему и добавил необходимый javascript для инициализации, как описано в документации «Персидское средство выбора даты» .

Я добавил этот код для постановки в очередь файлов css и js. 

function add_theme_scripts() {
    wp_enqueue_style( 'persiandatepicker', get_template_directory_uri() . '/css/persian-datepicker.css', array(), '1.1', 'all');
    wp_enqueue_script( 'persiandate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), '1.1', false);
    wp_enqueue_script( 'persiandatepickerjs', get_template_directory_uri() . '/js/persian-datepickerjs.js', array ( 'jquery' ), '1.1', false);
    wp_enqueue_script( 'mydatepicker', get_template_directory_uri() . '/js/my-datepicker.js', array ('jquery'),null, false);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Файл my-datepicker.js (для инициализации datepicker) : 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".hasdatepicker").pDatepicker(); 
});
</script>

И следующий код для добавления нового поля даты (я поместил некоторую часть кода, потому что я также добавил несколько дополнительных настраиваемых полей на страницу оформления заказа в woocommerce): 

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout) {

    woocommerce_form_field( 'billing_date', array(
        'type' => 'text',
        'class' =>array('form-row-first','hasdatepicker'),
        'label' => __('تاریخ نصب'),
        'required' => false,
        'dateFormat'=> 'dd-mm-yy'
    ), $checkout->get_value( 'billing_date' ));


    // echo '<input type="text" class="hasdatepicker" />'; // For testing purpose
}

Как вы видите в конце вышеприведенного кода, я даже поместил ввод с классом = "hasdatepicker", и он тоже не показывает datepicker. JS и CSS файлы загружаются, и код в порядке. но календарь или указатель даты не отображаются.

Любая идея или помощь приветствуются.

1 Ответ

0 голосов
/ 18 марта 2019

В вашем коде много ошибок, например:

  1. В Wordpress для сценариев jquery вам нужно начать, вам нужно использовать jQuery при запуске следующим образом: 

    jQuery(document).ready(function($) { 
    $(".hasdatepicker").pDatepicker(); 
});

  2. Во внешнем файле JS вам не нужно использовать <script type="text/javascript"> … </script> html-теги.

  3. в поле формы Woocommerce,вам нужно добавить свой класс datepicker в поле ввода, используя: 

    'input_class' => array('hasdatepicker'),

  4. Вы можете встроить инициализацию datepicker в свой код php (см. мой код ответа).

  5. Вы должны использовать минимизированные зависимости JS вместо несжатых ...

и некоторые другие вещи ...

Сейчас Я проверил это и есть ошибка с этим указателем даты персидского календаря:

enter image description here

Итак, вы должны сообщить об этом автору плагина jQuery …

Вот правильный код: 

// Date picker field and initialization
add_action('woocommerce_after_order_notes', 'custom_checkout_fields_after_order_notes');
function custom_checkout_fields_after_order_notes( $checkout ) {

    woocommerce_form_field( 'billing_date', array(
        'type'          => 'text',
        'label'         => __('تاریخ نصب'),
        'class'         => array('form-row-first'),
        'input_class'   => array('hasdatepicker'),
        'required'      => false,
    ), '');

    // Date picker Initialization script
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        $(".hasdatepicker").pDatepicker({
            initialValue: false
        });
    });
    </script>
    <?php
}

// Register JS and CSS scripts:
add_action( 'wp_enqueue_scripts', 'add_persian_date_picker_scripts' );
function add_persian_date_picker_scripts() {
    // Only on checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    // $path = get_stylesheet_directory_uri(); // The path for child theme
    $path = get_template_directory_uri(); // The path for parent theme (without a child theme)

    // (Use minified file versions, instead of uncompressed
    wp_enqueue_style( 'persiandatepicker', $path . '/css/persian-datepicker.css', array(), '1.1', 'all');
    wp_enqueue_script( 'persiandate', $path . '/js/persian-date.js', array ( 'jquery' ), '1.1', false);
    wp_enqueue_script( 'persiandatepickerjs', $path . '/js/persian-datepickerjs.js', array ( 'jquery' ), '1.1', false);

    endif;
}

код идетв function.php fфайл вашей активной детской темы (или активной темы).

Протестировано , но не работает из-за ошибки в файле JS datepicker (см. Скриншот) .

...