I create custom plugin that to add new admin page ( payments settings) this page show all payments methodes with toggel to active and show setting button to this method or deactive it like this I have code to js file
(function ($) {
$(document).on('change', '.wsd-plugin-controller-toggle', function () { //checkbox
let initiator = $(this),
data = {
'action_type': initiator.data('state'),
'plugin_slug': initiator.data('plugin-slug')
};
$.ajax({
url: plugins_controller.ajax_url,
type: "POST",
data: {
data,
action: 'myajaxfunction_check',
nonce: plugins_controller.ajax_nonce
},
beforeSend: function (xhr) {
xhr.setRequestHeader('X-WP-Nonce', plugins_controller.ajax_nonce);
initiator.closest('.wsd-toggler').find('.wsd-loading').toggleClass('visible');
},
success: function (response) {
console.log(response);
initiator.data('state', response.state);
if (initiator.data('reload')) {
location.reload();
}
$(document).trigger('wsd-plugin-state-updated', [initiator, response]);
initiator.closest('.wsd-toggler').find('.wsd-loading').toggleClass('visible');
},
error: function (response) {
console.log('error', response);
initiator.prop('checked', false);
$(document).trigger('wsd-plugin-state-update-failed', [initiator, response]);
initiator.closest('.wsd-toggler').find('.wsd-loading').toggleClass('visible');
}
});
});
})(jQuery);
And in my html I have this
<td class="title">
My Fatoorah
</td>
<td class="status">
<div class="wsd-toggler">
<input id="toggler-csCeE5" type="checkbox" class="wsd-toggler-input wsd-plugin-controller-toggle" data-plugin-slug="myfatoorah-woocommerce/myfatoorah-woocommerce.php" data-state="activate">
<label for="toggler-csCeE5" class="check-trail wsd-toggler-shape">
<span class="check-handler wsd-toggler-handler"></span>
</label>
<img src="\wordpress\wp-content\plugins\plugins-controller\spinner.svg" class="wsd-loading" alt="loading">
</div>
</td>
<td class="moderate">
<select class="wsd-payment-popup-select wsd-hidden" onchange="location = this.value;">
<option selected="" disabled="" hidden="">إدارة</option>
<option value="/wordpress/wp-admin/admin.php?page=wc-settings&tab=checkout&section=myfatoorah_direct">
الدفع المباشر
</option>
<option value="/wordpress/wp-admin/admin.php?page=wc-settings&tab=checkout&section=myfatoorah_v2">
كارت
</option>
</select>
</td>
</tr>
All things as css code is work But I don't know what I should ADD in my action function myajaxfunction_check
at my plugin that to update plugin state and active/ deactive should I use api to do that ? I add this code but not working well
add_action('admin_enqueue_scripts', 'load_payment_style');
function load_payment_style()
{
wp_enqueue_style('plugins_controller_style', plugins_url('style.css', __FILE__));
wp_enqueue_script('plugins_controller', plugins_url('plugins_controller.js', __FILE__));
wp_localize_script(
'plugins_controller',
'plugins_controller',
array(
'ajax_url' => admin_url('admin-ajax.php'),
'ajax_nonce' => wp_create_nonce('plugins_controller')
)
);
}
function myajaxfunction()
{
add_action('wp_ajax_nopriv_ccbs_ajax_function', 'myajaxfunction_check');
add_action('wp_ajax_ccbs_ajax_function', 'myajaxfunction_check');
}
add_action('admin_init', 'myajaxfunction');
function myajaxfunction_check()
{ global $state;
if( !empty($_POST['nonce']) && wp_verify_nonce( $_POST['nonce'], 'plugins_controller' )
) {
$response['code'] = " sucsess " . $_POST['nonce'] .$state."active" ;
} else {
$response['response'] = "You didn't send the param";
array(
'active'=>$state,
);
}
header( "Content-Type: application/json" );
echo json_encode($response);
// Don't forget to always exit in the ajax function.
exit();
}
Thank you .