nicolas/voiretmanger
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Comportement du bouton recherche #1

New issue
Closed
opened 2020-05-04 19:54:52 +02:00 by gmfmi · 5 comments
gmfmi commented 2020-05-04 19:54:52 +02:00 (Migrated from github.com)
Copy link

Je suis passé voir le fonctionnement de la recherche sur ton thème et voici mes retours rapides.

  1. Quand l'overlay s'ouvre, on peut toujours faire défiler l'arrière plan. C'est peut-être le comportement que tu voulais donner mais dans le cas contraire, il suffit d'ajouter un style CSS overflow: hidden sur la balise <html> pour résoudre le problème (j'ai testé sur ton thème)

  2. C'est étonnant mais une fois que l'on a ouvert le pop-up de recherche, on ne peut plus le fermer... Il faut être sûr de soi quand on lance une recherche haha

  3. Si on appuie sur la touche "entrer" pour soumettre le formulaire, on se retrouve sur la page des résultats de recherche. Il y a toujours un logo "search by algolia" mais j'ai cru voir que tu n'utilises pas le service ?

Sinon, le site en lui même, le principe est vraiment sympa ! Je suis Quimperois d'origine et les restaurants de la section "manger" me parlent totalement :)

Je suis passé voir le fonctionnement de la recherche sur ton thème et voici mes retours rapides. 1. Quand l'overlay s'ouvre, on peut toujours faire défiler l'arrière plan. C'est peut-être le comportement que tu voulais donner mais dans le cas contraire, il suffit d'ajouter un style CSS `overflow: hidden` sur la balise `<html>` pour résoudre le problème (j'ai testé sur ton thème) 2. C'est étonnant mais une fois que l'on a ouvert le pop-up de recherche, on ne peut plus le fermer... Il faut être sûr de soi quand on lance une recherche haha 3. Si on appuie sur la touche "entrer" pour soumettre le formulaire, on se retrouve sur la page des résultats de recherche. Il y a toujours un logo "search by algolia" mais j'ai cru voir que tu n'utilises pas le service ? Sinon, le site en lui même, le principe est vraiment sympa ! Je suis Quimperois d'origine et les restaurants de la section "manger" me parlent totalement :)
👍 1
nicolinuxfr commented 2020-05-04 22:19:48 +02:00 (Migrated from github.com)
Copy link

Merci pour ton retour, c’est très sympa ! 🙂

  1. Ce n’est pas vraiment voulu, j’avais essayé de le corriger mais sans trouver la bonne solution. Merci pour la suggestion, je vais l’appliquer.

  2. C’est pas génial en effet, mais il y a en fait deux solutions : cliquer sur le logo en haut à gauche, ou bien appuyer sur la touche ESC. Je crois qu’il faudrait une croix pour que ce soit plus explicite.

  3. J’utilise bien Algolia pour la recherche « complète ». J’ai un système assez bizarre, où je génère un json avec tous les titres de news pour la recherche instantanée. Ça c’est du bricolage que j’avais détaillé ici : https://mestrucspour.wordpress.com/2014/01/09/recherche-instantanee-wordpress/

Si cette recherche ne suffit pas, la touche entrée permet de lancer la recherche complète. Celle de WordPress par défaut étant notoirement mauvaise, j’ai testé plein de solutions au fil des années. Algolia est très efficace avec quasiment zéro configuration, et le plan gratuit suffit largement pour les maigres besoins.

Ce double système est assez rudimentaire, mais il fonctionne bien. Je peux difficilement faire mieux avec plus de 1700 articles, déjà en l’état rien qu’avec les titres et URL, j’ai un fichier json un peu gros à mon goût. Il faut un vrai serveur de recherche pour le contenu complet…

Encore merci d’avoir pris le temps de faire ce rapport de bug. :-) Et merci pour le compliment. 🙂

Merci pour ton retour, c’est très sympa ! 🙂 1. Ce n’est pas vraiment voulu, j’avais essayé de le corriger mais sans trouver la bonne solution. Merci pour la suggestion, je vais l’appliquer. 2. C’est pas génial en effet, mais il y a en fait deux solutions : cliquer sur le logo en haut à gauche, ou bien appuyer sur la touche ESC. Je crois qu’il faudrait une croix pour que ce soit plus explicite. 3. J’utilise bien Algolia pour la recherche « complète ». J’ai un système assez bizarre, où je génère un json avec tous les titres de news pour la recherche instantanée. Ça c’est du bricolage que j’avais détaillé ici : https://mestrucspour.wordpress.com/2014/01/09/recherche-instantanee-wordpress/ Si cette recherche ne suffit pas, la touche entrée permet de lancer la recherche complète. Celle de WordPress par défaut étant notoirement mauvaise, j’ai testé plein de solutions au fil des années. Algolia est très efficace avec quasiment zéro configuration, et le plan gratuit suffit largement pour les maigres besoins. Ce double système est assez rudimentaire, mais il fonctionne bien. Je peux difficilement faire mieux avec plus de 1700 articles, déjà en l’état rien qu’avec les titres et URL, j’ai un fichier json un peu gros à mon goût. Il faut un vrai serveur de recherche pour le contenu complet… Encore merci d’avoir pris le temps de faire ce rapport de bug. :-) Et merci pour le compliment. 🙂
👍 1
nicolinuxfr commented 2020-05-09 17:50:48 +02:00 (Migrated from github.com)
Copy link

J'ai essayé de mettre en place le blocage du défilement pour répondre au point 1, mais je suis tombé sur un drôle de bug et je tourne en rond depuis un bon moment déjà sans avoir comment le résoudre.

Voici la partie importante :

<div class="recherche" id="recherche" onclick="document.getElementById('search').focus(); document.body.style.overflow='hidden';">
	<input type="checkbox" id="op" />
<div class="lower">
	<label id="rechercher" for="op"><span class="dashicons dashicons-search"></span></label>
</div>

<div class="overlay overlay-hugeinc">
	<div class="logo" id="logo" onclick="document.getElementById('op').checked = false; document.body.style.overflow='auto';">
	<a href="#"><img src="https://voiretmanger.fr/wp-content/themes/voiretmanger/logo.svg" alt="" width="100" scale="0"></a></div>
	<?php get_search_form( "true" ); ?>
</div>

Le blocage du défilement en cliquant sur l'icône de recherche fonctionne parfaitement. Ce qui ne marche pas, c'est le déblocage en cliquant sur le logo du site (toujours en haut à gauche pour le moment). Je ne comprends, le code JS fonctionne parfaitement quand je l'exécute dans la console du navigateur et je ne vois pas pourquoi cela ne fonctionne pas.

Une idée peut-être ? :-)

J'ai essayé de mettre en place le blocage du défilement pour répondre au point 1, mais je suis tombé sur un drôle de bug et je tourne en rond depuis un bon moment déjà sans avoir comment le résoudre. Voici la partie importante : ``` html <div class="recherche" id="recherche" onclick="document.getElementById('search').focus(); document.body.style.overflow='hidden';"> <input type="checkbox" id="op" /> <div class="lower"> <label id="rechercher" for="op"><span class="dashicons dashicons-search"></span></label> </div> <div class="overlay overlay-hugeinc"> <div class="logo" id="logo" onclick="document.getElementById('op').checked = false; document.body.style.overflow='auto';"> <a href="#"><img src="https://voiretmanger.fr/wp-content/themes/voiretmanger/logo.svg" alt="" width="100" scale="0"></a></div> <?php get_search_form( "true" ); ?> </div> ``` Le blocage du défilement en cliquant sur l'icône de recherche fonctionne parfaitement. Ce qui ne marche pas, c'est le déblocage en cliquant sur le logo du site (toujours en haut à gauche pour le moment). Je ne comprends, le code JS fonctionne parfaitement quand je l'exécute dans la console du navigateur et je ne vois pas pourquoi cela ne fonctionne pas. Une idée peut-être ? :-)
gmfmi commented 2020-05-11 22:47:15 +02:00 (Migrated from github.com)
Copy link

Désolé, je viens de voir ton post, je n'ai pas de notification sur tes réponses. Je vais essayé de les activer pour voir les prochaines.

Oui, je pense avoir trouvé d'où vient ton problème. Le 'onclick' event fonctionne bien pour l'ouverture et la fermeture. Le problème, c'est que lors de la fermeture (quand tu cliques sur le logo du site) l'évènement d'ouverture est réappelé. Je ne sais pas pourquoi, je n'ai pas regardé tout le code mais j'imagine que c'est l'un des effets de bords créer par d'autres évènements (peut-etre le infinite-scroll ?).

Pour le vérifier, j'ai déplacé l'action de "hidden" sur l'élément fils et ça fonctionne correctement. J'ai laissé le focus au même endroit sinon il n'était plus pris en compte.

<div class="recherche" id="recherche" onclick="document.getElementById('search').focus();">
    <input type="checkbox" id="op" />
    <div class="lower" onclick="document.body.style.overflow='hidden';">
        <label id="rechercher" for="op"><span class="dashicons dashicons-search"></span></label>
    </div>
    [...]

J'aurais bien aimé te faire une Pull Request comme il se doit mais je n'ai pas eu le courage de m'installer un toolkit de dev pour wordpress... J'ai juste testé en modifiant l'HTML depuis mon browser mais ça devrait marcher correctement de ton coté aussi. Coté JS, j'ai bien vu les modifications dans ton commit, ça devrait marché, mais ça n'a pas l'air en place sur la version live.

En conclusion, il y a des évènements un peu chimiques/magiques qui arrivent dans tous les sens que je n'ai pas compris mais tu dois surement en avoir connaissance et tu pourras placer l'évènement "hidden" au meilleur endroit, j'ai pris la div "lower" pour l'exemple mais ça n'est peut-être pas idéal.

N'hésite pas à commenter si ça ne fonctionne toujours pas, je m'installerai un wordpress en local pour vraiment tester ;)

Désolé, je viens de voir ton post, je n'ai pas de notification sur tes réponses. Je vais essayé de les activer pour voir les prochaines. Oui, je pense avoir trouvé d'où vient ton problème. Le 'onclick' event fonctionne bien pour l'ouverture et la fermeture. Le problème, c'est que lors de la fermeture (quand tu cliques sur le logo du site) l'évènement d'ouverture est réappelé. Je ne sais pas pourquoi, je n'ai pas regardé tout le code mais j'imagine que c'est l'un des effets de bords créer par d'autres évènements (peut-etre le infinite-scroll ?). Pour le vérifier, j'ai déplacé l'action de "hidden" sur l'élément fils et ça fonctionne correctement. J'ai laissé le focus au même endroit sinon il n'était plus pris en compte. ```html <div class="recherche" id="recherche" onclick="document.getElementById('search').focus();"> <input type="checkbox" id="op" /> <div class="lower" onclick="document.body.style.overflow='hidden';"> <label id="rechercher" for="op"><span class="dashicons dashicons-search"></span></label> </div> [...] ``` J'aurais bien aimé te faire une Pull Request comme il se doit mais je n'ai pas eu le courage de m'installer un toolkit de dev pour wordpress... J'ai juste testé en modifiant l'HTML depuis mon browser mais ça devrait marcher correctement de ton coté aussi. Coté JS, j'ai bien vu les modifications dans ton commit, ça devrait marché, mais ça n'a pas l'air en place sur la version live. En conclusion, il y a des évènements un peu chimiques/magiques qui arrivent dans tous les sens que je n'ai pas compris mais tu dois surement en avoir connaissance et tu pourras placer l'évènement "hidden" au meilleur endroit, j'ai pris la div "lower" pour l'exemple mais ça n'est peut-être pas idéal. N'hésite pas à commenter si ça ne fonctionne toujours pas, je m'installerai un wordpress en local pour vraiment tester ;)
👍 1
nicolinuxfr commented 2020-05-13 10:57:14 +02:00 (Migrated from github.com)
Copy link

Bien joué, ça fonctionne en effet parfaitement avec ta solution ! 👏

Ce thème est bricolé par mes soins depuis des années, mais je ne maîtrise pas forcément tout. Surtout si c'est un conflit avec l'infinite-scroll (ce qui est possible), c'est encore plus compliqué puisque je n'ai pas la main dessus.

Hop, validé avec : nicolinuxfr/voiretmanger@c3ecb9c0fe

Je vais essayer d'ajouter une croix, pour que la manière de fermer la recherche soit plus explicite. Mais une autre fois…

Encore merci pour ton aide !

Bien joué, ça fonctionne en effet parfaitement avec ta solution ! 👏 Ce thème est bricolé par mes soins depuis des années, mais je ne maîtrise pas forcément tout. Surtout si c'est un conflit avec l'infinite-scroll (ce qui est possible), c'est encore plus compliqué puisque je n'ai pas la main dessus. Hop, validé avec : https://github.com/nicolinuxfr/voiretmanger/commit/c3ecb9c0fe4ae5f63d87ab74f7be153ed16c42e7 Je vais essayer d'ajouter une croix, pour que la manière de fermer la recherche soit plus explicite. Mais une autre fois… Encore merci pour ton aide !
gmfmi commented 2020-05-13 11:34:37 +02:00 (Migrated from github.com)
Copy link

Content de le lire ! Je viens de tester aussi sur mobile et tout semble fonctionner correctement :)

Content de le lire ! Je viens de tester aussi sur mobile et tout semble fonctionner correctement :)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug

   
duplicate

   
enhancement

   
help wanted

   
invalid

   
question

   
wontfix
No labels
bug
duplicate
enhancement
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
nicolas/voiretmanger#1
No description provided.