(Wiki página de Backend Frontend Template Pro: the WordPress Plugin Template)

Es fácil añadir AJAX en tus shortcodes:

1. Shortcode inicial
   1. Explicación El shortcode no cambiará,el único cambio está en la página parcial, esa página tendrá los datos JavaScript AJAX Puedes usar tu propio método, pero BFT usa jQuery, las funciones proporcionadas por $this->bft_ajax_functions() están preparadas para ser impresas dentro de un script jQuery $this->bft_ajax_functions() provee funcioens JavaScript para mostrar error en el contenedor seleccionado y borrar los datos HTML en el contenedor principal:
      • bft_pro_error_wordpress_show(response_array, id_container_error, id_container_success = “”)
      • bft_pro_error_conection_show(jqXHR, textStatus, errorThrown, id_container_error, id_container_success = “”)
      Para la parte WordPress, es necesario:
      • AJAX URL, lo proporciona Backend Frontend Template con la variable bft_pro_ajax_url
      • Action data, from a form or created by code:
        var form_data = []; var data = {}; data[“name”] = ‘action’; data[“value”] = “bft_shortcode_ajax_test_response”; form_data.push(data);
   2. Ejemplo completo <div id=”bft_shortcode_ajax_test_response_container”></div> <div id=”bft_shortcode_ajax_test_response_error_container”></div> <!– <form method=”post” action=”#” name=”bft_shortcode_ajax_test_response” class=”bft_shortcode_ajax_test_response” id=”bft_shortcode_ajax_test_response”> <input type=”hidden” name=”action” value=”bft_shortcode_ajax_test_response”> </form> –> <script> (function( $ ) { “use strict”; function bft_shortcode_ajax_test_function () { var form_data = []; var data = {}; data[“name”] = “action”; data[“value”] = “bft_shortcode_ajax_test_response”; form_data.push(data); //var form_data = jQuery(“#bft_shortcode_ajax_test_response”).serializeArray(); jQuery.ajax({ url : your_plugin_ajax_url, type : “post”, data : form_data, success : function( response ) { console.log(“<?=$this->__(“AJAX successful”)?>”) console.log(response); if (typeof response.success !== “undefined” && false === false) { console.log(“<?=$this->__(“AJAX failed”)?>”); <?=$this->plugin_slug?>_error_wordpress_show(response, “bft_shortcode_ajax_test_response_error_container”, “bft_shortcode_ajax_test_response_container”); } else { $(“#bft_shortcode_ajax_test_response_container”).html(response.data.html); } }, fail : function( jqXHR, textStatus, errorThrown) { console.log(“<?=$this->__(“AJAX failed”)?>”); <?=$this->plugin_slug?>_error_conection_show(jqXHR, textStatus, errorThrown, “bft_shortcode_ajax_test_response_error_container”, “bft_shortcode_ajax_test_response_container”); } }); } bft_shortcode_ajax_test_function(); <?=$this->bft_ajax_functions()?> })( jQuery ); </script>
2. respuesta AJAX
   1. Definiendo una Acción AJAX de WordPress Las respuestas AJAX son definidas en includes -> class-your-plugin -> define_public_hooks() La estructura de una respuesta AJAX es doble, WordPress separa los usuarios logeados de los usuarios no logeados: //AJAX response for logged users $this->loader->add_action( ‘wp_ajax_ajax_response_function_name’, $plugin_public, ‘ajax_response_function_name’ ); //AJAX response for non logged users $this->loader->add_action( ‘wp_ajax_nopriv_ajax_response_function_name’, $plugin_public, ‘ajax_response_function_name’ );
   2. Definiendo a función Esta función no tiene variables, todos los datos pasados serán datos POST Para preparar los datos de vuelva, BFT usa esta estructura: $data = array(); $data[“html”] = $html; $return = [ “error” => [], “data” => $data, ]; Para senviar los datos, la función usará las funciones de WordPress wp_send_json() y wp_die() wp_send_json($return); wp_die();
   3. Devolviendo un error Backend Frontend Template provee la función $this->error_send_json(“Error text”) $this->error_send_json() devolverá el JSON y parará la ejecución del código
   4. Ejemplo completo private function define_public_hooks() { //bft_shortcode_ajax_test_response $this->loader->add_action( ‘wp_ajax_bft_shortcode_ajax_test_response’, $plugin_public, ‘bft_shortcode_ajax_test_response’ ); $this->loader->add_action( ‘wp_ajax_nopriv_bft_shortcode_ajax_test_response’, $plugin_public, ‘bft_shortcode_ajax_test_response’ ); } public function bft_shortcode_ajax_test_response( ) { ob_start(); require plugin_dir_path( dirname( __FILE__ ) ) . “public/partials/your-plugin-shortcode-ajax-test-response.php”; $html = ob_get_clean(); $data = array(); $data[“html”] = $html; $return = [ “error” => [], “data” => $data, ]; wp_send_json($return); wp_die(); return $html; }
3. Pruébalo tu mismo Crea una page, inserta un bloque de shortcode y pon [bft-shortcode-ajax-test]