Using ShopSite Search for Dynamic Looking Pages

[AnonymousParticipant]

With some basic HTML and a little JavaScript, it’s possible to create a search form in ShopSite that not only allows for keyword searching, but also provides drop-down lists for customers to select from.

In our first example, we will create a simple search form that allows a customer to search for a product’s Brand by selecting it from a drop-down list.

Before we begin building the form, some preparation is required to determine which values you would like to search for. We will be using the “Search Keywords” field available on each product as our search values. This field is a comma-delimited list of terms that we can use for brand names, product categories, or even price ranges, and is what our form will be searching against.

For our search on brand names, we will assume we have products under the brands “ABC” and “DEF”. Since these brand names could also be in product names we want to make sure our search is only for products with the correct words in the keyword field. Therefore we will use “brand_abc” and “brand_def” as our keywords.

For each product made by brand “ABC”, enter “brand_abc” in it’s keyword field. Then for each product made by brand “DEF”, enter “brand_def” in it’s keyword field. You will see how these values are used when we build our search form below.

The first step in building the form, is to obtain the current search form code that your website is using. View the source code on a page that uses ShopSite’s search field, and you will find code similar to what is shown below:

Original Search Code

<div id="search">
<form action="http://[domain and path to productsearch.cgi]?storeid=[your store id]" method="post">
<input type=hidden name="storeid" value="[your store id]">
<input type="text" name="search_field" class="search" size="13" onFocus="if(this.value=='Search')this.value='';" onBlur="if(this.value=='')this.value='Search';" value="Search">
<input type="submit" value="Go" name="Go" style="padding: 0px; margin: 0px;">
</form>
</div>

 

The “<form action” line will contain the full path to the “productsearch.cgi” file along with your store ID. Make sure you copy that line with their exact values.

To change the form to a drop-down list, replace this line:

 

<input type="text" name="search_field" class="search" size="13" onFocus="if(this.value=='Search')this.value='';" onBlur="if(this.value=='')this.value='Search';" value="Search">

 

With this code:

 

<span style="color: #000000; font-weight: bold;">Brand:<br>
<select name="search_field" id="search_field" class="search"/>
<option value="">- Select -</option>
<option value="brand_abc">ABC</option>
<option value="brand_def">DEF</option>
</select>

 

This change removes the text field from the original form and replaces it with with a drop-down list containing a label of “Brand” and a Select field containing our different brand keywords. The “value=” section on each line must contain the keyword we want to search for. The section where we display the brand name to the customer (ex: “>ABC<”) should be the real brand name and not the actual keyword. This is only shown to the customer and does not effect the value that we search for.

Here is the complete code:

(Remember to update the productsearch.cgi path and the store id with your values.)

 

<div id="search">
<form action="http://[domain and path to productsearch.cgi]?storeid=[your store id]" method="post">
<input type=hidden name="storeid" value="[your store id]">
<span style="color: #000000; font-weight: bold;">Brand:<br>
<select name="search_field" id="search_field" class="search"/>
<option value="">- Select -</option>
<option value="brand_abc">ABC</option>
<option value="brand_def">DEF</option>
</select>
<input type="submit" value="Go" name="Go" style="padding: 0px; margin: 0px;">
</form>
</div>

 

To see this form in action, add a new page to your ShopSite store and put the code above in the Text 1 field. When you publish and view that page you will see your new Search form.

Advanced Searching

With the addition of some javascript and more custom keywords, we can build a search form with multiple drop-down lists and retain the original keyword search field. This allows a customer to narrow the results of their search, for example to a specific brand and/or price range.

In the following example we will add another dropdown called “Price”. In our sample, we want to provide 3 price range options to the customer: $0 – $10, $11 – $20, and $20+. Similar to the Brand search, we need to create custom keywords that will be assigned to products in these price ranges, so we have selected the following: “price_0-10″, “price_11-20″, “price_20+”. Each keyword is to be assigned to products that have prices in the corresponding range.

Here is the new form code:

(Remember to update the productsearch.cgi path and the store id with your values.)

 

<script type="text/javascript">
function Search()
{
(document.search_form.search_field.value) = (document.search_form.search_field1.value) + " " + (document.search_form.search_field2.value) + " " + (document.search_form.search_field3.value)
}
</script>

<div id="search">
<form action="http://[domain and path to productsearch.cgi]?storeid=[your store id]" method="post" name="search_form" onSubmit="Search()">
<input type=hidden name="storeid" value="[your store id]">
<input type="hidden" name="search_field" id="search_field" value="">

<br>
<span style="color: #000000;">Select a Brand, a Price Range, or enter a keyword to search for below:<br>
<br>

<span style="color: #000000; font-weight: bold;">Brand:<br>
<select name="search_field1" id="search_field1" class="search"/>
<option value="">- Select -</option>
<option value="brand_abc">ABC</option>
<option value="brand_def">DEF</option>
</select>
<br><br>

<span style="color: #000000; font-weight: bold;">Price:<br>
<select name="search_field2" id="search_field2" class="search"/>
<option value="">- Select -</option>
<option value="price_0-10">$0 - $10</option>
<option value="price_11-20">$11 - $20</option>
<option value="price_20+">$20+</option>
</select>
<br><br>

<span style="color: #000000; font-weight: bold;">Keyword:<br>
<input type="text" name="search_field3" id="search_field3" class="search" size="13"><br>
<br>
<input type="submit" value="Search" name="Go" style="padding: 0px; margin: 0px;">
</form>
</div>

 

In this example we have 2 drop-down fields called “search_field1″ and “search_field2″, a keyword search field called “search_field3″, and a hidden field called “search_field”. This hidden field is what will be passed to ShopSite when the search is performed.

The JavaScript code combines the values of the 3 “search_field#” fields into the “search_field” value, and then posts the final value to ShopSite’s search function to display the results. The following code has been inserted into the “form action=” line to execute the JavaScript and to properly reference the form field values when the Search button is clicked: name=”search_form” onSubmit=”Search()”

If you would like to see working demos of both search examples, they are available here:

http://shopsite-demo.lexiconn.com/search_example.html

Tips:

- In your Backoffice under Preferences > Search Settings > Search Indexing, make sure that the “Search Keywords” option is turned on.

- Remember to update the productsearch.cgi path and the store id values with your site’s settings when you create your HTML code.

[Author]

Posts