Une boutique WooCommerce avec Gridbuilder
WP Gridbuilder est une extension très complète qui permet de concevoir des grilles, des filtres et des vignettes pour tout type de contenus.
Dans cet exemple je l’utilise pour remplacer la liste d’affichage par défaut de WooCommerce pour les produits. Je montre notamment comment rendre contextuel l’affichage des produits dans une grille gérée par WP Gridbuilder. Par contextuel, j’entends que les produits affichés par la grille soient automatiquement filtrés en fonction de la catégorie courante.
Avant tout, afin de justifier l’utilisation de WP Gridbuilder, voici la grille standard WooCommerce :
Et voici ce qu’on obtient très simplement avec WP Gridbuilder en utilisant un des modèles proposés, par exemple la vignette Carnelian :
J’ai choisi de préserver la configuration WooCommerce de cette page comme la boutique afin de simplifier la gestion des constructions d’URL et du fil d’Arianne.
Il a donc fallu que je surcharge le modèle de page utilisé par WooCommerce pour générer la boutique en le plaçant dans le thème enfant :
/wp-content/themes/twentynineteen-child/woocommerce/archive-product.php
Ce fichier contient la boucle d’affichage des produits par WooCommerce que j’ai remplacée par le shortcode wpgb_grid de la grille 1 fourni par WP Gridbuilder :
Filtrer les produits par catégorie de manière contextuelle
Une fois cette manipulation effectuée, on se rend compte en cliquant sur les termes de catégories que la grille affiche tout le temps tous les produits, quelque soit la catégorie courante… alors qu’un cookie reste un cookie, et un donut un donut.
Grâce au tableau de bord fourni par WP Gridbuilder, il est bien entendu possible de configurer une grille pour qu’elle n’affiche que les produits d’une catégorie donnée. Mais il sera alors nécessaire de dupliquer autant de grilles et de surcharges de modèle de page WooCommerce qu’il y a de catégories de produits. Ce travail peut sembler envisageable pour quelques catégories, mais absolument cauchemardesque voire impossible pour des centaines voir milliers de catégories qui changeraient régulièrement.
La solution réside donc dans l’utilisation d’un hook fourni par WP Gridbuilder qui permet de filtrer la grille de manière programmatique :
wp_grid_builder/grid/query_args
Ce filtre comprend deux paramètres :
$query_argstableau qui contient les paramètres de la requête$grid_ididentifiant de la grille
Ce filtre repose sur l’utilisation d’une des requêtes WP_Query, WP_Term_Query ou WP_User_Query, selon le type de contenu filtré. Cela signifie que $query_args est formaté exactement de la même manière que lorsqu’on les utilise directement.
Par exemple, pour afficher uniquement les produits de la catégorie cookies:
Le code intégral
Le code à placer dans le fichier functions.php du thème enfant :
Ce filtre est appelé lors de l’affichage de toutes les grilles du site. Il est donc nécessaire de vérifier qu’il s’agit bien de la grille 1.
Ensuite, il est facile de récupérer le terme et la taxonomie courante dans le cas où la page affichée est celle d’une catégorie, puisqu’elles sont définies comme global. Sinon, dans la page boutique, ces variables sont à null.
