Search_widget / Search bar modification on top menu

[Max]

Dear All,

Under prestashop 1.7.5 / Local install / 

I am looking to change the Search_bar widget to something similar to the one in the prestashop minimal theme. 

I moved the search_widget module to the display nav 2 to have it on top but I am not enable or capable to change it as follow;

What I am looking to do is the following : Have only the search icon (next to the log-in) and when the user click on it have the search bar appearing.

I would like ideally to have just the icon on mobile as well if that is possible.

 

Find enclosed : 4 pictures ;

1- the search bar minimalist I would like

2- the same when you click on it

3- My homepage at the moment

4-Same home page but even with border-radius:25% the effect still not the same

 

Hope I made it clear, staying tuned for any info you might require,

Thank you PrestaUsers !

[JBW]

border-radius: 20px; gives me this result:

[Max]

Bonjour JBW,

For a reason this does not work for me, maybe because it is on nav2 display, also on my /theme/classic/assets/css/custom.css 

I put on css the  following : 

/*search bar - color and shadow */
.search-widget form input[type=text]{border-radius:20%; border:1px solid #ff5555;background-color:#fff0;}
.highlighted-informations{box-shadow:none!important;}

If that can help.

But the most important effect that I am looking for it to have the search icon only and when you click on it have the box window open similar to the minimal theme by prestashop.

https://addons.prestashop.com/demo/FO19813.html

As I have a video in the background I am looking for a minimalistic rendering. (hide text etc... )

Thank you

 

Edited April 30, 2020 by Max (see edit history)

[JBW]

1 hour ago, Max said:

But the most important effect that I am looking for it to have the search icon only and when you click on it have the box window open similar to the minimal theme by prestashop.

You can see the CSS they are using by right-click on the element and using the inspect function

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

#header .search-widget .input-search {
	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;
	-moz-transition: width .4s ease-in-out;
}

 

[Max]

Thank you for the quick reply JBW

I saw that with inspector but couldn't reach the same effect, by effect I mean the action of wrapping in and back when you click on it. 

By default having the just the search icon and when clicking on it having the possibility to write something, similar to this as well :

https://www.bobbies.com/fr/

I probably need to add a rule in the ; modules/ps_searchbar/ps_searchbar.tpl like IF but I am not that good yet. XD

 

 

[JBW]

4 minutes ago, Max said:

by effect I mean the action of wrapping in and back when you click on it. 

These are the transition effects  with focus included in the above CSS

[Max]

Ok now I have also replaced the html in the module/ ps_searchbar.tpl

<!-- Block search module TOP -->
<div id="_desktop_search_widget">
    <div id="search_widget" class="search-widget" data-search-controller-url="{$search_controller_url}">
        <form method="get" action="{$search_controller_url}">
            <input type="hidden" name="controller" value="search">
            <input class="input-search" type="text" name="s" value="" placeholder="Rechercher">
            <button type="submit">
                <i class="fa fa-search search"></i>
            </button>
        </form>
    </div>
</div>
<!-- /Block search module TOP -->

But the search icon is over the search bar.

Almost there but I cannot find on the CSS where to set that rules to have it on the same line.

 

Edited May 1, 2020 by Max (see edit history)

[terebesirobert]

Hi,

I would like to do something similar, added the above CSS to my local install and when I click on the search button, instead of open the text input, it submits the search data.

What can I do in this case?

 

Thanks,

Robert

Edited June 9, 2021 by terebesirobert (see edit history)

[gouna]

Hello, 

Do you have a solution? Thank you !

[terebesirobert]

Hi,

I added a script in ps_searchbar.tpl file which sets the focus programmatically.

 

 

 

[gouna]

Hello !

Can you share your code? Thank you so much !

Guillaume.

[terebesirobert]

Hi,

You need to declare this function in you ps_searchbar.tpl:

```

function setFocus() {

document.getElementById("element_id").focus();

}

```

 

you need to call this method "onmouseover" in your html.

 

 

[terebesirobert]

Something like this:

<div id="search_widget" class="search-widget" data-search-controller-url="{$search_controller_url}">
	<form method="get" action="{$search_controller_url}">
		<input type="hidden" name="controller" value="search">
		<input id="search-input" class="input-search" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
		<button id="search-button" type="submit" onmouseover="setFocus()">
			<i class="material-icons search">&#xE8B6;</i>
			<span class="hidden-xl-down">{l s='Search' d='Shop.Theme.Catalog'}</span>
		</button>
	</form>
</div>

<script>
function setFocus() 
{
	document.getElementById("search-input").focus();

}
</script>

 

[gouna]

Hi !

I just tested this code on my prestashop. But the focus is not triggered and the request is launched. I must have made a mistake ...

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;
}

and

<!-- Block search module TOP -->
<form method="get" action="{$search_controller_url}" class="search-widget" data-search-widget data-search-controller-url="{$search_controller_url}">
    <input type="hidden" name="controller" value="search">
    <div class="search-widget__group">
        <input class="form-control search-widget__input-right" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
        <button type="submit" class="search-widget__btn btn btn-link" onmouseover="setFocus()">
            <i class="material-icons search">&#xE8B6;</i>
            <span class="d-none">{l s='Search' d='Shop.Theme.Catalog'}</span>
        </button>
    </div>
</form>
<!-- /Block search module TOP -->
<script>
function setFocus() 
{
	document.getElementById("input.form-control.search-widget__input-right").focus();

}
</script>

My search div is :

<div class="search-widget__group">
        <input class="form-control search-widget__input-right" type="text" name="s" value="" placeholder="Rechercher" aria-label="Rechercher" autocomplete="off">
        <button type="submit" class="search-widget__btn btn btn-link" onmouseover="setFocus()">
            <i class="material-icons search"></i>
            <span class="d-none">Rechercher</span>
        </button>
    </div>

Thanks!!

Edited October 8, 2021 by gouna (see edit history)

[Kami Solutions]

Hi,

sorry for late reply, just needed to check on this info and @terebesirobert is right, just look at the id you want to put inside the setFocus() function, you are pointing to a class and not to a id, so in order to work you should set

    <div class="search-widget__group">
        <input id="my_id_function" class="form-control search-widget__input-right" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
        <button type="submit" class="search-widget__btn btn btn-link" onmouseover="setFocus()">
            <i class="material-icons search">&#xE8B6;</i>
            <span class="d-none">{l s='Search' d='Shop.Theme.Catalog'}</span>
        </button>
    </div>

Where "my_id_function" should be replaced to any name you like, leaving your script code:

function setFocus() 
{
	document.getElementById("input.form-control.search-widget__input-right").focus();

}

Be sure to modify this .tpl inside your theme/modules/ps_searchbar.tpl file and not in your modules folder, since the updates will overwrite it.

[gouna]

Thanks. I'm trying to get the focus to happen when I click the search button, but then the search is executed. I would like the first click to execute the focus, then the second click to execute the search.
 

I tried this:

<!-- Block search module TOP -->
<form method="get" action="{$search_controller_url}" class="search-widget" data-search-widget data-search-controller-url="{$search_controller_url}">
    <input type="hidden" name="controller" value="search">
    <div class="search-widget__group">
        <input id="chercher" class="form-control search-widget__input-right" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
        <button type="submit" class="search-widget__btn btn btn-link" onclick="setFocus()">
            <i class="material-icons search">&#xE8B6;</i>
            <span class="d-none">{l s='Search' d='Shop.Theme.Catalog'}</span>
        </button>
    </div>
</form>
<!-- /Block search module TOP -->

And this script code :

function setFocus() 
{
	document.getElementById("chercher").focus();

}

The first click executes the focus but the search is executed at the same time.

[izuchukwuanomneze]

I want to move the search bar to the middle and enable the whatsapp at the header to be left side in the same row.

secondly where can i place my google console html for verification?

thirdly i want to edit Sign in bar to Register l Sign in , How do i do this?

 

I am the owner of the website these are my current challenges after several trials.

[izuchukwuanomneze]

I am the owner of zenwaxdglobe.com i want to edit login portal from Hello! Sign in to Register! Sign in,

Secondly how do i add google console at prestashop 1.7.5.2 , i have generated sitemap but the website could not verify owner for google console.

How do i move search engine to the middle.

anyone with helpful information here?