How to add a search box in the header of osCommerce

[zaragosabarbosa]

This is actually quite a simple thing to pull off - simply we need a text box for the search criteria, a button to launch the search, and to point the action of the thing at the right script file.

 

So, having located the place in the code where you want to place the search box (in header.php for instance, if you want it in the header), put in the following code:

 

<form action="advanced_search_result.php" method="GET">

<input type="text" name="keywords">

<input type="submit" value="Search!">

</form>

 

This should now do the job, but probably won't look very pretty. You can add some styling to this new element more easily if you first enclose it in a div element:

 

<div id="search_box">

<form action="advanced_search_result.php" method="GET">

<input type="text" name="keywords">

<input type="submit" value="Search!">

</form>

</div>

 

Now, let's get busy with some styling. Add the following to your stylesheet.css:

 

#search_box {

}

 

#search_box input {

}

 

These will affect the styling of the enclosing div and the inputs (text box and submit button) respectively. So you could so something like:

 

#search_box {

background: #ccc;

border: 1px solid #000;

}

 

#search_box input {

border: 2px solid #aaa;

}

 

to put lines around your box/button and have the whole thing put inside a coloured/bordered box.

 

Clearly, there's a lot more you can do with this, including using an image instead of a button, or colouring the button itself separately from the text input box, but I'm intending to cover CSS styling in depth in this article.

 

To see such a search box in action, have a look at a CRE Loaded site I put together recently:

http://www.sriremotetoys.co.uk/

(not yet live at the time of writing). You should also be able to get at the stylesheet for this project, but for the lazy amongst you, here are the relevant bits:

 

#header_search {

margin-top: 15px;

text-align: right;

padding-right: 20px;

font-family: tahoma, verdana, arial;

font-size: 12px;

color: #21EEFA;

font-weight: bold;

}

 

#header_search input {

border: 1px solid #21EEFA;

}

 

In this case, most of the CSS effort was focussed on getting the search box to appear in the right place within the header area.

[ayeronnie]

Thank you! This was exactly what I was searching for. With my own tweaks to my layout, it fix a layout problem. You sure helped me!

[Guest]

Barbosa,

Thank you for the tip; that's excellent. I like your design very much. Some feedback on your site:

The image on the left side of the header loads instantly as you open the page, but the image on the right side where the search box and the picture are located takes forever to load. You might want to look optimizing that. The other thing is it would be nice if you could add a link to the 'Search' word to the left of the text box to execute the search.

 

I have a couple questions for you. Can you add to this thread the code you used to add the other links (or buttons preferably) above the search box and the code that places the truck on the header as well as the body of the page.