Home | Store | osCommerce Tutorials

osCommerce Quick Find Box Customization (1)

Part 1 : Re-arrange the osCommerce Quick Find search field and search button


Many osCommerce shop owners do not like the original design of the Quick Find Box, especially the search button.

The diagram below shows the original web layout of osCommerce Quick Find Box:

osCommerce quick find web layout

Let's use a better looking search button and remove the text string below the search field as many osCommerce shop owner like this design.

Quick Find Content File Structure

$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',
'text' => tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') .
' ' . tep_hide_session_id() .
tep_image_submit('button_quick_find.gif',
BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT .
'<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) .
'"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

new infoBox($info_box_contents);

The value of 'text' is the code used to display the Content of Quick Find.

The button_quick_find.gif button is saved in catalog/includes/languages/english/images/buttons/ directory.

Upload our own search button osCommerce Quick Find to catalog/includes/languages/english/images/buttons/ directory. The filename of the new search button is button_search_1.gif.

Change the button filename of the above code to button_search_1.gif.

$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',
'text' => tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') .
'&nbsp;' . tep_hide_session_id() .
tep_image_submit('button_search_1.gif',
BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT .
'<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) .
'"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

new infoBox($info_box_contents);

The result is:

osCommerce Quick Find button

Now we also wish to remove the text string below the search button. Simply delete the unwanted codes.

The codes will become:

$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',
'text' => tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') .
'&nbsp;' . tep_hide_session_id() .
tep_image_submit('button_search_1.gif',
BOX_HEADING_SEARCH) );

new infoBox($info_box_contents);

The osCommerce Quick Find Box looks like:

osCommerce Quick Find button

This design is really ugly. We are going to align the search button beside the search field.

The width of search button is about 65 pixel.

Therefore we have to adjust the width of the osCommerce search field so that the search button can fit in the box:

$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',
'text' => tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-80) . 'px"') .
'&nbsp;' . tep_hide_session_id() .
tep_image_submit('button_search_1.gif',
BOX_HEADING_SEARCH) );

new infoBox($info_box_contents);

Test the result. The osCommerce Quick Find Box should now looks like:

osCommerce Quick Find button

Hm.... The search button do not align very well with the search field.

As we did in previous tutorials that the best way to styling and layout individual box is to write our own codes. Let's do the same for the osCommerce Quick Find Content.

Firstly, break the codes of 'text' into 'text1', 'text2' and 'text3'. This allow us to layout them much easily.

$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)

);

new infoBox($info_box_contents);

Then layout the search field ('text1'), hidden field ('text2') and search button ('text3') in a table.

$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);

osCommerce file structure example codessearch-customization-example-1.php

Run the codes again.

The result is now:

osCommerce Quick Find button

Look! The search button is now aligning very well with the search field.

With this knowledge, we can move the search field and search button to any location of osCommerce webpage. In next osCommerce Quick Find customization tutorial, we will move the search field and search button to the osCommerce header.

This is the end of osCommerce Quick Find customization.