Site Search Button Setup in SuiteCommerce

The Site Search button is a crucial feature in SuiteCommerce, providing users with an easy way to search through the site. It is visible by default in the SuiteCommerce Base Theme, and users can click this button to activate the Site Search input bar. This functionality is essential for improving user experience by enabling quick access to site content.

How to Implement the Site Search Button

You can implement the Site Search button within templates for both desktop and mobile views using the following code snippets:

Desktop Code

<div class="header-menu-search" data-view="SiteSearch.Button"></div>

• Base Theme Module: Header
• Base Theme Template: header_menu.tpl

Mobile Code

<div class="header-menu-searchmobile" data-view="SiteSearch.Button"></div>

• Base Theme Module: Header
• Base Theme Template: header.tpl

Note: The code provided is backward compatible with Commerce themes created before the 2018.2 release.

Site Search Input Bar

The Site Search input bar is the primary mechanism for users to perform searches on the site. Its implementation allows users to enter search queries easily. You can use the following code to include the Site Search input bar and Go button:

Site Search Code

1<div class="site-search" data-type="site-search">
2   <div class="site-search-content">
3      <form class="site-search-content-form" method="GET" action="/search" data-action="search">
4         <div class="site-search-content-input">
5            <div data-view="ItemsSeacher"></div>
6            <i class="site-search-input-icon"></i>
7            <a class="site-search-input-reset" data-type="search-reset"><i class="site-search-input-reset-icon"></i></a>
8         </div>
9         <button class="site-search-button-submit" type="submit">{{translate 'Go'}}</button>
10      </form>
11   </div>
12</div>

• Base Theme Module: SiteSearch
• Base Theme Template: site_search.tpl

By default, the Site Search input bar is hidden. To make it visible automatically, you can add the active class:

<div class="site-search active" data-type="site-search">

Go Button Code

<button class="site-search-button-link" data-action="show-itemsearcher" title="{{translate 'Search'}}">
    <i class="site-search-button-icon"></i>
</button>

• Base Theme Module: SiteSearch
• Base Theme Template: site_search_button.tpl

Conclusion

Integrating the Site Search button and input bar in your SuiteCommerce site enhances user experience by facilitating easy navigation and access to content.

Key Takeaways

• Site Search button is essential for user navigation in SuiteCommerce.
• Easy integration with provided HTML snippets for both desktop and mobile.
• Customize visibility of the Site Search input bar with the active class.