Barre de Recherche sur le menu

[JackOne]

Bonjour à tous,

 

Je me suis lancé dans le projet de barre de recherche sur Prestashop.... pour une raison simple : Aucun module open source ne permet d'avoir une "véritable" barre de recherche à la place du menu classic.

J'ai donc réussi à avoir ma fameuse barre de recherche, mais il y a un hic...

 

Ma barre de Recherche est appelée par la classe input de prestashop par défaut :

 

input, button, select, textarea {
    margin: 0;
    line-height: inherit;
    height: 46px;
    width: 600px;
    position: inherit;
    border-radius: 30px;
    position: absolute;
    top: 40px;
    left: 390px;
    left: 29%;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    -khtml-border-radius: 0;
}

 

Ce qui signifie que mes formulaires qui utilisent cette même classe sont déformés car la barre de recherche a été modifié avec la variable input.

Actuellement une question me vient à l'esprit : Peut-on créer une autre variable input (CSS) sur prestashop dédiée pour la barre de recherche?

Je pense que oui, mais étant débutant sur Prestashop... je refuserai pas une explication ou même un petit aiguillage.

Le ps_searchbar.tpl que j'ai modifié : j'ai enlevé le bouton submit.

 

<!-- Block search module TOP -->


<div id="otsearchtoggle1" class="otsearchtoggle1" data-search-controller-url="{$search_controller_url}">
  <div class="otsearchtoggle1">
    <form method="get" action="{$search_controller_url}">
        <input type="hidden" name="controller" value="search">
        <input type="textfield" name="s" id="search_query_primlanddrive" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
        
    </form>
</div>
</div>


<!-- /Block search module TOP -->

Informations techniques :

 

Prestashop 1.7.7.5

Informations sur votre serveur Linux #1 SMP Tue May 18 08:33:12 UTC 2021 x86_64

Version du logiciel serveur : Apache

Version de PHP : 7.3.29

Limite de mémoire : 256M

Temps maximal d'exécution : 5

Taille max. pour envoi de fichiers : 128M

info_outline Informations sur la base de données

Version de MySQL : 5.7.34-log-cll-lve

Serveur MySQL : 127.0.0.1

Préfixe des tables : prm_

Moteur MySQL : InnoDB

Connecteur MySQL : DbPDO

 

 

Merci,

Edited August 19, 2021 by JackOne (see edit history)

[Mediacom87]

il y a 36 minutes, JackOne a dit :

id="search_query_primlanddrive"

votre input a un identifiant et un name et vous pouvez même lui appliquer une classe personnaliser pour faire le cSS que vous voulez spécifiquement pour ce champ.

cela n'a aucun lien avec la connaissance de PrestaShop se sont des éléments de base de tout site internet.

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettez-en-place-le-css

[JackOne]

Bonjour,

 

Mon problème de barre de recherche est maintenant résolue.

Pour ceux qui sont intéressés pour intégrer cette barre de recherche,

 

 /*L'élément avec l'id="search-bar" aura la classe .search-primlanddrive
   Version 1.0 necessitant encore des améliorations notamment
   des améliorations de compatibilité de lecture sur les supports mobiles */

#search-bar{
    padding: 20px 0;
    position: relative;
    z-index: 1;
    height: 6px;
    width: 600px;
}

/*L'élément avec la class="search-primlanddrive" aura le style ci-dessous */

.search-primlanddrive{
    padding: 20px 0;
    position: relative;
    z-index: 1;
    height: 6px;
    width: 600px;
}

 

N'oubliez pas de changer la valeur id et class dans votre module ps_searchbar

 

Cette barre de recherche n'est pas responsive mobile car j'ai pas encore eu le temps de me pencher dessus,

mais heureusement qu'il y a pleins de tutoriels sur internet pour adapter cette barre aux mobiles devices :

 

https://www.w3schools.com/howto/howto_css_searchbar.asp

https://www.codingnepalweb.com/responsive-navbar-with-search-box/

 

 

Pour ceux que ça intéresse laissez moi un message je vous enverrai la mise à jour avec le responsive (quand j'aurai du temps).

 

 

Bien à vous.

 

 

 

Edited August 20, 2021 by JackOne (see edit history)

[JackOne]

Petite mise à jour du style de la barre

 

#search-bar{
    padding: 20px 0;
    position: absolute;
    z-index: 1;
    height: 6px;
    width: 100%;
    top: 50px;

}

 

Pour ceux que ça interèsse, j'ai repris la barre de recherche par défaut de prestashop que j'ai customisé,

Si des personnes veulent aussi se lancer là-dedans n'hésitez pas à commenter en dessous,

 

Je me ferai un plaisir de vous aider dans la mesure du possible,

 

Bien à vous.

Edited August 20, 2021 by JackOne (see edit history)