Problème : le widget ‘Onglets’ d’Elementor est pratique mais assez peu flexible concernant le contenu. Le but est ici de proposer une solution pour intégrer des champs dynamiques ACF donc pour afficher le contenu et masquer les onglets lorsque le contenu est vide. Ici, je pars du principe que le contenu est différent dans chaque onglet, exemple : un onglet vidéo, un onglet image, un onglet texte, etc. Ça sera souvent des détails téchniques pour des fiches de produits, Woocommerce ou non.
Étapes :
1) Installer ACF et créer les champs dont on a besoin. A priori il y aura des champs Repeater.
2) Remplir du contenu
3) Sur le template où l’on veut afficher le contenu, mettre le widget ‘Onglets’. L’idée va être de créer la structure de chaque onglet séparément, les mettre en widget global pour avoir un short code qu’on insérera dans chacun des onglets.
4) Ajouter des dynamics fields (autant que le nombre d’onglets). Écrire le contenu que l’on veut afficher :
exemple 1 : pour des vidéos :
<div style= »display:block; »><span>%video_lien|embed_url%</span>
<p>%video_description%</p>
</div>
exemple 2 : pour des images avec un titre, le tout étant cliquable :
<div class= »outil »>
<a href= »%lien-outil% » target= »_blank »>
<img src= »%miniature-outil|img_url_by_id% » class= »outil-img »>
<p class= »outil-titre »>%titre-outil%</p>
</a>
</div>
Il faut valider que le visuel ressemble à ce que l’on veut et faire le responsive dès cette étape parce que lorsqu’on passe le widget en widget global il se fige donc si on a des modifications à faire il faudra repasser par certaines étapes.
5) Une fois que le visuel et le contenu sont bons, faire un clic droit sur le widget dans le navigateur et ‘Enregistrer comme global’. Donner un nom cohérent pour qu’il soit facile à identifier. Après ça, on peut masquer le widget Dynamic fields sur tous les appareils, pour ne pas perdre le structure en cas de modifications à venir. Le renommer pour identifier les différents onglets.
6) Aller dans le menu Modèles et copier le code court du Widget global, le coller dans l’onglet du Widget Onglet. Visualiser le résultat et faire les ajustements nécessaires. Faire ces étapes pour tous les Dynamic fields qu’on a créé.
7) Il reste à masquer des onglets lorsqu’ils sont vides. Le widget n’étant pas flexible, l’idée est de cibler l’ID de l’onglet pour le mettre en ‘display : none’ si le contenu est vide. L’inconvénient de cette façon de faire est que les onglets ne doivent pas changer d’ordre sinon il faudra modifier ce code donc il vaut mieux faire cette étape à la fin. Dans function.php (ou tout autre plugin de snippets), mettre le code suivant en changeant les champs en gras. ‘videos’ correspond au nom du repeater et ‘video_lien’ est le champ visé. Dans mon repeater j’avais plusieurs champs mais j’ai choisi le plus logique :
function afficher_masquer_onglet_videos() {
$repeaterRowsVideos = get_field(‘videos‘);
$afficherOngletVideos = false;
if ($repeaterRowsVideos && !empty($repeaterRowsVideos)) {
foreach ($repeaterRowsVideos as $row) {
$acfVideoContenu = $row[‘video_lien‘][‘value’];
if (!empty($acfVideoContenu)) {
$afficherOngletVideos = true;
break;
}
}
}
if ($afficherOngletVideos) {
echo ‘<style>#elementor-tab-title-4224 { display: table-cell; }</style>’;
} else {
echo ‘<style>#elementor-tab-title-4224 { display: none; }</style>’;
}
}
add_action(‘wp_enqueue_scripts’, ‘afficher_masquer_onglet_videos‘);
8) Dupliquer ce code pour tous les onglets en modifiant le contenu.
9) Vérifier que la fonctionnalité est correcte et que le visuel responsive fonctionne bien. Pour le responsive mobile, aller voir le Wiki pour le CSS à appliquer.
Exemple de site : https://soschangement.ca/produit/formation-sgt/