Intégration de Heroic Knowledge Base avec 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 - Using the templating system, j'ai expliqué comment intégrer le plugin de manière transparente avec le thème TwentySixteen récemment 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 un contrôle encore plus grand.

Mais qu'en est-il si vous souhaitez utiliser le plugin Base de connaissances en conjonction avec d'autres plugins ?

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

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

Le scénario

Ok, je vous entends demander : "Pourquoi voudrais-je faire ça ?"

Supposons que vous ayez une boutique en ligne vendant des systèmes de sonorisation, construite sur WordPress et utilisant WooCommerce comme solution de commerce électronique. Il est probable que chaque produit comporte de nombreuses spécifications techniques et que vous receviez un grand nombre de questions sur chaque article. Par exemple : Avec quoi l'article est-il compatible ? Les haut-parleurs Wi-Fi d'autres marques fonctionnent-ils avec lui ? Quelle est la puissance de 5 watts ? etc.

Ne serait-il pas agréable de pouvoir créer une section de base de connaissances pour chaque produit qui réponde à toutes ces questions et d'afficher cette section sur la page du produit lui-même plutôt que dans une autre partie du site web ?

Pour commencer

Comme dans l'article précédent, je vais supposer que vous savez comment installer des plugins, que vous avez une bonne connaissance du développement de thèmes et une compréhension de base du PHP.

En utilisant le même site web que celui 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 alimenté. Il ne vous reste donc plus qu'à installer les plugins WooCommerce et Advanced Custom Fields. Ces deux plugins sont gratuits et, bien qu'ils disposent de modules complémentaires premium, vous n'en aurez pas besoin pour cet exercice.

Note : 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 peuvent être trouvées 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 à partir d'une liste auto-remplie et de la lier à un produit spécifique. Pour ce faire, vous pouvez utiliser le champ Taxonomy dans le plugin Advanced Custom Fields d'Elliot Condon.

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

Pour créer notre champ de taxonomie, allez dans Champs personnalisés en bas du menu principal et créez un nouveau groupe de champs. J'ai appelé ce groupe de champs "Options de produits" 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 afficher les options de notre nouveau champ personnalisé. Donnez une étiquette au champ (elle sera affichée sur l'écran d'ajout/modification de produit, veillez donc à ce qu'elle soit descriptive). Je l'ai appelé "Sélectionner la catégorie pertinente de la base de connaissances".

Une fois l'étiquette ajoutée, la case du nom du champ est ajoutée automatiquement. Comme l'étiquette de mon champ est assez longue et que le nom du champ est en fait utilisé dans vos modèles, je l'ai raccourci à "kb_category" (vous verrez pourquoi c'est utile un peu plus loin).

Pour le type de champ, sélectionnez Taxonomie dans la rubrique "Relationnel".

Une fois la taxonomie sélectionnée, vous obtiendrez une nouvelle série d'options spécifiques à ce champ. Dans la boîte de sélection Taxonomie, choisissez ht_kb_category. Il s'agit de la taxonomie personnalisée utilisée pour classer les articles de la base de connaissances.

Ensuite, modifiez les options d'apparence en "Sélection d'une valeur unique". Cela permet de ne choisir qu'une seule catégorie par produit et de laisser toutes les autres options sur leurs valeurs par défaut.

La dernière chose que nous devons faire ici est de définir le groupe de champs pour qu'il ne s'affiche que sur les pages de produits. Pour ce faire, sous nos options de champ, il y a une autre case intitulée location. Réglez-la pour qu'elle ne s'affiche que si le type de message est égal à produit. Ainsi, nos nouvelles options ne s'afficheront que sur l'écran d'ajout/modification de produits.

Cliquez sur mettre à jour en haut de la page et le tour est joué. Maintenant, lorsque vous ajoutez ou modifiez un produit, vous devriez voir la nouvelle option que nous avons mise en place.

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

Approche 1 Modifier les fichiers du modèle WooCommerce

Ce qui est bien avec le système de templates de la Base de Connaissances, c'est qu'il fonctionne de manière très similaire au système de templates de WooCommerce. Ce qui signifie que cette partie devrait vous sembler familière.

Afin d'effectuer des modifications en toute sécurité, vous devez copier les modèles que vous souhaitez modifier depuis le dossier du plugin WooCommerce dans le dossier de votre thème enfant.

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

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

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

$kb_category = get_field('kb_category');

Testez ceci en faisant un écho à $kb_category et en affichant un produit auquel est associée une catégorie de la base de connaissances. Comme le champ de taxonomie a été configuré pour enregistrer l'identifiant plutôt que l'objet entier (il s'agit d'un paramètre par défaut), vous devriez maintenant voir l'identifiant de la catégorie de base de connaissances sélectionnée s'afficher sur la page.

Maintenant que vous avez 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 à l'intérieur de la boucle principale, c'est pourquoi elle doit être une requête imbriquée afin de ne pas interférer 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;

Voyons ce qu'il en est...

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 ici que l'information sur les catégories qui sont en fait une taxonomie personnalisée devient importante. Comme la base de connaissances utilise une taxonomie personnalisée au lieu de 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 alors spécifier la taxonomie personnalisée que vous souhaitez interroger, le champ (dans ce cas, vous voulez trouver l'ID parce que c'est ce qui a été stocké) et la valeur réelle à comparer. 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 de manière à ce qu'il puisse être imbriqué dans la boucle principale déjà en cours d'exécution.

//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 appartenant à la catégorie spécifiée, sous les informations relatives au produit. Dans cet exemple, dans l'écran d'édition du produit, j'ai sélectionné la catégorie Heroic Knowledge Base Plugin qui contient un article, donc sous les informations principales du produit, il y a un article listé.

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

Mais que se passe-t-il si nous voulons inclure ces informations dans un nouvel onglet avec la description du produit et les commentaires ?

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

L'approche 1 est très bien si vous voulez juste vous familiariser avec le fonctionnement des boucles imbriquées avec les articles personnalisés, les taxonomies personnalisées et les champs personnalisés, mais elle est un peu désordonnée. 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 dans lequel vous pourrez accrocher le nouveau contenu. Si vous n'êtes pas sûr des crochets et des filtres, je vous recommande de lire l'article de Thomas Mier sur Smashing Mag : Useful tips to get started with hooks (Conseils utiles pour commencer à utiliser les crochets). WooCommerce a également une bonne section sur l'utilisation des crochets et des filtres : https://woo.com/document/hooks/

La première étape consiste à ajouter le filtre permettant de modifier les onglets des produits à 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 peuvent être trouvées dans le codex ici : https://codex.wordpress.org/Function_Reference/add_filter Ensuite, vous aurez besoin de 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 est d'ajouter un nouvel onglet personnalisé au tableau $tabs, et de définir le titre, la priorité de cet onglet et le contenu qu'il contiendra. Vous remarquerez que bien que j'aie appelé la fonction 'woo_knowledge_base_tab', j'ai en fait donné à l'onglet le titre de FAQ. Vous pouvez l'appeler comme vous le souhaitez. FAQ est une préférence personnelle car, comme je l'ai décrit au début de cet article, un scénario probable d'utilisation du plugin de base de connaissances avec Woocommerce serait de donner des 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 à l'onglet nouvellement créé, en créant une seconde fonction, que vous avez déjà listée dans le paramètre callback de votre fonction woo_knowledge_base_tab().

function woo_knowledge_base_tab_content() {}

Ensuite, il suffit de couper et de coller le code que vous avez ajouté à l'origine à content-single-product.php et de le coller à l'intérieur de cette fonction (n'oubliez pas de supprimer complètement cette fonction de content-single-product.php). Voici ce que vous devriez obtenir :

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 voir apparaître un nouvel onglet intitulé FAQ et lorsque vous cliquez sur cet onglet, vous devriez voir apparaître les articles de votre base de connaissances.

Note : J'ai ajouté $post global ici aussi pour que

hkb_post_format_class($post->ID).

fonctionne à l'intérieur de la fonction.

La dernière chose à faire est de le coiffer un peu...

Le plugin Knowledge Base possède déjà ses propres styles. Plutôt que de partir de zéro, si vous placez l'ul dans une div avec la classe .hkbcategory et que vous placez ensuite cette div dans une autre div avec l'id #hkb, les styles préexistants seront appliqués.

La seule autre chose que j'ai faite ici a été d'ajouter une enveloppe h2 au-dessus de la liste pour qu'il y ait un titre sur la page. Le bloc de contenu terminé 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>

Pour aller plus loin...

Ceci n'est que le point de départ de l'intégration du plugin Heroic Knowledge Base avec WooCommerce.

Si vous vouliez pousser l'exemple encore plus loin, vous pourriez intégrer cette requête personnalisée dans un autre filtre de manière à ce qu'elle s'affiche dans le cadre des informations sur le produit sans modifier aucun modèle. Vous pourriez également créer une fonction d'affichage et de masquage pour le contenu de chaque article afin que vous puissiez lire chaque FAQ sans quitter la page du produit.

Si vous développez des thèmes et utilisez le plugin Advanced Custom Fields, il est également conseillé d'exporter le code php pour tous les champs que vous avez configurés et de l'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. Bonne lecture !