I am developing a woocommerce plugin for a super market wordpress website.

What I want to do is to retrieve the customer's fidelity code compare it to the other information he filled in and check in the supermarket database if he is entitled to a discount or not. My problem is that I don't know why but I can't select the fidelity code field that I created when I gave it an id that is normally displayed on the page and is unique.

On the php side, everything works normally: On the checkout page, I added a form field as follows:

woocommerce_form_field(
  ‘fidelity_code’,
  array(
      'type' => 'text',
      'label' => __('Fidelity code’, ‘my—plugin-woo'),
      'class' => array('form-row', 'form-row-wide'),
      'id' => ‘fidelity_code’,
      'required' => false,
  )

Now in my jQuery script file, when I do something silly like :

jQuery(document).ready(function ($) {
  $("#fidelity_code").on("change", function () {
    console.log("It's work"); //Does not work
  });
});

it doesn't work. But if I do it on a native woocommerce field (for example the first name field), it works

jQuery(document).ready(function ($) {

  $("#billing_first_name").on("change", function () {
    console.log("It's work"); //works!!!
  });
});

I'm thinking that if it works on a native field, then the problem is not with jQuery. So please help me to understand.

I've tried to change the jquery version. I've tried to use no conflict jQuery I've tried to change $ sign by jQuery first then by another variable name like $j I've tried to use classes instead of ids but the code below does not add the class 'fidelity_code' to the field but to its parent. I reassure you for the id, it adds it to the field

woocommerce_form_field(
  ‘fidelity_code’,
  array(
      'type' => 'text',
      'label' => __('Fidelity code’, ‘my—plugin-woo'),
      'class' => array('form-row', 'form-row-wide', 'fidelity_code'),
      'id' => ‘fidelity_code’,
      'required' => false,
  )

CodePudding user response：

add_action('woocommerce_before_order_notes', 'kb_add_custom_checkout_field');
function kb_add_custom_checkout_field()
{
    woocommerce_form_field(
        'fidelity_code',
        array(
            'type' => 'text',
            'label' => __('Fidelity code', 'my—plugin-woo'),
            'class' => array('form-row', 'form-row-wide'),
            'id' => 'fidelity_code',
            'required' => false,
        )
    );
}

add_action('init', 'files_to_load');
function files_to_load()
{
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/custom.js',
        array('jquery')
    );
}

JS file:

 jQuery(document).ready(function ($) {
        $("#fidelity_code").on("change", function () {
            console.log("It's work");
        });
    });

CodePudding user response：

In my php file

add_filter('woocommerce_gateway_description', 'fidelity_code_description_fields', 10, 2);
add_action('woocommerce_checkout_process', 'fidelity_code_description_fields_validation');


add_action('wp_enqueue_scripts', function () {
    wp_add_inline_script('jquery', 'var $= jQuery.noConflict();');
});


if (!function_exists('load_myplugin_assets')) {
    function load_myplugin_assets()
    {
        wp_register_style('fidelity_code_woo', plugins_url('../assets/css/styles.css', __FILE__));
        wp_enqueue_style('fidelity_code_woo');
        wp_enqueue_script('fidelity_code_woo', plugins_url('../assets/js/script.js', __FILE__), array('jquery'));
    }
}

add_action('wp_enqueue_scripts', 'load_myplugin_assets');

function fidelity_code_description_fields($description)
{

    $description = $description;
    ob_start();

    echo '<div style="display: block; width:90%; height:auto;">';
    echo '<img src="' . plugins_url('../assets/img/icon.png', __FILE__) . '">';


    woocommerce_form_field(
        'fidelity_code',
        array(
            'type' => 'text',
            'label' => __('Fidelity Code', 'fidelity-code-woo'),
            'class' => array('form-row', 'form-row-wide'),
            'required' => true,
        )
    );

    echo '</div>';

    $description .= ob_get_clean();

    return $description;
}

And my script.js file is the one that i posted before

jQuery(document).ready(function ($) {
  $("#fidelity_code").on("change", function () {
    console.log("It's work"); //Does not work
  });
});