Snippets: How to Add a Search Box to Your Store Design

Last Updated: Jul 10, 2014 02:32PM EDT

Using the default "include" file

You can easily display a search box in your store design by including into the code a file called smallSearchBox08.asp located in the pc folder. To do so, add the following line of code to the section of your HTML code where you want the search box to appear (e.g. a table cell):
<!-- #Include file="SmallSearchBox08.asp"-->

If you need to edit the way the search box is presented in your storefront, either open the file SmallSearchBox08.asp itself in your favorite HTML editor, or edit the main style sheet used by the storefront (pcStorefront.css) and edit the classes that pertain to the search box.

Using the code itself

You can also take the code and directly position it on any page. Open SmallSearchBox08.asp in your HTML editor and you will see that the code reads as follows:
<form action="showsearchresults.asp" name="search" method="get" class="pcForms"> <input type="hidden" name="pageStyle" value="<%=bType%>"> <input type="hidden" name="resultCnt" value="10"> <input type="Text" name="keyword" size="14" value=""> <input type="submit" name="submit" value="Go &gt;&gt;" id="submit"> <div class="pcSmallText"> <a href="search.asp">More search options</a> </div> </form>

Copy and paste the code in your customized header.asp or footer.asp pages and edit it as you wish.

If you decide to place the code on a page that is outside of ProductCart, make sure to remove the following line of code (or hardcode the value as mentioned in the next section).
<input type="hidden" name="pageStyle" value="<%=bType%>">

Editing the form behavior

A couple of quick edits can help you change the way the search box behaves:
  • Change the value of the pageStyle hidden field from <%=bType%> (this code is retrieving the default page style used in your storefront and set in the Control Panel's Settings > Display Settings area) to one of the following values to change the way search results are presented:
    • h = search results are shown horizontally
    • l = search results are shown in a list
    • m = search results are shown in a list, with the ability to add multiple products to the cart
    • p = search results are shown vertically
  • Change the value of the resultCnt hidden field from “10” to any other integer to change the number of results shown on the search results page (e.g. 12).
  • Add the following hidden field to the form to obtain the same behavior as if the customer were checking the “Search on Exact Phrase” option on the advanced search page.
    <input type="hidden" name="exact" value="1"/>


Add an AJAX waiting message for a small search box

Step 1 - Open the file “pc/SmallSearchBox.asp” in a text editor.
Place the following code directly below the last line of code on the page:
<script language="JavaScript"> <!-- function pcf_CheckSearchBox() { pcv_strTextBox = document.getElementById("smallsearchbox").value; if (pcv_strTextBox != "") {; } } //--> </script> <% '// Loading Window Response.Write(pcf_InitializePrototype()) response.Write(pcf_ModalWindow(dictLanguage.Item(Session("language")&"_advSrca_23"), "2", 200)) %>
Step 2 - Add the JavaScript that will initiate the Pop-Up window when you click the “Search” button.
Replace the following line of code:
<form action="showsearchresults.asp" name="search" method="get" class="pcForms">

With this line of code:
<form action="showsearchresults.asp" name="search" method="get" onSubmit="pcf_CheckSearchBox();" class="pcForms">
Step 3 - Add basic validation so the search box only shows when a keyword has been entered.
Replace the following line of code:
<input type="Text" name="keyword" size="14" value="">

With this line of code:
<input type="Text" name="keyword" size="14" value="" id="smallsearchbox" >

For more information on customizing small search box features, see the following articles:
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found