Search Bar in the header

[thatlittlenothing]

Hi there,

I’m new to bubble and wondered what the best way to do this is. I’m currently building an eCommerce food store that has a few different pages in it. I want the search to be in a reuseable element that is the header that features on every page. How would I get the search results to show on top of the content then if the user deletes the input the original page is back?

Cheers for the help in advance

[petter]

Hey @thatlittlenothing, welcome to the board!

If you want to keep the search bar in a reusable, your best option is probably to user URL parameters for the string, and watch for that parameters on the page where you want to show the result.

You set the URL parameter by using the Go to page action.,

[thatlittlenothing]

Would you be able to demo what you mean? I understand the concept but don’t know what workflow to write.

Cheers for the help.

[petter]

First, you’ll need Bubble to react to the value of the Search input changing, so right click the input and choose Start/edit workflows. Bubble automatically creates a Input’s value has changed workflow:

Then, use the Go to Page action to set a new URL parameter with the search term. It doesn’t matter what you name the parameter, but set the value to the input’s value:

Then, to reference the content of that URL parameter on the main page, use the Get Data from Page URL function:

[thatlittlenothing]

Cheers thanks for the managed to get it working now.