Créer un faq interactif d'étapes en étapes

Salut.

C'est toujours mieux de dire ce qu'on a fait et quelles sont les erreurs. Là on est un peu trop dans le flou.

Cette librairie a l'air mise à jour plus régulièrement et fait peut-être ce que tu veux : https://github.com/oguzhanoya/jquery-steps

Hello :)

Alors pour commencer, il te faut un minimum de connaissances en jQuery, sinon ce sera compliqué de debug, et surtout en connaissant jQuery tu sera capable de nous expliquer quel est le problème, vu que tu ne comprends pas trop ce que tu ffais la seule chose que tu peux dire c'est "ça marche pas y a des erreurs", on peut pas trop t'aider x)

Bref: https://api.jquery.com à lire de haut en bas :p

Ensuite pour l'ancienneté du plugin, alors en vrai jQuery c'est une très vieille techno, elle est de plus en plus abandonnée par les devs qui vont utiliser des technos plus récentes, et pour l'utilitaire des librairies opensource, après il reste quand même une communauté donc tu peux trouver les plugins récents sur Github (bon pour le coup Jools t'as filé une lib qui est récente, les trois issues de ce plugin sont marquées comme solved et y a pas d'autres signalements, donc ça a l'air d'est une bonne lib, en gros c'est ce que tu dois vérifier, la date de la dernière release, et l'onglet issues, si y'a plein de issue badge rouge ça pue, sinon c'est bien)

Bonjour, en effet, pour l'instant ma demande est floue car je ne sais absolument pas comment m'y prendre pour créer cela. Je teste beaucoup de choses pour l'instant comme introjs (pareil je n'arrive pas à l'utiliser) et la je tente avec bootstrap-tour, je verrai si ça fonctionne ou pas. Merci pour vos retours, je prends note et en effet, je n'utilise pour ainsi dire jamais jquery. Mais dans ce cas, je teste pas mal de choses mais je n'arrive pas à un résultat qui me convient.

Alors perso je ferais sans jQuery et je chercherais une librairie sur npm n'importe laquelle, d'ailleurs tu testes IntroJS, cette lib elle est bien :p

Après tu peux fair eune recherche sur le site NPM, regardes bien l'ancienneté de la dernière release pour t'assurer que le paquet est bien à jour, et dans la partie github regardes si il y a plein d'issues (l'onglet "issues" dans github ce sont des rapport de bugs) si y en à 2-3 ça va (tant que c'est pas des bugs critiques), si y'en a plein la lib est pourrie

ok je vais regarder sur npm et me tourner plus vers une solution bootstrap. Je ne suis pas à l'aise avec ces techniques là. Ou le plus simple peut être serait pour moi de faire apparaitre disparaitre le popup à l'aide de javascript. Partir sur quelque chose de plus basique mais qui serait fonctionnel. A méditer pour moi-même, dans l'immédiat je vais tester sur npm et github certains paquets on verra bien et si je trouve quelque chose de fonctionnel et pratique je mettrai le lien directement.
Entre temps si quelqu'un a déjà été dans le cas je suis toute écoute.

Si tu veux le faire toi même, tu as juste à jouer sur les evennements (addEventListenner) pour appliquer un display block ou un display none sur des modèles en position absolute

Après c'est un coup à prendre, prends bien le temps de lire la doc, quand c'est une librairie c'est très court les docs c'est juste un manuel d'utilisation ;)

https://www.edisonsce.cn/tour.html# en gros c'est cela que je veux avec bootstrap tour mais je ne le vois pas à jour je suis quand même étonnée car c'est top. Il ne fonctionne pas sur mon app car j'utilise bootstrap 5. Je continue de chercher pour trouver un truc chouette et super interactif (à savoir que je crée une app sous laravel et que cela me serait utile pour d'autres applications crées).

Après plusieurs recherches et tests, je me suis tournée finalement vers le plugin javascript introjs. Il fonctionne nickel, me reste plus qu'à trouver comment traiter l'utiliser sur une application multi lingue. Merci pour votre aide et si je peux aider quelqu'un pour cela n'hésitez pas !

Mmmh ça reste au problème initial, faut trouver le bon plugin x)

Et introJS ouai c'est pas mal du tout :p

Pour le multilingue, c'est déjà plus simple, tu fais des fichiers JSON ou YAML, tu fous tes textes et c'est bon :p

par exemple

fr.json

{
    step_1: {
        title_top: "Bonjour",
        body_ left: "Ici"
    },
    step_2: {
        ...
    }
}

en.json

{
    step_1: {
        title_top: "Hello",
        body_ left: "Here"
    },
    step_2: {
        ...
    }
}

du.json

{
    step_1: {
        title_top: "Da!",
        body_ left: "Da!"
    },
    step_2: {
        ...
    }
}

Ensuite tu fait un setLocale ou alors une requete GET pour avoir la langue actuelle, et selon la langue tu choppes le bon fichier
Ensuite tu places tes variables dans le contenu :p

Merci beaucoup, pour les textes, j'ai déjà une solution mise en place pour les traductions. Le problème est qu'il y a trois boutons en javascript : next, previous et done, je voudrais pouvoir trouver comment arriver à faire la traduction pour ces trois là. Actuellement j'ai cela:

introJs().setOptions({
    ...
    nextLabel: 'suivant',
    prevLabel: 'prev',
    doneLabel: 'fait',
    ...
}) ...

C'est tout bête en fait il suffit de reprendre la même méthode de traduction utilisée dans laravel pour ma part :

nextLabel:'{{ BT("next")}}',
prevLabel: '{{ BT("previous") }}',
...