[Résolu] Ouverture d’un accordéon depuis une extension (Créer un compte)

  • WordPress :5.7
  • Statut : résolu
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #2382547
    Kikahled
    Participant
    Initié WordPress
    5 contributions

    Bonjour à tous !

    Ma configuration WP actuelle :

    • Extensions en place : Search In Place (extension de recherche, utilisée pour du find-in-page)

    Problème(s) rencontré(s) :

    J’ai installé il y a peu une extension permettant d’effectuer d’une recherche dans le contenu de la page, avec mise en surbrillance du (des) terme(s) recherché(s). L’extension propose un pop-up pour les résultats en AJAX, et le click sur un des résultats amène à un scroll de la page pour focus le résultat souhaité.

    Le problème intervient lorsque la recherche agit sur du texte placé en contenu d’un accordéon ; le pop-up AJAX répertorie effectivement les occurrences, cependant le click sur les résultats ne fonctionne que pour les termes situés dans le titre de l’accordéon, et non pas dans le contenu de celui-ci.

    J’aimerais donc corriger ce problème, de sorte qu’après recherche d’un terme et sélection d’un résultat contenu dans un accordéon, la fenêtre scroll jusqu’à ce dernier et l’ouvre.

    En observant le script JS de l’extension, je suis tombé sur ceci :

    		openAccordion = function(e)
    		{
    			if(e.is(':hidden'))
    			{
    				var t,h;
    
    				// Elementor accordion
    				t = e.closest('.elementor-tab-content');
    				if(t.length)
    				{
                        var p;
                        while(t.length && t.is(':hidden'))
                        {
                            if(!t.hasClass('elementor-active'))
                            {
                                h = $('#'+t.attr('id').replace('content', 'title'));
                                if(h.length) h.click();
                            }
                            p = t.parent();
                            t = p.closest('.elementor-tab-content');
                        }
    
    					return;
    				}
    
    				// Divi accordion
    				t = e.closest('.et_pb_toggle_content');
    				if(t.length)
    				{
    					h = t.siblings('.et_pb_toggle_title');
    					if(h.length) h.click();
    					return;
    				}
    
    				// SiteOrigin accordion
    				t = e.closest('.sow-accordion-panel-content');
    				if(t.length)
    				{
    					h = t.siblings('.sow-accordion-panel-header-container');
    					if(h.length) h.find('.sow-accordion-open-button').click();
    					return;
    				}
    			}
    		}

    Cette fonction semble justement prévue pour régler mon problème, or je me suis aperçu à l’aide de quelques console.log qu’on ne rentre dans aucune des conditions présentes (Elementor / Divi / SiteOrigin). Je comprends plus ou moins l’objectif des quelques lignes de code ci-présentes (détecter l’éditeur de page, chercher le bloc accordéon le plus proche du terme recherché, simuler un click sur le titre de l’accordéon pour l’ouvrir…) mais je ne parviens pas à appliquer cette démarche pour l’éditeur Gutenberg.

    Quelqu’un saurait donc m’aider ? Je vous remercie par avance pour votre intérêt !

    • Ce sujet a été modifié le il y a 10 mois et 3 semaines par Kikahled.
    • Ce sujet a été modifié le il y a 10 mois et 3 semaines par Kikahled.
    #2382635
    mathieu42
    Participant
    Maître WordPress
    1212 contributions

    comment est passé le texte recherché à la page qui s’ouvre ? un argument dans l’url ?

    #2382659
    Kikahled
    Participant
    Initié WordPress
    5 contributions

    Bonjour,

    La recherche est effectuée en AJAX, il n’y a pas de « page cible » pour la recherche ni de passage de données par GET ou POST, la valeur du input search est récupérée en javascript par manipulation du DOM.

    J’ai fais un test avec une page agencée via Elementor contenant des blocks accordéon, et là l’extension fonctionne correctement.. j’imagine donc qu’elle n’a pas été prévue pour des blocks accordéon Gutenberg, cependant ça n’est pas impossible à mettre en place avec un peu de réflexion (du moins j’espère !). Voici ce que j’ai déduis du script présenté dans le premier post :

    Dans la fonction openAccordion, l’argument « e » représente sûrement le terme recherché. On vérifie si le mot ou l’expression est visible ou non (accordéon ouvert ou fermé), puis l’ouverture de l’accordéon démarre sur un « e.closest » qui sert à récupérer l’élément DOM ancêtre le plus proche (ici, on vise le block content de l’accordéon qu’on appelle « t »). On vérifie ensuite que ce contenu ne soit pas vide, et on cherche ensuite le voisin précédent cet élément (par exemple, avec « siblings »), à savoir le title de l’accordéon qu’on appelle « h ». Enfin, on click sur ce title pour toggle l’accordéon. C’est ce qui se passe pour les trois cas suggérés (Elementor, Divi, SiteOrigin), mais il faut maintenant récupérer les noms de class ainsi que les méthodes utilisées avec Gutenberg pour appliquer le script à cet éditeur.

    Je vous remercie une fois de plus pour l’intérêt que vous portez à ma requête !

    #2382669
    Kikahled
    Participant
    Initié WordPress
    5 contributions

    Je viens de m’apercevoir que Gutenberg ne propose de block accordéon à la base, et que j’utilise donc des accordéons qui ont été ajoutés au préalable au pannel WordPress que j’utilise. Je pense donc que je vais devoir me débrouiller pour analyser les scripts dispo sur le serveur.. !

4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.