PS 1.7 Modifier comportement de la barre de recherche

[gouna]

Bonjour,

Concernant mes travaux sur mon thème (je travaille sur une base de BLCK), je cherche un moyen de modifier le comportement du champs de recherche.

J'aimerais pouvoir afficher uniquement une icone de type "Loupe", et faire apparaitre un champs de recherche lorsqu'on clique sur cette icone.

Pour ce faire j'ai reproduit un bout de code en css sur ce thème : https://addons.prestashop.com/demo/FO19813.html

Donc voici le css que j'ai ajouté :

input.form-control.search-widget__input-right {
width: 0;
    min-width: inherit;
    padding: 10px 10px 10px 20px;
    border: none;
    background: none;
    float: right;
    transition: width .4s ease-in-out;
    -webkit-transition: width .4s ease-in-out; }

input.form-control.search-widget__input-right:focus {
width: 100%;
    border: 1px solid #cfcfcf;
    border-radius: 40px;
    font-size: 14px;
    height: 34px;
    color: #535252;
    background: #fff; }

Avec çà, j'ai bien uniquement mon icone de recherche qui est apparent, puis lors du click, la zone de texte s'affiche... Sauf que, dans mon cas, quand on clique sur l'icone de recherche, cela exécute la requête.

Sur le thème dont j'ai reproduit le code css : https://addons.prestashop.com/demo/FO19813.html ; le clique sur l'icone de recherche permet juste de passer le champs en "Focus" et donc de l'afficher, mais tant qu'il n'y a pas de texte dans la zone de texte, le clique sur l'icone ne déclenche pas la requête.

J'aimerais reproduire ce comportement sur mon site, mais mes compétences s'arrêtent là.

Quelqu'un pourrait-il m'aiguiller?

 

 

Merci

Ps: voici mon site en cours de travaux, le bout de css n'est pas appliqué actuellement :

gounacreations.com

 

Edited June 1, 2021 by gouna
Explications pas claires (see edit history)

[gouna]

*/doublon*/

Edited June 1, 2021 by gouna (see edit history)

[gouna]

Je viens de corriger mon premier message pour qu'il soit plus clair, merci.