Find the Discourse API for the 'tagged' search bar and pull it into the new homepage

By right clicking an element in Discourse you can find its API directly in the pages source code.

It is the ‘tagged’ search bar we want:

Please be aware that the ‘all of the above tags’ box needs to be selected or it won’t work correctly.

If its difficult to make it work another solution would be to add the main search box and have ‘tags’ typed in automatically when a user clicks it, and a ‘+’ key. You can see the advanced filters actually works by adding text to the main search box itself: ‘tags: backlog+webdev+reactjs’

Here’s is the documentation on working with Discourse API’s: Integrations: Discourse API

1 Like

Hello @AndyatFocallocal , I’ve been having challenges trying to get the search API. Can you send it if you can? So I don’t spend too much time looking for it.

1 Like

It looks to me like you need to install the discourse gem to be able to search for the api’s. I don’t have a local version running so i can’t try that out, but i’ll do a bit more reading. don’t forget you can ask in the forums how to get a hold of that api code.It was my understanding that it was all just there in the source code of each page.

1 Like

I don’t really understand the Gem above, but i followed the post on ‘reverse engineering the api’ and got this:

Its basically just telling you what the url is that it is searching. That mean the the search bar can actually be a browser bar in disguise. When the search icon or enter key is clicked it needs to load the page:

https://publichappinessmovement.com/search/query?term=tags:done*webdev

For our use case it would need to load:

https://[the site user is currently on]/search/query?term=tags:[words a user enters separated by *]

I guess that means the search bar doesn’t need to be pulled in via API at all, it just needs to load that page. I’ll look more into it as we will need to pull in other stats later on in this build.

1 Like

That’s also the 1st of the 3 items we need for pulling an element in via API: How to reverse engineer the Discourse API - developers - Discourse Meta

If we were to use API the second needed item, the payload, is here

image

(although i don’t know what it wants from that information)

I’ll try again on some stats in the admin area

Ok, now i’ve inspected element on the total number of page views.

I had to search through a few names as all the elements are the network > fetch/XHR tab, but after clicking on a few i found one which mentioned ‘consolidated page views’ in it

I see that item two, the payload method is ‘GET’

Item 1, the request url is: https://publichappinessmovement.com/admin/reports/bulk?reports[consolidated_page_views][facets][]=prev_period&reports[consolidated_page_views][start_date]=2021-12-24&reports[consolidated_page_views][end_date]=2022-01-24&reports[signups][facets][]=prev_period&reports[signups][start_date]=2021-12-24&reports[signups][end_date]=2022-01-24&reports[topics][facets][]=prev_period&reports[topics][start_date]=2021-12-24&reports[topics][end_date]=2022-01-24&reports[posts][facets][]=prev_period&reports[posts][start_date]=2021-12-24&reports[posts][end_date]=2022-01-24

1 Like

I’ve asked where to find item 3 here: Discourse API Documentation - #317 by Drew-ART - developers - Discourse Meta

1 Like

I posted as its own post and got the solution: Discourse API Documentation. Can't find the parameter sent - #3 by Drew-ART - support - Discourse Meta

I see a few other possibilities for solving this issue:

We have a landing page for our site built in Reactjs and our Discourse forum is one half of the total platform. I want users to be able to search the forums from that landing page so they can go directly to where they want.

We actually load the Reactjs landing page inside of our Discourse (for unrelated reasons), so Discourse is open in the same window and the search function is in the header, but we want to pull it into the Reactjs page.

These are the three options i can think of:

1 - As Discourse is already open i was thinking perhaps its possible to simply mirror whatever is typed into that search bar into Discourse’s search function.

2 - Perhaps its easier to send the search call to Discourse via API

3 - Discourse uses url’s in a very clear and open manner. Would it be simpler to just create a new function which searches by navigating to the search url? For example Search results for 'homelessness order:latest' - Public Happiness

with option 3 the parts that would change in the search function is the word ‘homelessness’. The main issue with this method is that i don’t believe the function can support multiple words

If you were tackling this task which one of those would you try, or something totally different?

@Marvelxy I thought of a hack to get this feature working, although it would need to be improved in the future. What do you think of this:

When a user clicks on the top search bar the search feature at the top opens instead of the expected behaviour where they’d be typing into the text entry box.

Even better if we can also inject a # into that search box as that is how users search by category or tag (advanced users can simply delete the hashtag).

image

A script saying something like:

  • User clicks on X element in page

  • do Open Search bar and type ‘#’

From a user point of view they’d just be typing into a different field entry box than they clicked. I think that would be intuitive fairly quickly, although they might be a little confused the 1st time it happens.

We could also tell Discourse to open the search popup as a large modal window with the search function centered. That would remove the initial confusion for the user as their click is is not opening something in an unexpected location anymore.

I’ll make a mock-up

Something like this would be sufficient, with Discourse opening the search popup in the middle of the page and it opening with a # in the text box.

The ideal solution would be closer to this:

But i believe that’s very difficult to achieve as we’d be asking Discourse to track an element that is loading on an external site in an i-frame, and open it search dropdown exactly on top of it. The 1st solution in this comment would be easier as is wouldn’t have to track that element, just open it as a big arse white modal in the center of the page.

Here’s a reply i got from Renato in a DM.

if you’re using an iframe to show the React app, I’d try your first option, reusing the Discourse search from inside the iframe. You can use the postMessage API to listen to events on a Discourse theme component, where you probably can manipulate the native search, and send those events from the iframe. It’s just an idea though, would need to try to confirm it’s doable.

That’s cool, i wasn’t aware we could sniff what a plugin was doing, grab the native search box and pull it into Discourse to combine the two search boxes.

@AndyatFocallocal, Do we have a full search page I can get the codes from? Or I have to use the one on the dropdown?

1 Like

I couldn’t find a separate page for the search, just the search drop-down with advanced selected.

I think that the search function in Discourse is basically a command line/URL modifier. When you click advanced, type something in or click boxes, all it does is add pre-defined code to the URL. You can see it live if you tick a box the URL changes ready for you to hit enter, so we’re just copying parts of that function directly or opening the drop-down centrally when users type there.

1 Like

Wait, I’m wrong.

https://publichappinessmovement.com/search

1 Like

Nice! I will try to work eith the code on the search page. I will pit it on in iFrame. I hope it works.

The issue you might run into is that we already have an i-frame active on the whole site with the Docus plugin. Perhaps it’ll be ok, or you can work through the existing one. Tbh I don’t know much about whether i-frames can coexist successfully

Hmmm… I’ve never placed an iframe inside another iframe before. Let’s see how it goes.

1 Like