Bug on search after having some handlers

🙋Get Help
37

I have updated, but that doesn’t fix the search bug, basically if the home page is another thing than the blog feed, then the search continue showing the home page
this happens with my theme, but also with twentytwenty
the search doesn’t show isSearch

39

Sorry, @alexaspalato, I meant that the bug related to isHome is fixed. :sweat_smile:

Regarding the isSearch issue, the problem is that handlers are the ones responsible for adding that property and return the search result. When a static page is shown as the homepage, the handler being executed for the root link (/) is postTypeHandler, which ignores the search query. As the <SearchForm> component is using /?s= to build the link with search query, it doesn’t work for static homepages.

To fix this you can modify the <SearchForm> component in /src/components/search/search-form.js so it uses state.source.postsPage when building the link with the search query.

// Let's go search for blogs that match the search string
actions.router.set(
  `${state.source.postsPage || "/"}?s=${searchString.toLowerCase()}`
);

That way the handler executed is the one for the post archive, which already has the logic for searches.

This is a bug anyway, either in wp-source handlers or in twentytwenty-theme.

I’ll open an issue in our repo.

41

@alexaspalato, I forgot to mention, as handlers are in charge of honor the search query, you would have to add support for that in your featuredCatHandler as it is the one being executed for the root link (/).

Juanma already explained how to do so:

42

@juanma @David Thank you!
I tried to apply these changes in order to make the search work but it gives an internal server error
So for the moment I deactivated the search as it’s not mandatory for the client
and had what I tried to do on this branch

43

I saw some problems in the code that can be easily fixed:

In this line, you are using parse() but it should be libraries.source.parse():

const { query } = libraries.source.parse(link);

In this one, you don’t need to check if endpoint is "posts" – there is no endpoint variable defined in your handler – , you can use state.source.postEndpoint directly.

const response = await libraries.source.api.get({
  endpoint: state.source.postEndpoint,
  params: { categories: 1780, per_page: 50, search: query.s },
});

And the last thing is that you forgot to export form in packages/frontity-starter-theme/src/theme-ui/components/index.js:

export * from "./form";

With those changes, the search bar should work again.

Cheers!

PS: maybe you don’t want to restrict searches to post belonging to the category 1780, right? In that case, you would have to add that parameter when it is not a search.

44

Thanks, it works!
but effectively I want the search in the whole site, I don’t understand how to do that
" In that case, you would have to add that parameter when it is not a search."

45

You just need to add categories: 1780 if it is not a search. That’s what I meant. :+1:

46

Sorry, I still don’t understand where and how to add that.
Handlers still quite blurry to me…

48

Don’t worry. :blush:

You could write something like this code:

As you only want to restrict the results to a specific category (1780) when is not a search, you can use query.s to check which case it is and pass the appropriate params to libraries.source.api.get().

const response = await libraries.source.api.get({
  endpoint: state.source.postEndpoint,
  params: query.s
    ? { per_page: 50, search: query.s }
    : { per_page: 50, categories: 1780 },
});
50

Thanks, got it, it works :slight_smile:

1 Like