Search Results Search bar Navbar to Shop page (cms filters)

Attributes
1

Hi there,

My client would like to add a search functionality in the navbar that filters all products listed on the “Boutique” page.

I’ve created a modal with a search bar inside the navbar component, and I’ve added some code to make the search bar fetch results from the Boutique page. However, it’s not working as expected so far.

Do you know a solution to implement this correctly?

Here is the read-only link to my Webflow project:
Read only link

I’d really appreciate your help! :v:

2

Hey there @hello28!

You seem to have the wrong class for your button query selector, which causes the event listener not to fire because the element it is attached to is not found.

The correct selector would be

const button = document.querySelector('.button.is-modal-filters.is-home.w-button');

You could also add an ID, as you have done with the userInput, to prevent future class changes from breaking the script.

1 Like
3

Hey Luis,

Thanks a lot for your help, it’s working now!

However, I have one more issue. I tried duplicating the modal and search button to make it responsive (since the navbar is different on desktop and tablet). The redirect works and takes me to the “boutique” page, but it doesn’t display the search results.

Do you have a solution for this?

Here’s the read-only link :point_down:
Read-only link

4

Hey there @hello28!

I have tested on my end and both desktop and tablet breakpoints are working as expected.

Is it still broken on your end?

5

Hey!!

Thanks for the answer Luis.

It is, indeed, still not working on my end, the redirect is working, but the filter is not applying… On mobile and tablet