Créer une autocomplétion des catégories produits WooCommerce

J’ai récemment eu l’occasion de développer un site e-commerce sous WordPress avec WooCommerce et ai eu besoin d’ajouter une auto-complétion sur le champ de recherche afin de proposer rapidement à l’utilisateur un menu déroulant des catégories produits. Découvrez ici comment mettre tout ça en place !

L’intérêt ici est de proposer un joli menu d’auto-complétion sous un champ de recherche de votre site WordPress e-commerce ; cet autocomplete proposera, en accord avec les lettres déjà entrées dans le champ par le visiteur, les catégories de produits correspondantes et après sélection d’une catégorie, notre système redirigera automatiquement le visiteur vers la page du catalogue de cette dite catégorie.

En cliquant sur le lien ci-dessous, vous arriverez sur le site e-commerce que j’ai développé : commencez à taper quelques lettres dans le champ de recherche et avec un peu de chance, l’auto-complétion s’affichera et vous proposera des catégories du catalogue produits.
Voir la démo

Les ingrédients

Pour mener à bien notre recette, voici les ingrédients nécessaires :

  1. un site WordPress e-commerce propulsé par WooCommerce ou Jigoshop (les 2 ayant la même taxonomie de produits product_cat)
  2. un fichier template searchform.php afin d’éditer la structure HTML du champ de recherche de votre thème
  3. un fichier template Javascript afin d’étendre un peu les fonctionnalités de …
  4. … la librairie Awesomplete : en plus d’être très légère et simple à utiliser, elle ne dépend d’aucune autre librairie comme jQuery et son fonctionnement utilise les <datalist>, les tags de listes de choix HTML5

Il vous faudra donc installer dans votre thème le style CSS awesomplete.css et la logique Javascript awesomplete.js proprement : ce tutoriel vous expliquera clairement comment le faire.

Un zeste de template : édition du champ de recherche WordPress

Si vous parcourez un peu la documentation décrivant l’utilisation du plugin Awesomplete, vous verrez qu’il est nécessaire d’effectuer 2 ajouts sur l’input du champ de recherche (une classe et un attribut list).
Dans votre thème, éditez le template searchform.php afin :

  1. d’ajouter une classe awesomplete à l’input
  2. d’ajouter un attribut list à l’input indiquant l’ID de la liste (la <datalist> que nous allons générer un peu plus loin) et qui permettra au plugin (et aux navigateurs modernes) de savoir quelle liste de termes doit être associée à ce champ texte pour l’auto-complétion
  3. de générer une liste <datalist> des termes à proposer dans l’autocomplete (nous la placerons juste après l’input par souci de lisibilité). Nous allons donc créer une fonction msk_generate_products_categories_datalist() qui nous permettra cela
<form method="get" class="searchform" action="<?php echo home_url( '/' ); ?>" >
	<input type="text" class="awesomplete field s" name="s" autocomplete="off" value="<?php _e( 'Search...', 'chabadabada' ); ?>" list="products_cats" />
	<?php msk_generate_products_categories_datalist(); ?>
	<button type="submit" class="fa fa-search submit" name="submit" value="<?php _e( 'Search', 'chabadabada' ); ?>"></button>
</form>

Un soupçon de PHP : générer la liste de données pour peupler l’auto-complétion

Dans votre fichier functions.php, nous allons maintenant créer cette fameuse fonction msk_generate_products_categories_datalist() qui générera le markup HTML nécessaire pour que le plugin propose un choix de catégories en autocomplete.


/*
 * Générer une data-list des catégories produits pour l'autocomplete du searchform
 */
function msk_generate_products_categories_datalist() {
	echo '<datalist id="products_cats">';
	echo '<!--[if lte IE 9]><select disabled style="display:none"><![endif]-->';

	$products_cats = get_terms('product_cat');

	foreach ($products_cats as $cat) :

		$cat_id = $cat->term_id;
		$cat_name = $cat->name;
		$cat_link = get_term_link($cat, 'product_cat');

		echo '<option value="' . $cat_link . '">' . $cat_name . '</option>';

	endforeach;

	echo '<!--[if IE 9]></select><![endif]-->';
	echo '</datalist>';
}

La fonction get_terms(‘product_cat’) fait le travail principal : c’est elle qui liste toutes les catégories produits composant votre boutique WooCommerce ou Jigoshop. Les arguments par défaut proposant de récupérer TOUTES les catégories non-vides, cela nous conviendra parfaitement.

Nous utilisons alors ici un tag <datalist> peuplé de multiples <option> dont leur valeur stockera l’adresse URL de la catégorie et le nom affichera le nom de la catégorie produit.

Notez également la présence d’un tag conditionnel pour Internet Explorer 9 et inférieur ; ces navigateurs ne sachant pas interpréter les <datalist>, nous générons un menu déroulant <select> caché pour éviter que les termes générés soient affichés en dur sur la page.

jQuery(document).ready(function($){

var $searchform = $('#header .searchform .s');
var $searchdatalist = $('#header .searchform datalist option');

$searchform.on('awesomplete-selectcomplete', function(e){
var input_value = $(this).val();

var selected_el = $searchdatalist.filter(function(){
return $(this).text() == input_value;
});

var selected_val = selected_el.length ? selected_el.val() : false;

if (selected_val) location.href = selected_val;
});
});

Un nuage de Javascript : rediriger l’utilisateur lors de la sélection d’un terme

Par défaut, la librairie Awesomplete ne fait que proposer des choix de termes lorsque l’utilisateur commence à écrire dans l’input de recherche WordPress. Il nous faut donc pouvoir le rediriger vers la page de la catégorie produit lorsqu’il sélectionne un choix proposé par l’auto-complétion.

C’est la fonction du script ci-dessus. Il vous faudra évidemment éditer les deux premiers sélecteurs jQuery dans les premières lignes :

  1. $searchform fait référence à l’input de recherche
  2. et $searchdatalist fait référence aux <option> (donc aux termes) de la <datalist> générée

Le plugin offre l’événement awesomplete-selectcomplete qui nous permet d’exécuter notre code lorsqu’un choix d’autocomplete est sélectionné par l’utilisateur : il nous suffit alors de filtrer les noms des termes de la <datalist> et d’analyser ce nom avec le contenu du champ de recherche. Dès que le terme choisi est trouvé dans notre boucle, on récupère l’adresse URL stockée dans l’attribut value avec val() et on redirige l’utilisateur vers la page de la catégorie avec location.href.

Conclusion

Vous voila désormais avec un joli champ de recherche proposant aux utilisateurs les catégories de vos produits en auto-complétion. Evidemment, avec de simples modifications dans la fonction msk_generate_products_categories_datalist(), vous pouvez très facilement étendre la nature et la liste des termes proposés. Il serait intéressant par exemple d’ajouter d’autres <option> à la liste pour lister les catégories ou tags d’articles, voire même une liste des produits de la boutique e-commerce.

A vous de jouer !


Vous avez aimé cet article ?

Partagez-le sur vos réseaux sociaux en guise de remerciement :)


Laisser un commentaire