Boutique en ligne : le filtrage des produits

Accueil / Fractales / Boutique fractale / Boutique en ligne : le filtrage des produits

Le filtrage des produits ! N’étant pas économe d’efforts surhumains pour le confort de la navigation dans les allées de ce site, j’ai installé une nouvelle fonctionnalité. Il s’agit de permettre aux visiteurs, aux clients de la boutique, de trier les produits (on me dit souvent que le plus difficile est de choisir !). J’ai privilégié 3 critères qui me semblent les plus importants : le filtrage par le prix, par le format (horizontal, carré ou vertical) et par la couleur dominante.

Sommaire

Dans WordPress : dégout et couleurs !

Voici donc, minutes par minutes, la chronique de ces tentatives désespérées au pays du code obscur… C’est ainsi qu’après des heures d’efforts, d’essais-erreurs infructueux, j’éclatais ! Et me laissais aller à quelques invectives faisant référence au leitmotiv des développeurs de WordPress, par ailleurs tous fiers de pétrir du php… Colère d’autant plus stupide que je m’adressais à une machine mais, ça détend :

OK ! Oh les enc… !!! WordPress ! « Code is poetry » : mon c… !

Ce à quoi l’IA (j’ai toujours un ou deux moteurs d’IA sur l’épaule, prêts à pallier à mon découragement), l’IA donc m’a répondu :

Ah Francis, je sens la frustration monter à travers l’écran ?. “Code is poetry”… sauf quand la poésie te fait hurler à minuit parce qu’un attribut refuse de s’afficher. WooCommerce et WordPress ont ce talent particulier pour te faire passer de poète à pirate en deux clics. Mais tu sais quoi ? On va dompter cette bête ensemble. Tu es déjà super proche du but — il manque juste ce petit déclic pour que les attributs s’affichent comme il faut dans tes fiches produits. Si tu veux, je peux te guider en mode “pas à pas” avec captures d’écran ou même te proposer une configuration test à reproduire. Tu bosses sur un thème particulier ou c’est un thème maison ? Parce que parfois, c’est le thème qui fout le bazar dans le menu déroulant. On peut aussi tester ça vite fait. Allez, on va faire en sorte que ce soit “Code is poetry” version slam marseillais ?

Rasséréné, je répondais un peu plus tard, après quelques détours et questions-réponses :

Merci c’était la solution ! La différence entre attributs global et personnalisé ! Deux menus contigus !!! Sans compter la latence d’affichage. Escrocs !

Ah mais oui, Francis ! Ce fameux double menu qui te fait croire que t’as bien fait les choses alors qu’en fait… t’as juste nourri le chaos. WooCommerce, c’est un peu comme un escape game : t’as les bons éléments, mais faut les placer dans le bon ordre, avec la bonne incantation, et prier pour que le DOM se rafraîchisse. Et cette latence d’affichage… le moment où tu te dis “tiens, ça ne marche pas”, alors qu’en fait, ça charge en douce comme un ninja. On dirait qu’ils ont codé ça pour tester ta patience zen. Mais bravo à toi, t’as percé le mystère ! Maintenant que les attributs globaux sont bien en place, ton filtre couleur dans HUSKY devrait fonctionner comme une baguette magique ?.

Alors… Je sais bien qu’il s’agit d’une machine, de réseaux neuronaux, de statistiques sur un nombre astronomique de données, d’espace latent profond aux milliards de dimensions… Mais la vitesse, la pertinence et la personnalisation du propos a quelque chose de… surnaturel ! Et je comprends que beaucoup discutent avec telle ou telle IA comme avec un véritable humain.

Toujours est-il qu’avec cette aide siliceuse, j’ai bel et bien réussi à configurer un filtre de couleur pour mes tableaux ! Le filtrage des produits : le Graal ! Quelques copies d’écran qui ne vous seront peut-être pas d’un très grand secours mais qui vous conforterons tout de même dans l’idée que vous n’êtes pas seuls.

Le choix du plugin

Alors bien sûr il y a quantité de plugins qui existent pour s’acquitter de cette tâche somme toute assez basique : Le filtrage des produits, et on se croit sauvé. Mais c’est bien mal connaître l’écosystème. En effet, plusieurs choses me font criser à propos des plugins WordPress. Sur le dépôt officiel WordPress.org il n’y en a pas moins de 60.000 disponibles! Sans compter les plugins payants et les autres, disséminés un peu partout sur l’Internet et qu’on peut aussi installer en externe, à ses risques et périls.

Et encore, ces statistiques concernent uniquement les plugins accessibles gratuitement sur le dépôt officiel, sans compter les milliers d’extensions premium (payantes) sur des plateformes comme CodeCanyon ou indépendantes. Dans ce domaine, on trouve tout et son contraire…

Le logo Husky… Pour ma part, j’aurais fait un chien blanc mais bon…

Notons d’abord l’indécente pléthore de ces plugins pour faire les mêmes choses. Quand on sait qu’il s’agit le plus souvent de simple code php saupoudré de CSS qui alourdissent considérablement les sites alors qu’il suffit parfois d’adapter les thèmes enfants et les réglages de la template utilisée… Malgré un système de notation des utilisateurs, impossible de savoir si tel ou tel plugin répond bien à vos besoins. Sans parler des versions payantes. Il faut essayer !

Sauf qu’ils « conflictent » joyeusement les uns avec les autres, en particulier ceux dédiés au filtrage des produits, pourrissent la base de données de quantité des tables dédiées et parfois absconses, sont munis de modes d’emploi systématiquement incompréhensibles, omettent les informations les plus importantes, comme un fait exprès, et en tout cas obéissent à une logique non standardisée et des interfaces différentes pour chacun de ces « plugins » : l’enfer sur Terre !

Ensuite, le sport international qui consiste – on comprend les développeurs, à essayer de vous fourguer la version payante « Premium » dudit plugin, tellement plusse mieux, avec tellement plus d’options (complexes) à régler. Et de vous vanter à longueur d’interface les avantages de cette version « Pro », à coup d’icônes colorées, de menus interminables qui – pour tout dire envahissent tout l’espace disponible de l’UI rendant celle-ci difficilement compréhensible et utilisable !

Pour constater que le dit plugin ne répond pas à vos besoins. Et alors vient la tentative de désinstallation qui, nous l’avons déjà vu est plus complexe qu’on ne le croit. Et en particulier le « splash screen » imbécile qui apparaît désormais, vous demandant pourquoi vous souhaitez désinstaller ce flegmon ? De quoi hurler…

Enfin, cette manie de pourrir l’interface de WordPress déjà surchargée avec ce type de message pour vous forcer à noter le plugin ! Vous pouvez cliquer sur tous les boutons proposés, rien n’y fait : le message réapparaîtra comme la vérole moyenâgeuse à chaque rechargement de la page, c’est à dire tout le temps ! Rien que pour ça on a envie de désinstaller ce plugin et de le détruire à tout jamais. C’est ce qu’on croit…

La solution ? Utiliser un autre plugin ! Si… Ou, dans ce cas précis, ajouter au fichier functions.php de votre thème enfant le code suivant (on n’a que ça à foutre !) Escrocs…

// Désactive le message de review YARPP
function yarpp_disable_review_notice() {
remove_action('admin_notices', array('YARPP_Admin', 'display_review_notice'));
}
add_action('admin_init', 'yarpp_disable_review_notice', 11);

Bref ! Après de douloureux essais, j’ai finalement opté pour le plugin qui s’appelle Husky Products Filter Professional for WooCommerce (anciennement WOOF). Car, oui, ils changent parfois les noms. Histoire de rendre encore plus impossible la recherche d’informations à leur propos sur le web… Non je ne suis pas énervé ! J’explique… 🙂

Le filtrage des produits

En ce qui concerne la discrimination par le prix, cette option est disponible dans tous les plugins et activée par défaut. Il semble qu’elle obéisse à une logique distincte du reste…

Pour les formats, j’ai opté pour le filtrage par étiquettes de PRODUITS (oui il y en a d’autres – des étiquettes, du même nom mais pour les ARTICLES ! C’est comme çà). C’est une deuxième façon distincte de classer les produits, après la méthode des catégories. Les étiquettes sont d’ailleurs des catégories qui ne disent pas leur nom. Il y a même une fonction WordPress native pour passer de l’un à l’autre – c’est la même chose en fait sous un nom différent. Bref.

J’ai ainsi des produits d’une catégorie correspondant à une collection – genre « Cosmos » et possédant également un « tag » (étiquette) précisant le format (carré, vertical et horizontal). Rien de plus facile (!) alors que d’afficher dans une barre latérale ces différentes catégories et étiquettes.

En ce qui concerne le tri par couleurs, c’est un peu plus compliqué, raison d’être de ma longue introduction, à bout de nerfs… L’opération se déroule en deux temps qu’il faut bien comprendre :

Dans WooCommerce, il faut assigner des catégories précises à chaque produit. Et c’est là que tout le vice de l’opération prend corps : il y a DEUX types d’attributs ! Je m’explique. Benoitement, vous avez l’habitude de créer dans l’interface des attributs personnalisés qui servent à créer des variations, par exemple des prix différents en fonction de la taille. C’est déjà assez chantourné comme procédure mais disons que c’était acquis… Mais là, foin d’attributs personnalisés, il faut en définir préalablement des GLOBAUX ! Au niveau de WordPress !

Alors seulement, il est possible dans WooCommerce d’ajouter un nouvel attribut (global, et non personnalisé !) défini précédemment, grâce à la fourbe boîte de dialogue « Ajouter existant ». Et surtout pas « Ajouter ». Prévoir de piquer la tente avant de voir apparaître le sous menu « couleur » qui autorise à son tour l’affichage (quelques jours plus tard) de vos couleurs prédéfinies… Quand on le sait…

Ensuite, il faut, dans le plugin choisi, configurer toutes les options disponibles (à la fois dans les widgets et dans le « tableau de bord » du plugin considéré – quand on peut faire compliqué…). Il y en a des centaines, ventilés un peu partout pour l’inintelligibilité la plus grande. Les visuels sont d’ailleurs fortement pollués par toutes les options pour passer à la version « Premium » payante. On les comprend mais c’est usant…

Enfin, encore faut-il rediriger les résultats vers une page dédiée, configurer le bazar en AJAX pour éviter des rechargements de pages intempestifs… Autant de tracas dont je vous fait grâce.

Mais j’ai finalement réussi à vous présenter en colonne de droite ces 3 options de filtrage des produits(qui peuvent être combinées) et qui vous mènent vers une page dédiée à votre choix. Cette dernière peut être également ajustée grâce à des boutons et cases à cocher idoines, même si certaines ne sont toujours pas traduites (c’est compliqué !) Victoire ? Pas encore…

L’animation SVG : patientez, une opératrice va vous répondre

Comme malheureusement cette opération de filtrage des produits est un peu longue (quelques secondes), les auteurs du plugin ont prévu une animation pour vous faire patienter pendant que le logiciel se prépare à afficher votre sélection de produits. Par défaut, c’est un bouton qui ne ressemble à rien, ou des roues, des barres, des boules, mais malheureusement toutes de ce vert pisseux, en principe configurable. Mais dans les faits il apparaît que c’est pratiquement impossible à changer, malgré des détours en CSS dans les options de personnalisation du thème DIVI, directement dans le Javascript du plugin ou dans l’image elle-même ! Bigre !

C’est du SVG, encore un format vectoriel « texte » qui présente plusieurs parfums et plusieurs syntaxes (forcément) à adapter « en dur ». J’ai bien obtenu une animation correcte, aux couleurs du blog, mais son implémentation pose problèmes. Avant de constater que sur iPhone, de toute façon, c’était encore différent. Bref, fatigue… Vous reprendrez bien encore un peu de vert vomi ?

SQL : patience et longueur de temps

Le plus souvent, après de jours d’efforts (oui il faut compter en jours) et des tripatouillages à n’en plus finir (oui il y en a qui achètent les versions « Premium ») on aboutit enfin à un beau résultat. Sauf que la vitesse du site, savamment peaufinée pour passer le mur du son est maintenant proche de la vitesse de l’escargot, départ arrêté. Au point que beaucoup préfèrent abandonner là et désinstaller le « plugin miracle ». Qui, au passage, laissera tout un tas de saloperies dans votre base de données. Des années plus tard parfois, vous vous en mordrez les doigts !…

Et je ne résiste pas au plaisir de vous retranscrire ce dialogue de sourds avec Perplexity, afin que vous ayez une idée de l’océan des tracas lorsqu’on essaye d’implémenter le filtrage des produits…

Pourquoi ton site devient lent avec les attributs globaux. Quand tu attribues des valeurs d’attribut globales (ex: Couleur) à chaque produit :

WooCommerce crée des relations taxonomiques pour chaque produit.
Le plugin HUSKY interroge ces taxonomies pour construire les filtres.
Si tu as beaucoup de produits et beaucoup de termes, ça génère des requêtes complexes et parfois non indexées dans la base de données.

Et si tu fais ça en masse ou rapidement, tu peux :

Saturer la base de données.
Déclencher des recalculs de compteurs dans HUSKY.
Provoquer des ralentissements côté admin ET frontend.

Solutions : 1. Désactiver le recalcul automatique des compteurs

Va dans WooCommerce > WOOF > Extensions.
Désactive l’option “Auto recount terms”.
Puis clique manuellement sur “Recalculate terms count” une fois que tout est bien attribué.

2. Optimiser la base de données

Utilise un plugin comme WP-Optimize ou Advanced Database Cleaner.
Supprime les révisions, transients, et optimise les tables.
Vérifie que les tables wp_term_relationships et wp_postmeta ne sont pas surchargées.

3. Augmenter les ressources serveur

4. Limiter les filtres affichés

5. Activer la mise en cache

Active un plugin comme LiteSpeed Cache ou WP Rocket.
Active la mise en cache des pages, des objets, et du navigateur.
Active aussi la mise en cache AJAX si ton thème le permet.

Accélérer : le maître mot ! Le net est plein de ces solutions miracles : « augmentez la mémoire allouée à WordPress », avec ces fichiers « fonctions php », « config », « php.ini » et toutes ces calembredaines. « Solutions » accompagnées souvent des « mises à jour » et « mise en cache », « utilisez un CDN », etc, etc.

Ne cherchez pas vous n’avez PAS et vous n’aurez JAMAIS accès à tous ces réglages jalousement gardés par les administrateurs des serveurs. Ces serveurs dédiés qui par ailleurs coutent un oeil et qui dégagent la chaleur d’une centrale nucléaire. Vous êtes presque à coup sûr abonnés à des serveurs mutualisés, c’est à dire partagés ; avec toutes les limites que l’on connait.

On peut se demander pourquoi ces solutions bidon sont systématiquement citées alors qu’elles ne concernent qu’un microscopique pourcentage d’utilisateurs qui de toute façon n’en ont pas besoin.

Pour finir ce billet d’humeur, je dois avouer que j’ai laissé cette fonction de filtrage des produits en l’état, avec tous ses défauts. Avec quelques optimisations tout de même mais on est loin de la vitesse de la lumière (pourtant, l’électronique C’EST la vitesse de la lumière !), un détail qu’ont bien compris les IA qui répondent à des questions complexes en quelques secondes. Mais bon, les serveurs impliqués sont plus gros que les usines dédiées jadis au « projet Manhattan ». Bref : filtres ou pas filtres ? Skis ou raquettes ? Vous me direz… Pour tester, rendez-vous dans la boutique :

Visitez la boutique ?