FacetWP – Bricks Builder integration

Intégration de FacetWP avec Bricks Builder : Maximisez vos listings

L’intégration de FacetWP avec Bricks Builder permet de créer des interfaces utilisateurs dynamiques et interactives pour vos listings de publications et de produits. Cette intégration vous offre des fonctionnalités de filtrage avancé qui améliorent la navigation sur votre site, rendant l’expérience utilisateur plus fluide et agréable. Dans cet article, nous allons explorer comment tirer parti de cette intégration pour enrichir vos pages avec des facettes personnalisées, en assurant un affichage optimal et efficace de votre contenu.

Développement

Ajouter des facettes aux listings de publications dans Bricks

Avec l’extension FacetWP, il est désormais possible d’ajouter des facettes à vos éléments de “Posts”, “Query Loop” et “Products” dans Bricks. Cela vous permet d’offrir une meilleure expérience de recherche et de filtrage à vos utilisateurs.

Utilisation d’un élément “Posts”

Pour commencer, ajoutez un nouvel élément “Posts” à votre page Bricks. Dans les paramètres de cet élément, vous devez activer la case à cocher “Use FacetWP”. Cette action permet à l’élément d’interagir avec les facettes.

Une fois vos facettes créées, il vous suffit de coller leurs shortcodes dans un élément Shortcode sur la page. C’est une démarche simple qui permet d’intégrer et d’afficher parfaitement les facettes que vous avez configurées.

Pagination dans un élément “Posts” : Si vous souhaitez intégrer une pagination à votre liste de publications, activez l’option “Pagination > Show”. Une autre méthode consiste à ajouter une facette Pager à votre page. Il est essentiel de noter que l’utilisation d’un élément “Pagination” séparé avec un élément “Posts” ne fonctionnera pas avec FacetWP.

Mise en place de la fonction “Query Loop”

La fonctionnalité “Query Loop” est également prise en charge par FacetWP. Pour l’initialiser :

1. Créez un nouvel élément Div dans Bricks. Cet élément servira de conteneur permettant à FacetWP de détecter automatiquement la liste.
2. Ajoutez ensuite un élément Container, Block ou Div – c’est ici que la logique de requête sera appliquée.
3. Activez l’option “Use query loop” puis “Use FacetWP” dans les paramètres de cet élément.
4. Vous pouvez ajouter de données dynamiques, comme un élément Heading avec le contenu {post_title} à titre d’exemple.

Pour organiser votre structure, assurez-vous que les éléments soient imbriqués correctement dans l’ordre : Div > Query Loop > Heading.

Pagination dans un “Query Loop” : Pour ajouter la pagination dans un “Query Loop”, vous pouvez également utiliser un élément Pagination séparé, mais il doit être placé dans le même conteneur que l’élément qui utilise “Query Loop” et FacetWP. Cela garantit que FacetWP peut traiter correctement toutes les facettes et la pagination.

Utilisation d’un élément “Products”

Si vous utilisez WooCommerce, l’ajout d’un élément “Products” est également pris en charge par FacetWP. Les instructions sont similaires à celles de l’élément “Posts”. À partir de la version 0.5 de l’extension, l’intégration des produits est encore plus fluide.

Pour la pagination avec un élément “Products”, notez qu’il n’y a pas de paramètre “Pagination” par défaut comme dans “Posts”. Vous devez utiliser une facette Pager pour cela. Encore une fois, il est important de ne pas essayer d’utiliser un élément de pagination séparé.

Modification des arguments de requête et ajout de FacetWP manuellement

L’activation de la fonction “Use FacetWP” est simplement une première étape. Dans certains cas, vous pourriez vouloir activer FacetWP manuellement pour un élément de requête. Cela peut se faire en ajoutant un argument de requête “facetwp” dans le filtre “bricks/posts/query_vars” :

php
add_filter('bricks/posts/query_vars', function($query_vars, $settings, $element_id) {
if ($element_id === 'your_element_id') {
$query_vars['facetwp'] = true;
}
return $query_vars;
}, 10, 3);

Assurez-vous de remplacer your_element_id par l’ID unique de votre élément Bricks.

Gestion des erreurs connues et des réglages non supportés

Erreur “FacetWP was unable to auto-detect the post listing”

Si vous rencontrez l’erreur “FacetWP was unable to auto-detect the post listing”, il est conseillé de désactiver l’option “Cache query loops” dans les paramètres de performance de Bricks.

Correctif pour le bouton “Ajouter au panier” AJAX

Quand vous activez la fonctionnalité “AJAX add to cart” dans les réglages de WooCommerce, il se peut que votre bouton “Ajouter au panier” ne fonctionne pas après des interactions avec les facettes. Pour réinitialiser ce bouton après chaque rafraîchissement de facette, vous pouvez utiliser le code suivant dans functions.php de votre thème :

php
add_action('facetwp_scripts', function() {
// code pour réinitialiser le bouton
}, 100);

Accordéons Bricks

Il a été observé que les éléments Accordéon de Bricks ne fonctionnent plus correctement après une interaction avec les facettes. Un correctif similaire peut être appliqué pour réinitialiser ces éléments.

Gestion des messages “Aucun résultat”

Pour personnaliser le message affiché lorsqu’aucun résultat n’est trouvé sur vos éléments “Posts” ou “Query Loop”, allez dans les paramètres de requête et définissez le texte ou le modèle de ce message. Si ces paramètres sont vides, aucun message ne s’affichera.

Pour les éléments “Products”, vous ne pouvez pas spécifier ce paramètre, car il utilise un message par défaut de WooCommerce. Toutefois, vous pouvez le remplacer par un message personnalisé en utilisant les hooks appropriés.

Exemple pour le message “Aucun Résultat” pour les éléments “Posts” :

php
add_filter('bricks/query/no_results_content', function($content, $settings, $element_id) {
if ($element_id === 'your_element_id') {
$content = '<p>Aucun résultat trouvé.</p>';
}
return $content;
}, 10, 3);

Améliorations et mises à jour des versions

Il est important de rester informé des mises à jour de l’extension FacetWP, car chaque version apporte son lot d’améliorations pour optimiser la performance et l’intégration. Par exemple :

• Version 0.7 du 19 août 2024 : Correction de divers problèmes de détection de requêtes 404.
• Version 0.6.3 du 20 juin 2024 : Résolution d’un problème de chargement des facettes lorsque aucun résultat n’était présent.
• Version 0.5 a introduit le support de WooCommerce et une meilleure détection des requêtes.

Ces mises à jour soulignent l’importance d’utiliser les dernières versions pour bénéficier des corrections et des optimisations.

L’intégration de FacetWP avec Bricks Builder permet ainsi de créer des pages dynamiques et réactives qui améliorent l’expérience utilisateur sur votre site. En utilisant les instructions fournies ci-dessus, vous êtes en mesure de tirer le meilleur parti de cette technologie, de vos publications et de vos produits, rendant votre site à la fois esthétiquement plaisant et intuitif à naviguer. En résumé, l’utilisation de l’intégration de FacetWP avec Bricks Builder fournit non seulement une interface plus raffinée mais améliore également la fonctionnalité de votre site, en assurant une satisfaction accrue de votre clientèle.