Правильный способ добавить "OnChange" в элемент выбора woocommerce?

Question

Мне нужно добавить onchange="myFunction()" к моему выбору внизу. Однако нижеприведенный выбор сделан из woocommerce, и я хочу, чтобы при обновлении моей темы он оставлял onchange="myFunction()".

Каков наилучший способ добиться этого? (Должен ли я go в woocommerce и редактировать файл с помощью выбора?)

<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color" data-show_option_none="yes">

<option value="">Color</option>
<option value="black" class="attached enabled">Black</option>
<option value="brown" class="attached enabled">Brown</option>

</select>

Или я могу использовать javacript для добавления onchange="myFunction()" в <select id="pa_color">, чтобы он сохранялся при обновлении моего тема

Answer 1

Вы можете создать плагин, если хотите добавить некоторые пользовательские функции js и сохранить его после обновления или изменения темы, скажем, вы называете его my-awesome-plugin. php и выгружаете этот файл в / wp -content / plugins / my-awesome-plugin folder.

Файл плагина может содержать следующее:

<?php
/*
Plugin Name: My Awesome Plugin
Plugin URI: http://example.com
Description: A plugin that loads an awesome js file.
Author: John Doe
Author URI: http://example.com
version: 1.00
*/

add_action('wp_enqueue_scripts','my_awesome_plugin_load_js');

function my_awesome_plugin_load_js() {
    wp_enqueue_script( 'my-awesome-js', plugins_url( '/js/my-awesome-js.js', __FILE__ ), array('jquery'));
}

А в папке плагина создайте папку / js / и добавьте файл my-awesome-js.js

Когда вы активируете свой плагин, он должен загрузить файл my-awesome- js. js.

Внутри этого файла вы можете добавить свой слушатель.

jQuery(function ($) {
  'use strict';


    $('#pa_color').change(function() {
       // here is your value and you can do whatever you want to do with it.
       var value = $(this).val();

    });

});