Integrating Heroic Knowledge Base with WooCommerce

Créer votre propre base de connaissances sur votre site WordPress est facile avec le plugin Heroic Knowledge Base.

Dans le dernier article Heroic Knowledge Base – Utiliser le système de templating, j'ai expliqué comment intégrer le plugin de manière transparente avec le thème TwentySixteen nouvellement sorti et j'ai également montré quelques techniques de développement de thème en utilisant le système de templating du plugin pour vous donner encore plus de contrôle.

Mais que faire si vous souhaitez utiliser le plugin Knowledge Base en conjonction avec d'autres plugins ?

Dans cet article, je vais vous montrer comment intégrer le plugin Heroic Knowledge Base dans WooCommerce en utilisant le système de templating de WooCommerce et le plugin Advanced Custom Fields, et également comment le faire sans modifier aucun modèle.

À la fin de cet article, vous devriez être en mesure d'attribuer une catégorie d'articles de la base de connaissances et d'afficher cette catégorie sur chaque page produit.

Le scénario

Ok, je peux vous entendre demander : « Pourquoi voudrais-je faire ça ? »

Disons que vous aviez une boutique en ligne vendant des systèmes audio, construite sur WordPress et utilisant WooCommerce pour la solution e-commerce. Il est possible que chaque produit ait de nombreuses spécifications techniques, et vous recevriez probablement beaucoup de questions sur chaque article. Par exemple : Avec quoi l'article est-il compatible ? D'autres haut-parleurs compatibles Wi-Fi de marque fonctionnent-ils avec ? Quelle est l'intensité sonore de 5 watts ? etc.

Ne serait-il pas agréable de pouvoir configurer une section de base de connaissances pour chaque produit qui répond à toutes ces questions et d'afficher cette section sur la page produit réelle au lieu d'une partie différente du site web ?

Pour commencer

Tout comme l'article précédent, je vais supposer que vous savez comment installer des plugins, que vous avez de bonnes connaissances en développement de thèmes et une compréhension de base de PHP.

En utilisant le même site web sur lequel vous avez travaillé précédemment, je peux également supposer que vous avez déjà une installation WordPress prête avec un thème enfant actif (TwentySixteen étant le thème parent), le plugin Knowledge Base installé, activé et rempli. Par conséquent, tout ce que vous avez à faire maintenant est d'installer les plugins WooCommerce et Advanced Custom Fields. Ces deux plugins sont gratuits, et bien qu'ils aient des extensions premium, vous n'aurez besoin d'aucune d'entre elles pour cet exercice.

Remarque : Si vous utilisez votre propre thème, tous les thèmes ne sont pas immédiatement compatibles avec WooCommerce. Des techniques pour assurer la compatibilité de votre thème se trouvent dans la documentation de WooThemes.

Création du champ personnalisé

La première étape consiste à créer l'interface d'administration qui vous permet de sélectionner une catégorie d'articles de la base de connaissances dans une liste auto-remplie et de la lier à un produit spécifique. Vous le feriez en utilisant le champ Taxonomie du plugin Advanced Custom Fields de Elliot Condon.

Il est important de noter que le plugin Knowledge Base utilise un type de publication personnalisé pour ses articles et par conséquent, bien que la taxonomie utilisée pour trier ces publications soit appelée catégories, il s'agit en fait d'une taxonomie personnalisée et non des mêmes catégories utilisées pour trier les publications standard. Si vous souhaitez en savoir plus sur les taxonomies, lisez le codex ici : Codex – taxonomies

Pour créer notre champ de taxonomie, allez dans Champs personnalisés en bas du menu principal, puis créez un nouveau groupe de champs. J'ai appelé ce groupe de champs 'Options du produit' afin de savoir que tout ce qui est ajouté à ce groupe ne s'appliquera qu'aux produits.

Cliquez sur le bouton « + Ajouter un champ » pour obtenir les options de notre nouveau champ personnalisé. Donnez une étiquette au champ (elle sera affichée sur l'écran d'ajout/modification de produit, assurez-vous donc qu'elle soit descriptive). J'ai appelé cela « Sélectionner la catégorie de base de connaissances pertinente ».

Une fois l'étiquette ajoutée, la zone du nom du champ sera ajoutée automatiquement. Comme l'étiquette de mon champ est assez longue et que le nom du champ est réellement utilisé dans vos modèles, je l'ai raccourci en « kb_category » (vous verrez pourquoi c'est utile un peu plus tard).

Pour le type de champ, sélectionnez Taxonomie sous l'en-tête « Relationnel ».

Une fois Taxonomie sélectionné, vous obtiendrez un nouvel ensemble d'options spécifiques à ce champ. Dans la zone de sélection Taxonomie, choisissez ht_kb_category. Il s'agit de la taxonomie personnalisée utilisée pour catégoriser les articles de la base de connaissances.

Ensuite, changez les options d'apparence en « Sélection de valeur unique ». Cela permet de ne choisir qu'une seule catégorie par produit, puis laissez toutes les autres options sur leurs valeurs par défaut.

La dernière chose à faire ici est de configurer le groupe de champs pour qu'il s'affiche uniquement sur les pages de produits. Pour ce faire, sous nos options de champ se trouve une autre boîte intitulée emplacement. Réglez-la pour qu'elle s'affiche uniquement si le type de publication est égal à produit. Cela garantira que nos nouvelles options ne s'affichent que sur l'écran d'ajout / modification de produit.

Cliquez sur mettre à jour en haut de la page et nous avons terminé. Maintenant, lorsque vous ajoutez ou modifiez un produit, vous devriez voir la nouvelle option que nous avons configurée.

Maintenant que vous avez configuré votre nouveau champ et attribué des catégories de base de connaissances aux produits, vous devez configurer votre thème pour afficher les articles sur la page du produit.

Approche 1 - Modification des fichiers de modèle WooCommerce

Ce qui est bien avec le système de modèles de base de connaissances, c'est qu'il fonctionne d'une manière très similaire au système de modèles WooCommerce. Ce qui signifie que cette partie *devrait* vous sembler familière.

Afin de procéder à des modifications de manière « sécurisée lors des mises à jour », vous devrez copier les modèles que vous prévoyez de modifier du dossier du plugin WooCommerce dans le dossier de votre thème enfant.

Remarque : Veillez à copier la structure du dossier exactement, mais supprimez le sous-répertoire /templates/. Pour plus d'informations sur la substitution des modèles WooCommerce, visitez : https://woocommerce.com/document/template-structure/

Dans cet exercice, vous n'aurez besoin de copier qu'un seul fichier, et c'est : content-single-product.php

Une fois que vous avez copié ce fichier en toute sécurité dans votre thème enfant, vous devrez écrire le code pour afficher la catégorie de base de connaissances pertinente. La première étape consiste à obtenir le contenu de notre nouveau champ personnalisé. Vous pouvez le faire très simplement en ajoutant :

$kb_category = get_field('kb_category');

Testez cela en échoant $kb_category et visualisez un produit auquel une catégorie de base de connaissances est associée. Comme le champ de taxonomie a été configuré pour enregistrer l'ID plutôt que l'objet entier (c'était un réglage par défaut), vous devriez maintenant voir l'ID de la catégorie de base de connaissances sélectionnée s'afficher sur la page.

Vous avez maintenant l'ID de la catégorie sélectionnée, vous devez l'utiliser pour créer une requête personnalisée. Cette requête se trouve en fait dans la boucle principale, elle doit donc être une requête imbriquée afin de ne pas interférer du tout avec la boucle principale. Pour plus d'informations sur la boucle, consultez : https://codex.wordpress.org/The_Loop Votre boucle imbriquée ressemblera à ceci :

//get the ACF field $kb_category = get_field('kb_category'); //if the field has been populated... if ( $kb_category ) : //create a custom query looking for this term id $kb_args = array( 'post_type' => 'ht_kb', 'tax_query' => array( array( 'taxonomy' => 'ht_kb_category', 'field' => 'term_id', 'terms' => $kb_category ) ) ); $kb_query = new WP_Query( $kb_args ); //if there any posts in the query if ( $kb_query­->have_posts() ) : while ( $kb_query­->have_posts() ) : //setup the post $kb_query­->the_post(); //DO STUFF HERE endwhile; endif; //reset the post data so we don't mess with the main loop wp_reset_postdata(); endif;

Décomposons cela...

Tout d'abord, vous vérifiez si une catégorie de base de connaissances a été définie, si c'est le cas, exécutez le code.

  if ( $kb_category ) : //create a custom query looking for this term id $kb_args = array( 'post_type' => 'ht_kb', 'tax_query' => array( array( 'taxonomy' => 'ht_kb_category', 'field' => 'term_id', 'terms' => $kb_category ) ) );

C'est là que l'information selon laquelle les catégories sont en fait une taxonomie personnalisée devient importante. Parce que la base de connaissances utilise une taxonomie personnalisée au lieu des catégories standard, les arguments de la requête doivent utiliser tax_query au lieu du paramètre 'cat' plus courant pour sélectionner la catégorie. Dans le tableau tax_query, vous devez ensuite spécifier la taxonomie personnalisée que vous souhaitez interroger, quel champ (dans ce cas, vous voulez trouver l'ID car c'est ce qui a été stocké) et la valeur réelle à laquelle il doit correspondre. Pour plus d'informations sur les paramètres de taxonomie, consultez : https://developer.wordpress.org/reference/classes/wp_query/#Taxonomy_Parameters

Ensuite, créez un nouvel objet Query afin qu'il puisse être imbriqué dans la boucle principale déjà en cours.

//if there any posts in the query if ( $kb_query­->have_posts() ) : while ( $kb_query­->have_posts() ) : //setup the post $kb_query­->the_post(); //DO STUFF HERE endwhile; endif; //reset the post data so we don't mess with the main loop wp_reset_postdata();

La dernière étape consiste à réinitialiser cette requête en utilisant wp_reset_postdata() ;

La nouvelle requête affichera tous les articles, qui se trouvent dans la catégorie spécifiée, sous les informations du produit. Dans cet exemple, dans l'écran de modification du produit, j'ai sélectionné la catégorie Heroic Knowledge Base Plugin qui contenait un article, donc sous les informations principales du produit, un article est listé.

Cette liste d'articles pourrait être affichée n'importe où sur la page, cela dépend simplement de l'endroit où dans content-­single-­product.php vous avez placé votre code.

Mais que se passe-t-il si nous voulons inclure ces informations sous forme de nouvel onglet, en plus de la description du produit et des avis ?

Approche 2 - Ne pas modifier du tout les fichiers de modèle WooCommerce

L'approche 1 est correcte si vous voulez juste comprendre comment fonctionnent les boucles imbriquées avec les publications personnalisées, les taxinomies personnalisées et les champs personnalisés, mais cela semble un peu désordonné. Par conséquent, au lieu de copier content-single-product.php dans votre thème enfant et d'inclure la boucle imbriquée dans ce fichier, vous pouvez modifier le fichier functions.php de votre thème enfant. Cette approche utilisera un filtre auquel vous pourrez ajouter du nouveau contenu. Si vous n'êtes pas sûr des Hooks et des Filters, je vous recommande de lire l'article de Thomas Mier sur Smashing Mag : Conseils utiles pour débuter avec les hooks. WooCommerce propose également une bonne section sur l'utilisation des Hooks et des filtres : https://woo.com/document/hooks/

La première étape consiste à ajouter le filtre pour modifier les onglets de produit à votre fichier functions.php.

add_filter( 'woocommerce_product_tabs', 'woo_knowledge_base_tab' );

‘woocommerce_product_tabs’ est le nom du filtre existant, déjà créé par woocommerce, auquel nous allons accrocher notre nouvelle fonction. Et ‘woo_knowledge_base_tab’ est le nom de la fonction que vous allez créer. Plus d’informations sur l’ajout de filtres sont disponibles dans le codex ici : https://codex.wordpress.org/Function_Reference/add_filter Ensuite, vous devrez créer la fonction qui ajoute réellement le nouvel onglet.

  function woo_knowledge_base_tab( $tabs ) { //Add the new tab for our Knowledge Base Tab $tabs['faqs_tab'] = array( 'title' => __( 'FAQs', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_knowledge_base_tab_content' ); return $tabs; }

Tout ce que fait cette fonction, c’est d’ajouter un nouvel onglet personnalisé de votre création au tableau $tabs, et de définir le titre, la priorité de cet onglet et le contenu qui sera dans cet onglet. Vous remarquerez que bien que j’aie appelé la fonction ‘woo_knowledge_base_tab’, j’ai en fait donné à l’onglet le titre FAQ. Vous pourriez l’appeler comme vous le souhaitiez. FAQ est une préférence personnelle car, comme je l’ai décrit au début de cet article, un scénario probable pour utiliser le plugin Knowledge Base avec Woocommerce serait de fournir les questions fréquemment posées pour chaque produit dans un magasin d’électricité en ligne.

La dernière étape consiste à ajouter le contenu lui-même au nouvel onglet créé, vous le faites en créant une deuxième fonction, que vous avez déjà listée dans le paramètre de rappel de votre fonction woo_knowledge_base_tab().

function woo_knowledge_base_tab_content() {}

Et ensuite, copiez et collez simplement le code que vous avez initialement ajouté à content-­single-­product.php et collez-le à l’intérieur de cette fonction (n’oubliez pas de le supprimer complètement de content-­single-­product.php). Ce que vous devriez avoir est ceci :

function woo_knowledge_base_content() { global $post; //Get the taxonomy field $kb_category = get_field('kb_category'); //if the field has been populated... if ( $kb_category ) : //create a custom query looking for this term id $kb_args = array( 'post_type' => 'ht_kb', 'tax_query' => array( array( 'taxonomy' => 'ht_kb_category', 'field' => 'term_id', 'terms' => $kb_category ) ) ); $kb_query = new WP_Query( $kb_args ); //if there any posts in the query if ( $kb_query­->have_posts() ) : while ( $kb_query­->have_posts() ) : //setup the post $kb_query­->the_post(); ?> <li class="hkb-­article­-list__<?php hkb_post_format_class($post­->ID); ?>"> <a href="<?php echo get_permalink(); ?>" rel="bookmark"> <?php echo get_the_title(); ?> </a> </li> <?php endwhile; endif; //reset the post data so we don't mess with the main loop wp_reset_postdata(); endif; }

Vous devriez maintenant voir un nouvel onglet intitulé FAQ et lorsque vous cliquerez sur cet onglet, vous devriez voir vos articles de base de connaissances.

Remarque : j’ai également ajouté global $post ici afin que

hkb_post_format_class($post­->ID);

fonctionne à l’intérieur de la fonction.

La dernière chose à faire est de le styliser un peu…

Le plugin Knowledge Base possède déjà ses propres styles, donc plutôt que de repartir de zéro, si vous enveloppez la ul dans une div avec la classe .hkb­category et ensuite enveloppez cette div à l'intérieur d'une autre avec l'id #hkb, les styles préexistants seront appliqués.

La seule autre chose que j'ai faite ici a été d'ajouter un wrapper h2 au-dessus de la liste afin qu'il y ait un titre sur la page. Le bloc de contenu final devrait ressembler à ceci

<div id="hkb"> <div class="hkb-­category"> <h2> Frequently Asked Questions</h2> <ul class="hkb-­article­-list"> <?php //loop through all of the posts to display the relevent articles while ( $kb_query-­>have_posts() ) : $kb_query-­>the_post(); ?> <li class="hkb-­article­-list__<?php hkb_post_format_class($post­->ID); ?>"> <a href="<?php echo get_permalink(); ?>" rel="bookmark"> <?php echo get_the_title(); ?> </a> </li> <?php endwhile; ?> </ul> <!--­­ end article list ­­--> </div> </div>

Aller plus loin…

C'est vraiment juste le point de départ pour intégrer le plugin Heroic Knowledge Base avec WooCommerce.

Si vous alliez encore plus loin avec cet exemple, vous pourriez accrocher cette requête personnalisée à un filtre différent afin qu'elle s'affiche dans le cadre des informations du produit sans modifier aucun modèle. Ou vous pourriez créer une belle fonction d'affichage / masquage pour le contenu de chaque article afin que vous puissiez lire chaque FAQ sans être retiré de la page produit.

C'est aussi une bonne pratique si vous développez des thèmes et utilisez le plugin Advanced Custom Fields pour exporter le code php de tous les champs que vous avez configurés et les inclure dans votre fichier de fonctions afin que votre thème puisse fonctionner avec ou sans le plugin lui-même.

Les possibilités sont infinies. Profitez-en !