One of the great features of Netsuite is that they provide custom tags to include in the HTML code of the customizations to their site templates. It’s pretty flexible for the most part, but they often generate ugly HTML and an inflexible visual appearance. One good example of this is the <%=getGlobalSearchHtml()%> tag.
Problems with getGlobalSearchHtml
- It forces the search results to be returned as a subset of the Tab the user is currently on. This usually isn’t a problem, except it’s silly to expect the user to understand how the designer set up the tabs or that they are trying to search within one particular tab. The results returned are global, so why keep them in a tab? My guess is they didn’t think about it much. A related bug is that any tag replacements you have set up will be lost if a user clicks a search result that lives in another tab.
- Netsuite doesn’t support placing the tag in the Logo & Tabs area of the page. That’s right, for some reason Netsuite thinks the only area a site designer would place a search box is at the top of the left column below the header, even though a quick search for web usability guidelines disagrees. Regardless, there is no reason for Netsuite to arbitrarily dictate placement of any site element, and certainly no technical reason for it. Why they would bother making a custom tag they only allow to be used in exactly the same place the search box would be generated without the custom tag is beyond me. I tried the tag out in the Logo & Tabs anyway and of course it worked.
- It generates ugly, hard to style code. My biggest annoyance with this tag is the code it generates. Here it is, in all its beauty:
For those infamiliar with HTML, it does the following (all completely unnecessary): It generates not one but two nested tables. It keeps the form action a POST, using some silly javascript to redirect the form to the search page, rather than simply submitting the form. One side effect is that in Internet Explorer, the enter key doesn’t submit the form. You have to go click the ‘Go’ button with an annoyed look on your face. Designers will notice it lacks anything like a CSS class or ID to allow any customization of the way it looks
So the generated search box is ugly, it works poorly and counter-intuitively, and it’s unneccesarily complicated. By creating my own, I could make it look exactly the way I want, fix the ‘enter submit’ bug, use 1/3 the code, and would have a snippet of code that could be placed on pages outside of Netsuite’s system that will search my site.
Into the Unsupported Frontier
Please note – if you try anything I’m about to explain, don’t ask Netsuite for any help if it goes wrong. It works perfectly for me, but there’s a chance Netsuite could change the way their search processor works or the input it accepts, which would break the custom code. I would keep a backup version of your template with the original tag in it for quick swapping should this happen (which I doubt).
First off, you can put your search box anywhere on the page. Most web sites have them in the top right, but anywhere up there should make sense to your users. What makes these customizations possible is that last summer Netsuite switched from using a POST based search engine processor to a GET. For the less technical, this means the search results page URL looks more like a google search results page (SERP), with the search query in the URL. “Cool”, I thought, “They must have changed the search box to doing a GET as well”. Sadly, they did not. So I decided to take the search results URL (which in our case was https://houseofantiquehardware.com/s.nl?sc=16&category=-116&search=doorset)
and dissect it. The URL is made up of variables and their values – the first variable is denoted with a ? and each additional has a & before it. The variables and their values are:
- sc=16
- category=-116
- search=doorset
It’s pretty straightforward – sc=## and category=## refer to the tab and category the user was in when they searched, respectively. The last parameter is the search term. Pretty simple. If you change the word doorset to hinge and hit enter, it performs another search, just like Google or any other search engine. Interestingly, you can also change the sc & category values to other valid numbers in your site.
On to the Custom Form
So, all I had to do was create a custom HTML form that I can make look the way I want, let users submit the search with the enter key, and fix the annoying ‘tab sensitive’ search results. Here is the code:
Pretty straightforward. Make the method a GET, set the form action to your favorite tab (warning: I tried this with the welcome tab and the search took quite a bit longer to complete, so I would avoid it.), add a search box and a submit button and you’re off. Cleaner, more functional code that works better and allows for all the customization you want. For example, you could get rid of the submit button, or make it an image, or enter some default text into the search box, or label it above or to the left, and use CSS to add whatever pretty effects you wanted.
From here, it’s pretty straightforward. If you want to put your search box in your logo & tabs area, you would add the code above to your ‘Logo & Tabs template’ field under setup > web site > site templates. Alternatively you could put anywhere in the body template and it should work just fine.
More from Fourth Wave
David Norris
Latest posts by David Norris (see all)
- NetSuite Announces Plans to End Promotion Functionality for Site Builder - January 16, 2020
- Most NetSuite Websites Are No Longer Tracking Safari Conversions for Adwords - November 20, 2017
- Make Your NetSuite Site Builder Site Secure – HTTPS Throughout - May 28, 2017
- An Introduction to Automating XML Sitemaps for NetSuite Companies - November 13, 2016
- An Introduction to NetSuite’s Reference Checkout & My Account Bundles - April 18, 2016
What do you think of this Search code I am using on my NS site?
I copied this from another NetSuite site.
What’s the address of your Netsuite site?