JQuery (ou Ajax) + Wordpress

Bonjour à tous,

C'est mon premier post ici, je n'ai pas vu d'onglet "présentation" par exemple, alors je passe directement à ma question. Merci en tout cas pour ce forum !

Alors voilà : je suis en train de faire un site avec Classipress (thème de site d'annonces) sous Wordpress. Je suis tout à fait novice avec JS, jQuery et autres AJAX...

En gros, Classipress est très bien mais je voudrais avoir une fonctionnalité type leboncoin ou vivastreet concernant les champs spécifiques en fonction des catégories de recherche. Par exemple, si on choisit "Voiture", on devrait voir apparaître (automatiquement, sans rafraîchissement de la page) des listes comme "énergie", "année", "km", etc.

Cela (chez Classipress ça s'appelle refine-search) est disponible avec classipress mais après un rafraichissement de la page, une fois qu'on a cliqué sur la catégorie.

J'ai donc cherché toute la journée (j'en peux plus) mais je n'ai rien trouvé de concluant pour mettre tout ça en place.

Voici quand même les infos :
- j'ai identifié la fonction wordpress lançant ce refine-search. Elle s'appelle cp_show_refine_search()
- mon idée était de chopper la value de la catégorie à choisir dans la liste, de la mettre en paramètre de la fonction cp_show_refine_search() et de rebalancer ça dans la page.

J'ai réussi à faire un essai rapide avec du javascript pour écrire un petit texte sous le select en fonction de la valeur, mais rien de plus...

Il faudrait pouvoir appeler une fct php du javascript, j'ai essayé plein de choses, mais ça ne fonctionne pas.

Par exemple : le but ici était de lancer la fonction située dans refine au clic sur "Click Me!", mais ça ne fait rien :

<script type="text/javascript">
				function doSomething() {
					jQuery.get("refine.php"); //utiliser jquery et non $ sur wp
					return false;
				}
				</script>

				<a href="#" onclick="doSomething();">Click Me!</a>

Pareil ici :

<script type="text/javascript">
				 function doSomething() {
					 jQuery.ajax({
					   url: 'refine.php',
					   success: function(data) {
						 alert('Directory created');
					   }
					 });
				 }
				</script>

				<a href="#" onclick="doSomething();">Click Me!</a>

Avec refine.php :

<?php
//lance la fonction pour l'appeler dans le javascript
    cp_show_refine_search( get_query_var( 'scat' ) );
?>

J'ai testé plein d'autres choses, mais je ne vois pas du tout ce qu'il faudrait faire pour avancer le schmilblick.

Merci beaucoup si vous pouvez m'aider.
Modifié par Pauluxi (18 Mar 2015 - 21:08)

Il faut utiliser ceci pour lancer des requêtes ajax depuis wp : wp ajax

Il y a pleins d'autres exemples sur le net comme : tuto Ajax dans WordPress : la méthode simple

Aussi, c'est pas conseillé de faire de l'ajax lorsque l'on maitrise pas la base et un peu ce que l'on fait.

Sur Le bon coin, c'est juste des champs de formulaire cachés en js avec "display:none", ce qui est beaucoup plus simple à faire.
Modifié par bzh (18 Mar 2015 - 21:53)

Bonsoir bzh,

Merci pour la réponse rapide. Elle me redonne espoir ! J'étais tombé sur les liens que tu m'as envoyé aussi, je crois que j'ai parcouru une bonne partie de ce qui se fait en WP + jQuery ou Ajax .

C'est vrai que c'est assez obscur de l'extérieur comme ça, mais il faut bien s'y mettre un jour ou l'autre !

Je vais travailler avec ce que tu m'as donné !

---
Edit

J'ai avancé de plusieurs grands pas.

Voici où j'en suis (grâce aux liens de bzh).

script.js

jQuery('body').on('change', '#scat', function() {   //surveille les changements dans l'ID scat, donc le choix des catégories !
	
// repérer la valeur choisie et la stocker  http://javascript.developpez.com/faq/javascript/?page=formChamps
 
  	var valeur;
	valeur = document.getElementById("scat").options[document.getElementById('scat').selectedIndex].value;  

	jQuery.post(
	   
		ajaxurl,
	  {
			'action': 'mon_action',  // nom de la fonction à faire (elle est dans functions.php)
			'param': valeur    // valeur choisie par le visiteur (donc ID de la catégorie)
		},
		function(response){
			// on affiche la réponse où l'on veut
			//jQuery('.somewhere').append(response);  // bien mettre jQuery et non $ ou jquery
			console.log(response);
			jQuery('.textwidget').append(response); //afficher le résultat dans le textwidget !
		}
	);
});

et mon functions.php (du child-theme) :

<?php //child-theme functions.php

//if ( ! function_exists( 'add_js_scripts' ) ) {  // permet de ne pas avoir d'erreur si la fct existe déjà
		function add_js_scripts() {  // définition du script AJAX, voir  http://www.wp-spread.com/tuto-ajax-wordpress-methode-simple/
 
			wp_enqueue_script( 'script', get_stylesheet_directory_uri().'/js/script.js', array('jquery'), '1.0', true );

			// pass Ajax Url to script.js
			wp_localize_script('script', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
		}

//}
add_action('wp_enqueue_scripts', 'add_js_scripts');

add_action( 'wp_ajax_mon_action', 'mon_action' );
add_action( 'wp_ajax_nopriv_mon_action', 'mon_action' );

function mon_action() {

	$param = $_POST['param'];  // ID de la catégorie

	echo $param;
	// cp_show_refine_search( $param );

	die();
}

?>

Ce qui fonctionne : repérer le changement de catégorie en direct dans "scat", donc avoir l'ID de la catégorie. Je peux l'afficher dans la console ou n'importe où dans la page (pour l'instant, sous .textwidget). J'arrive même à faire ce que je voulais au départ !!!

Ce qu'il faudrait encore peaufiner :
1. quand ça tourne, que je sélectionne une catégorie, puis une autre, les deux ID se notent l'un après l'autre. Il faudrait supprimer le précédent quand le js repère un nouvel événement...
2. Le petit effet pour choisir la distance ou prix min / prix max n'apparaissent pas (voir image jointe : sur l'image ça apparaît, mais sur ce qui est généré par le JS, non). Une idée ?

Merci !
Modifié par Pauluxi (19 Mar 2015 - 00:45)