Search functionality is an essential component of any Ecommerce site. NopCommerce ships with a variety of search features, though the out of the box functionality might not always be what you want. By default, NopCommerce only searches product titles for the keywords a user entered into the search bar. For many clients and customers, this is too basic.
Luckily NopCommerce also comes with a handful of advanced search features. Users can either click on a link to go to an advanced search page, or Nop will suggest advanced search after they have already ran a query. However, some of the advanced search functionality seems as though it should be enabled by default, such as the ability to search product descriptions and tags.
Through the NopCommerce admin area you can enable full text search as long as you have full text search installed and configured on your database. However, this still only applies to advanced search. What if we want to have the default searchbox widget always search in product descriptions and tags without the user having to worry about advanced search?
The solution is actually pretty simple, assuming you’re at least somewhat familiar with NopCommerce development.
There are two views that implement search functionality in Nop – search.cshtml and searchbox.cshtml
Both of these views actually post to the same search method in the catalog controller. Search.cshtml simply has more inputs that get mapped to additional properties on the Searchmodel. This means that we can simply move whatever field we want to enable on the search widget from search.cshtml to searchbox.cshtml, and the controller will take care of the rest.
Not all of the advanced search properties make sense to enable as defaults – primarily just search in description (which will include tags).
The two we need from from search.cshtml are model => model.As and model => model.Sid, which enable Advanced Search and Search in Description, respectively. However, we can’t just copy over the HTML helpers from search.cshtml since searchbox.cshtml since searchbox has a different model. The easiest way is to actually open the search page in a browser and copy the html out of it. Long story short, you need the two fields below:
<input id="As" name="As" type="checkbox" value="true" checked="checked" hidden="true" tabindex="14"> <input id="Sid" name="Sid" type="checkbox" value="true" checked="checked" hidden="true" tabindex="22">
Copy them into your searchbox.cshtml file above the submit field and make sure they are both set to true and hidden. Your searchbox fields should look like this:
<input type=“text” class=“search-box-text” id=“small-searchterms” @(Model.AutoCompleteEnabled ? Html.Raw(” autocomplete=\”off\””) : null)
value="@T("Search.SearchBox.Tooltip")" name="q" onfocus="if(this.value=='@T("Search.SearchBox.Tooltip")')this.value=''" onblur="if(this.value=='') {this.value = '@T("Search.SearchBox.Tooltip")';}" /> <!-- We Added these two fields --> <input id="As" name="As" type="checkbox" value="true" checked="checked" hidden="true" tabindex="14"> <input id="Sid" name="Sid" type="checkbox" value="true" checked="checked" hidden="true" tabindex="22"> <input type="submit" class="button-1 search-box-button" value="@T("Search")" />
Congratulations, advanced search, or more specifically search in description, is now enabled by default on your site. One small step for you, but one less step for your customers. Remember, make sure you have Full Text Search enabled in your Miscellaneous admin settings
