Often times I am asked how to add a search box to the header of the storefront. Most of the time we simply recommend the nsScript function:
CODE
<ns:Search type="custom" />
The HTML that is generated is lightweight, and can be styled fairly easily with CSS, but in some cases designers want total control over the HTML. Such was the case recently, and I prescribed a solution that allowed total control over the markup, while retaining the same search functionality that is built into the software. The search in the software simply takes the value of the textbox, encodes it for the URL, and redirects to the search page, and this is rather easy to perform using a bit of JavaScript.
First of all, you need to have at least a textbox and an input button, each with a unique ID. I used the IDs of "search-textbox" and "search-button", but you can use whatever IDs you like. I'll put these in a simple table for example purposes:
CODE
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="textbox" id="search-textbox"/>
</td>
<td>
<input type="image" id="search-button" alt="Go" src="/images/my-search-button.gif" />
</td>
</tr>
</table>
Then, use this script, matching the IDs with the previous example. It can be placed in a ".js" file and linked, or simply pasted into the Top of Page HTML.
CODE
<script type="text/javascript">
function loadSearch() {
var searchText = document.getElementById("search-textbox");
var searchButton = document.getElementById("search-button");
searchText.onkeyup = function() {
if (event.keyCode=='13') { searchButton.click();}
};
searchButton.onclick = function() {
if (searchText.value != '') {
window.location = '/search.aspx?find=' + encodeURIComponent(searchText.value).replace(/%20/g, '+');
return false;
}
};
}
MC.addLoadEvent(loadSearch);
</script>
That's it! (IMG:
http://forums.networksolutions.com/style_emoticons/default/thumbsup.gif)
If you would like the button image to change when you hover your mouse over it, use the following script instead. Set the button input "src" to your "off" image, and change the searchButtonOn/searchButtonOff variables to the matching on/off images for the button.
CODE
<script type="text/javascript">
function loadSearch() {
var searchText = document.getElementById("search-textbox");
var searchButton = document.getElementById("search-button");
var searchButtonOff = '/images/my-search-image-off.gif';
var searchButtonOn = '/images/my-search-image-on.gif';
searchText.onkeyup = function() {
if (event.keyCode=='13') { searchButton.click();}
};
searchButton.onmouseover = function() {
this.src = searchButtonOn;
};
searchButton.onmouseout = function() {
this.src = searchButtonOff;
};
searchButton.onclick = function() {
if (searchText.value != '') {
window.location = '/search.aspx?find=' + encodeURIComponent(searchText.value).replace(/%20/g, '+');
return false;
}
};
}
MC.addLoadEvent(loadSearch);
</script>
How To: Create Custom Search Controls, ... with your own HTML
Network Solutions Forums > nsCommerceSpace™ Forums > nsCommerceSpace™ > How Do I? > nsCommerceSpace™ Premium
Mar 18 2009, 05:28 PM
