How can I substitute a BigCommerce storefront route with my App route?

Question

I'm trying to overwrite the original search of my BigCommerce site with a custom one made by me similar to this https://www.bigcommerce.com/apps/searchanise/ but I don't get how to show the search results from my custom NextJs app.

I created a NextJs app starting from this https://github.com/bigcommerce/sample-app-nodejs and it works.

I'm able to install it in my Sandbox store and play with it.

But this is something related to the control panel of my store, instead I need to play with the storefront.

I'm trying to reverse engineering the Searchanise app, but all I found is that it created a Web Page (probably via API during installation) called search-results-page with the route like /search-results-page and blank content and that's called from action Form of the search bar in the storefront.

So when the user search something the original search result page is substituted with the Searchanise one.

I really cannot understand how this is done.

I tried to create a new Web Page /custom-search and I added the same route to my app in NextJs, but it doesn't seem to get it when I navigate to it from the storefront.

It's also hard to understand how the Searchanise app can override the Form action of the original template including their custom route /search-results-page, probably via JS DOM manipulation?

I also looked via API to the store widgets and scripts but it doesn't seem to have anything related to the Searchanise app, so probably there is something in the app itself that manage the storefront.

Any idea?

Answer 1

Well, I found that the Web Page created by the app is not blank, it contains some JS that init the new results page overriding the current one. And that's how to do it.

Answer 2

Looking at the sample store, seems like the app is using two different BigCommerce APIs to replace the search:

1. Scripts API, to load a script which replaces the default storefront search box with their own. This include logic to create a more interactive search experience and a form submit action to a new search results page the app creates. API is here: https://developer.bigcommerce.com/docs/rest-management/scripts#create-a-script

2. Pages API, to create the new search results page. Includes DOM elements and script to load the results as soon as the page loads. API is here: https://developer.bigcommerce.com/docs/rest-content/pages#create-pages

Optionally, to make the category page faceted search UX match the new search results page UX, they ask merchants to manually update their category page: https://docs.searchanise.io/set-up-smart-navigation-stencil-themes-bigcommerce/