Mary7678 Mary7678 - 2 months ago 24
CSS Question

What theme changes could be causing BigCommerce quick search to not function?

A client requested their site be made responsive and the design updated slightly, while remaining as close to the original as possible. We installed the Classic Next (light) theme on a staging site and made edits to the theme appearance to that effect. At some point, the quick search (the feature that causes suggested products to show up immediately below the search box as a user types and before the search is executed - looks like this: Functioning BigCommerce quick search.) function stopped working. I contacted BigCommerce support, and they suggested checking the quicksearch.js and search.html files, neither of which have been modified from the original theme. I asked if anyone more familiar with BigCommerce themes would have additional suggestions, and they told me to hit the forums.

The JavaScript that should trigger the quick search is present, but never seems to be called. I am getting a couple warnings in the console - one an "unreachable code after return statement" for common.js, which also has not been changed, and one is "Use of getPreventDefault() is deprecated. Use defaultPrevented instead." for jQuery - but, as far as I can tell, neither should stop the quick search from working. The debugger shows that quicksearch.js is loading.

The site having this issue is https://www.brace-mart.com/.

What is wrong with the theme that is preventing the quick search from working? Wheat files could cause a problem like this?

Thank you so much for your help!!!

Answer

Turns out the theme had a %%Panel.DrawerMenu%% snippet which didn't seem to be doing anything on the site - other than breaking the quick search. We removed the snippet from 56 files and the quick search started working.

EDIT: Thanks to @tim-diztinct's notice, we put the drawer menu back. Looking in the code for the drawer menu and playing around, we ended up removing the search bar from the drawer menu. So

<div id="DrawerMenu">
<div class="inner">
    <div class="drawer-search">
        %%Panel.HeaderSearch%%
    </div>
    %%Panel.SideCategoryList%%
    %%Panel.SideShopByBrand%%
    %%Panel.SideCategoryShopByPrice%%
    %%Panel.SideAdditionalInformation%%
    %%Panel.SideAccountNavigation%%
</div>
</div>

Became

<div id="DrawerMenu">
<div class="inner">
    %%Panel.SideCategoryList%%
    %%Panel.SideShopByBrand%%
    %%Panel.SideCategoryShopByPrice%%
    %%Panel.SideAdditionalInformation%%
    %%Panel.SideAccountNavigation%%
</div>
</div>

Once we removed the search bar from the drawer menu, the quick search in the main menu worked! We modified the main search bar to always be visible in the header, since we wanted it there anyway.

My theory is that, because the page loads the drawer menu before the main menu, and the quick search was working in the drawer menu but not the main menu before we removed the search bar from the drawer menu, the quick search is applied only to the first search bar on the page and has some sort of (possibly theme-related) error that prevents its application to the second one. But that's just a theory . . .