Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Search Box Reworked


brett_ferguson

Recommended Posts

This is a standalone search box which allows you to place your search box anywhere whithout it still looking like an infobox. It's an improved version over the one I posted in Install and Config Forum

 

For now, see example (as of Jan 3rd 2004)

<?php 
$hide = tep_hide_session_id(); 
echo '<form name="quick_find" method="get" action="' . tep_href_link (FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false) . '">'; 
echo $hide . '<input type="text" name="keywords" onFocus=this.value="" size="20" maxlength="30" value="' . BOX_SEARCH_TEXT . '"> ' .  '<input type="submit" value="Go"><br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . tep_draw_hidden_field('search_in_description', '1') . '</a>'; 
echo '</form>'; 
?>

  • This is NOT a standalone php file, but can easily be saved to a separate file and referenced as such. I've put mine within my header.php file. It can also be added to most other files like the column_left.php and column_right.php, but you will need to remove the surrounding <?php and ?> tags.
  • The text written inside the input box is called from your /includes/languages/your_language.php file which in my case was english.php. To change what it writes to the input box, change the field near line 83 from 'Search' to 'Your Text' ie:define('BOX_SEARCH_TEXT', 'Search');
  • The hidden field which iiinetworks (Matt) suggested, was added to make the search look in the product fields as well as desriptions.
  • I've moved the word 'Search' into the input box so you don't need to waste any space nearby to tell your users what the box is for. They can simply highlight the text and type over it. Text disappears when the input box gains focus (mouse click or tab to it).

Thanks to all for your help Mattice, M@rcel, Matt (iinetworks) Emerson and :unsure: others??

Enjoy and improve upon! Please re-post even better versions here B)

Link to comment
Share on other sites

I remember when Mattice first posted something like this B)

 

Ok - let's get real pretty.....

 

 ? ?<td><?php 
$hide = tep_hide_session_id(); 
echo '<form name="quick_find" method="get" action="' . tep_href_link (FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false) . '">'; 
echo $hide . '<input type="text" name="keywords" onFocus=this.value="" size="15" class="inputbox" maxlength="30" value="' . BOX_SEARCH_TEXT . '"> ' . ?'<input type="submit" class="search" value="Go"><br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . tep_draw_hidden_field('search_in_description', '1') . '</a>'; 
echo '</form>'; 
?></td>

 

...and in your stylesheet.css

 

.inputbox 
{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2E3A4A;
background-color: #909DAE;
border-style: solid;
border-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
font-weight: bold;
cellpadding: 4px;
-moz-border-radius: 15px;

}

.search 
{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 10px;
color: #ffffff;
background-color: #3151B5;
border-style: solid;
border-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
-moz-border-radius: 15px;

}

 

Try it in Netscape or Moz... :D

 

Matti

Link to comment
Share on other sites

  • 1 month later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...