Home | Store | osCommerce Tutorials

osCommerce Quick Find Web Layout

Before studying the file structure or code structure of osCommerce Quick Find, this is better to have an idea of the HTML web layout of the Quick Find Box.

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

osCommerce quick find web layout

As you can see that the osCommerce Quick Find contains the Quick Find Header and the Quick Find Content. Up to now, you should find out that the design of all osCommerce boxes are the same. That's why they can sharing the same classes to display the Box Header and Box Content.

If you follow the codes to display the Quick Find Header and Main Categories Content, the HTML codes of the tables are:

Quick Find Header HTML Code

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="14" class="infoBoxHeading"><img src="images/infobox/corner_right_left.gif" border="0" alt="" width="11" height="14"></td>
<td width="100%" height="14" class="infoBoxHeading">Quick Find</td>
<td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
</tr>

</table>

The codes in blue color are the 1st column of the table

The codes in purple color are the middle column of the table.

The codes in green color are the 3rd column of the table.

Quick Find Content Outer Table and Inner Table HTML Code

<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">
<tr>
<td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
</tr>
<tr>
<td align="center" class="boxText"><form name="quick_find" action="http://localhost/xampp/osc/catalog/advanced_search_result.php" method="get"><input type="text" name="keywords" size="10" maxlength="30" style="width: 135px">&nbsp;<input type="hidden" name="osCsid" value="aa5368b8bc973eda992f1d93c579c873"><input type="image" src="includes/languages/english/images/buttons/button_quick_find.gif" border="0" alt="Quick Find" title=" Quick Find "><br>Use keywords to find the product you are looking for.<br><a href="http://localhost/xampp/osc/catalog/advanced_search.php?osCsid=
aa5368b8bc973eda992f1d93c579c873"><b>Advanced Search</b></a></form></td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
</tr>
</table>

</td>
</tr>
</table>

The codes in black font color are the Outer Table.

And the codes in blue font color are the Inner Table.

Now we know the HTML web layout of the osCommerce Quick Find Box, we can start studying the file structure of osCommerce Quick Find Box from next tutorial.