Archives mensuelles : février 2018

WordPress : Utilisation de l’ajax dans WordPress

Voici un post d’exemple sur l’utilisation de l’ajax dans WordPress. Nous allons voir à travers la création d’un mini plugin, comment lancer une requête ajax utilisant le système conçu pour ça dans wordpress.

Le plugin sera utilisable en plaçant le shortcode

[submit-input-ajax]

dans une page. La démonstration est ici

On avait déjà vu comment créer un plugin permettant l’utilisation d’un shortcode. Pour ajouter de l’ajax il faudra ajouter certains éléments « wp_ajax_ ». Le code fonctionnel du plugin est présenté ci-dessous :

/*
  Plugin Name: Plugin action ajax
  Description: Demonstration d'un plugin effectuant une action ajax
 */


class PluginActionAjax {

    public function __construct() {
        //shortcode permettant d'afficher le formulaire avec le champs input et le bouton de soumission
        add_shortcode('submit-input-ajax', array($this, 'shortcode_submit_input_ajax'));
        //chargement des scripts à inclures (css, js...)
        add_action('wp_enqueue_scripts', array($this, 'action_ajax_scripts'));
        //appel ajax de notre fonction "process_action_ajax" si l'utilisateur est loggé "wp_ajax_" ou si il ne l'est pas "wp_ajax_nopriv_"
        add_action('wp_ajax_process_action', array($this, 'process_action_ajax'));
        add_action('wp_ajax_nopriv_process_action', array($this, 'process_action_ajax'));
    }

    /**
     * génère le formulaire lorsqu'on utilise le plugin [submit-input-ajax]
     */

    public function shortcode_submit_input_ajax($atts) {
        $html = '<form class="submit-input-ajax-container">';
        $html .= '<div><label for="submit-input-ajax">Veuillez entrez une information et valider en cliquant sur le bouton</label></div>';
        $html .= '<input type="text" id="submit-input-ajax" />';
        $html .= '<button type="submit" id="btn-submit-input-ajax" >Valider</button>';
        $html .= '</form>';
        return $html;
    }

    /**
     * traite l'appel ajax
     */

    public function process_action_ajax() {
        //verifie l'existence non vide de l'input
        if (isset($_POST['input']) && $_POST['input'] != '') {
            //n'importe quel traitement
            $message = 'Voici votre message en sha1 : ';
            $message .= sha1($_POST['input']);
            //retour success
            wp_send_json_success(['message' => $message]);
        }
        //retour erreur
        wp_send_json_error(['message' => 'Impossible !']);
    }

    /**
     * Appel des fichiers js/css nécessaires au fonctionnement
     */

    public function action_ajax_scripts() {
        global $post;
        //si notre shortcode est présent dans le post courant.
        if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'submit-input-ajax')) {
            wp_enqueue_style('paa-style', plugin_dir_url(__FILE__) . '/styles.css');
            //ajout du script lancant la requete ajax
            wp_enqueue_script('paa-ajax', plugin_dir_url(__FILE__) . '/script.js', array('jquery'));
            //on informe le script précédent de l'adresse "adminAjax" de wordpress
            wp_localize_script('paa-ajax', 'adminAjax', admin_url('admin-ajax.php'));
        }
    }

}
new PluginActionAjax();

Il ne reste plus qu’a créer le fichier script.js qui lancera l’appel de « process_action » lors de la soumission du formulaire généré par le shortcode. Il contient le code suivant :

jQuery(document).ready(function () {
    /*lors de la soumission du formulaire, on vérifie que le champ est replie et on appelle notre action ajax*/
    jQuery(document).on("submit", ".submit-input-ajax-container", function (e) {
        e.preventDefault();
        var input = jQuery("#submit-input-ajax").val();
        if (input == "") {
            alert("Vous devez completer le champ ! ");
        } else {
            jQuery.ajax({
                //apel de l'url ajax wordpress
                url: adminAjax,
                method: 'POST',
                data: {
                    //nom de notre action déclaré dans le plugin "wp_ajax_..."
                    action: 'process_action',
                    input: input
                },
                success: function (data) {
                    alert(data.data.message);
                },
                error: function (data) {
                    //erreur
                }
            });
        }
    });
});

Pour des explication détaillées, vous pouvez vous rendre sur cette page

Jquery : Trier des éléments en fonction d’attributs data-*

Nous allons voir aujourd’hui comment classer des éléments d’une page en fonctions de certaines données (nom, position) grâce à quelques lignes de javascript.
La démonstration du résultat que l’on va obtenir est visible ici

On commence par créer notre html de manière classique, comme d’habitude j’importe bootstrap et jquery pour la forme et la simplicité.
En plus de ça on affiche dans notre page une série d’élément ayant la classe « card » ainsi que des attributs « data-position », « data-note » et « data-name » pour stocker les valeurs sur lesquelles on va effectuer le classement. On affiche auparavant un « select » qui nous permettra de choisir l’ordre que l’on souhaite afficher.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/style.css">
        <!-- JS -->
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script src="./js/custom.js"></script>
    </head>
    <body>
        <div class="container main-container">
            <div class="form-group">
                <label for="select-order">Classer par</label>
                <select class="form-control" id="select-order">
                    <option value="position">Position</option>
                    <option value="note">Note</option>
                    <option value="name">Nom</option>
                </select>
            </div>
            <div class="card-container row">
                <div class="item col-md-4" data-position="1" data-note="8" data-name="Paul">
                    <div class="card mb-3">
                        <img class="card-img-top" src="http://lorempixel.com/400/200/abstract" alt="illustration">
                        <div class="card-body">
                            <h3 class="card-title">Paul</h3>
                            <div class="card-subtitle">Position : 1</div>
                            <div class="card-text">Note : 8</div>
                        </div>
                    </div>
                </div>
                <!-- d'autres éléments avec différentes valeurs -->
            </div>
        </div>
    </body>
</html>

On va maintenant s’occuper du javascript qui nous permettra de réordonner les éléments, il s’agit de détecter le choix sélectionné et de lancer le tri (numérique, numérique inversé ou alphabétique) sur nos attributs data-*. Le code suivant est suffisant :

$(document).ready(function () {
    /* à la sélection du classement on met à jour */
    $(document).on("change", "#select-order", function () {
        updateOrder();
    });
    /* au chargement de la page on lance le classement */
    updateOrder();
});

function updateOrder() {
    var order = $("#select-order").val();
    if (order == 'position' || order == 'note' || order == 'name') {
        var divList = $(".card");
        if (order == 'position') { //tri numerique croissant
            divList.sort(function (a, b) {
                return  $(a).data(order) - $(b).data(order);
            });
        } else if (order == 'note') {//tri numerique decroissant
            divList.sort(function (a, b) {
                return $(b).data(order) - $(a).data(order);
            });
        } else if (order == 'name') { //tri alphabetique
            divList.sort(function (a, b) {
                var compA = $(a).data(order).toUpperCase();
                var compB = $(b).data(order).toUpperCase();
                return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
        }
        $(".card-container").html(divList);
    }
}