Gestion de masse d'onglets EasyTabs (module PrestaShop)

Le module Easy Tabs décortiqué

Voici comment se présente sur un site en PrestaShop 1.6, un onglet personnalisé ajouté avec le module Easy Tabs. Dans cette version, le thème par défaut n'affichera pas un onglet, mais une section personnalisée. Le principe de fonctionnement reste cependant le même :

Voici en image comment se présente l'interface de gestion du contenu d'un tel onglet dans le back-office PrestaShop, et la démarche à suivre, pour chaque produit :

1. Une fois le module activé, vous verrez le nouveau menu "Product Extra Tabs". Cliquez dessus pour ouvrir la page ci-dessous.
2. Le module est compatible multi-boutiques.
3. Case à cocher pour faire de la gestion multi-boutiques du titre.
4. Le titre le l'onglet ou de la section qui sera affichée.
5. Case à cocher pour faire de la gestion multi-boutiques du contenu.
6. Le contenu personnalisé de l'onglet, que vous pouvez définir dans cet éditeur HTML.
7. Case à cocher pour activer l'onglet dans toutes les boutiques.
8. Interrupteur pour activer ou non l'onglet.
9. Le titre et le contenu supporte le multi-langues.
10. Pour valider, enregistrer et sortir.

Ces données sont stockées en base dans deux tables que le module a ajoutées.
La table st_easy_tabs qui stocke les onglets et leurs associations aux produits ou aux catégories et l'activation dans les boutiques.

En analysant la structure, on voit que l'identifiant id_st_easy_tabs est unique et auto incrémenté. Cela nous informe sur le fait qu'un onglet ne peut pas être associé à plusieurs produits. Mais un produit peut avoir plusieurs onglets.
On est sur un type de relation simple 1 pour plusieurs.
Nous verrons par la suite, dans un autre tutoriel sur les champs personnalisés, la gestion d'un autre module "Advanced Personnalized Fields", qui  permet lui de définir des contenus partageables entre plusieurs produits.
Merlin Backoffice ® Flex permet en effet de gérer les divers type de relations 1 vers 1,  1 vers plusieurs et plusieurs vers plusieurs, sans pour autant demander des compétences particulières.

La seconde table est st_easy_tabs_lang et contient les informations multi-langues comme le titre des onglets et leur contenu :

Configuration des colonnes perso dans Merlin Backoffice ® Flex

Comme nous l'avons vu dans les tutoriels précédents, la démarche consiste dans un premier temps à ajouter et configurer dans le configurateur de colonnes autant de colonnes que nécessaire pour lire les données à modifier de ces tables, ou pour les lier. Allez c'est parti pour le pas à pas en images....

1. Une fois dans le configurateur, créez une nouvelle configuration (nommées ici Easy Tabs) et faites un clic droit dans une des deux tables de l'onglet "Produits".
2. Dans la table de configuration des colonnes perso, sélectionnons pour la 1re d'entre elles la table st_easy_tabs dans la liste déroulante.

1. Déroulez la liste de la colonne "Nom de la rubrique".
2. Sélectionnez l'identifiant id_st_easy_tabs. Le but de ce tuto étant justement de vous montrer comment Merlin Backoffice ® Flex va administrer de manière automatique ce type de rubriques auto-incrémentées.

1. Pour la seconde colonne personnalisée, donc la seconde ligne de colonne perso de la table ci dessous, on choisi dans la liste la seconde table du module, st_easy_tabs_lang
2. Le programme vous alerte immédiatement sur le fait que cette table ne contient aucune de clés de filtrage automatiques id_product, id_category etc... et qu'il donc falloir l'aider un peu à comprendre comment lire cette table, grâce à l'ajout d'une jointure :

1. Déroulons à nouveau la liste des rubriques disponibles dans cette table.
2. Pour cette seconde colonne non standard, nous allons demander à nouveau l'identifiant id_st_easy_tabs. C'est lui qui va nous permettre d'établir la liaison automatique entre les deux tables.

1. Dans cette second ligne perso, déroulons à présent la liste déroulante de la colonne "Jointure auto sur...".
2. C'est la que la magie opère, sélectionnons "1 (N° de ligne de cette table)", cela permet tout simplement de dire au logiciel de synchroniser la lecture et l'enregistrement des données de ces deux tables sur l'identifiant id_st_easy_tabs. La seconde ligne est à présent reliée à la première par des valeurs communes de id_st_easy_tabs.

Continuons à ajouter des colonnes perso, pour cette fois lire le titre et le contenu des onglets (on pourrait aussi ajouter une colonne perso pour gérer en masse l'activation de ceux-ci, tout est possible).

Et on termine par activer et donner un titre explicite aux colonnes personnalisées :

Tout y est. Et pourtant, si on s'arrête là et essaye cette configuration, vous constaterez deux choses :

• Les 4 colonnes perso sont bien trouvées et affichées dans la table des produits.
• Mais elles sont vides ! Alors que les tables contiennent on l'a vu au début au moins un onglet associé au premier produit.

Pourquoi ? pour les plus techniques parmi-vous, je vous propose d’arrêter là la lecture de ce tuto et d'essayer de trouver par vous-même la cause de ce résultat non attendu. Juste quelques pistes : analysez les données de la table st_easy_tabs, c'est une histoire d'ids et de zéros....

Trouvé, pas trouvé ?

La réponse : si on regarde cette table on se rend compte que la colonne id_product contient des zéros ! mais par contre qu'il y a dans cette table une colonne id_product_specific et que c'est donc elle qui contient la valeur de l'id_product du produit associé. Ça ne s'invente pas, l'esprit des développeurs est décidément bien tourmenté :-)

Or, Merlin Backoffice ® Flex, en analysant la structure de la table, n'a pas pu deviner cet état de fait et a pensé que la colonne id_product était la colonne permettant de filtrer la table en fonction des produits. Il a d'ailleurs fait de même pour la colonne id_category.
On va donc l'aider un peu à s'y retrouver en ajoutant une cinquième colonne perso, dite de liaison ou de jointure, contenant les valeurs de id_product_specific :

Et surtout en ajoutant une jointure automatique entre cette colonne perso et la colonne standard contenant les identifiants des produits, comme ceci :

Le point sans doute le plus délicat à comprendre de ce tuto : il faut aussi penser à supprimer les 2 filtres automatiques que le logiciel a établi à cause de la présence des colonnes l'id_product et id_category dans la table st_easy_tabs. Vous le ferez en décochant les deux cases en bleu ci-dessous, "Filter par produit" et "Filtrer par catégorie" :

Vous remarquerez au passage que cela supprime aussi les filtres automatiques présents dans la ligne 5. C'est logique car les lignes 1 et 5 concernent la même table st_easy_tabs. Il faut comprendre que les filtres agissent sur la table de la ligne et non pas sur la rubrique de la ligne.

Il faut également activer cette 5ieme ligne et lui donner un titre de colonne plus explicite ;

On n'en a pas encore parlé, mais l'ordre des lignes de cette table de configuration a aussi une importance, car c'est aussi cet ordre qui sera respecté pour lire les tables et les rubriques dans la base. Or il est important de commencer par lire cette valeur de id_product_specific avant les autres, pour correctement filtrer les autres données.

Pour cela, on va simplement remonter la 5ieme ligne en première position. cela se fait simplement en cliquant sur la flèche "haut" présente à droite de la table :

En faisant cela, on a décalé vers le bas les autres lignes et au passage cassé la liaison que l'on avait établie entre les lignes 2 et 1. Il faut la reprendre pour l'établir entre la 3 et la 2, comme ceci :

Nous y voila enfin, après validation et relecture des données, la table des produits se présente à présent ainsi, avec l'affichage des données demandées. On va pouvoir passer à présent les modifier si on le souhaite :

Edition de masse des onglets personnalisés