osCommerce Quick Find Box Customization (2)
Part 2 : Move the osCommerce Quick Find search field and search button in Header
Many osCommerce shop owners like to put the search field and search button in the header. Let's see how to do it.
1. Open the includes/header.php file.
2. Remove the three icons codes and replace with the following codes highlight in blue color as shown below:
osCommerce includes/header.php
<tr class="header">
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' .
tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>
<td align="right" valign="bottom"><?php require(DIR_WS_BOXES . 'search.php'); ?></td>
</tr>
osCommerce includes/boxes/search.php
1. Remove the <tr><td> at the top and the </td></tr> at the top. This allows us to locate the search field and search button much easier.
2. Remove or comment the three lines of codes to display the Quick Find Header:
//$info_box_contents = array();
//$info_box_contents[] = array('text' => BOX_HEADING_SEARCH);
//new infoBoxHeading($info_box_contents, false, false);
3. Set a width to the table that holds the search field and search button. This is much easier to control the layout.
<?php
$info_box_contents = array();
$info_box_contents[] = array('form' => tep_draw_form('quick_find',
tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '',
'NONSSL', false), 'get'),
'align' => 'center',
'text1' => tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-80) . 'px"'),
'text2' => tep_hide_session_id(),
'text3' => tep_image_submit('button_search_1.gif',
BOX_HEADING_SEARCH)
);
echo $info_box_contents [0]["form"] . "\n";
echo $info_box_contents [0]["text2"] . "\n";
echo "<table width=\"100%\" border=\"0\" cellpadding=\"2\">" . "\n";
echo "<tr><td>" . $info_box_contents [0]["text1"] . "</td><td>" . $info_box_contents [0]["text3"] .
"</td></tr>" . "\n";
echo "</table>" . "\n";
echo "</form>" . "\n";
//No need to call the class to display the search items
//new infoBox($info_box_contents);
?>
search-customization-example-2.php, header-customization-example-2.php
The result is:
Test the osCommerce Quick Find Box
Let's do some searches to check if the codes are working fine.
Search Term: mouse
The searched result is:
Search Term: keyboard
The searched result is:
Once we know the code structure, we can move the search field and search button to any location of osCommerce webpage.
This is the end of osCommerce Quick Find customization tutorial.