Site Search Button Implementation in SuiteCommerce

The Site Search button is a feature prominently displayed by default in the SuiteCommerce Base Theme, enhancing user navigation across sites. Users need to click this button to bring up the Site Search input bar, allowing them to easily find products or information on the site.

Desktop Implementation

For desktop use, you can add the following HTML snippet to any template:

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

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

Mobile Implementation

For mobile applications, the code differs slightly:

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

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

Important Note

The provided code is backward compatible with Commerce themes created prior to the 2018.2 release, ensuring that existing sites can incorporate this feature seamlessly without the need for significant modifications.

Who This Affects

• Developers: Integrate Site Search functionality into eCommerce platforms.
• Administrators: Configure themes and ensure proper visibility of the Site Search button.

Key Takeaways

• The Site Search button improves user experience by simplifying the search process.
• It's essential for both desktop and mobile views, ensuring consistent functionality across platforms.
• The HTML code provided is backward compatible with older themes, minimizing upgrade worries.