How can we create search filter like in hubspot home page menu
I need to add serch box search result will be show into popup with two radio buttons with load more functionality I need same functionaity like https://www.hubspot.com/
How can we create search filter like in hubspot home page menu
Hello @miljkovicmisa As I detailed you earliear I am stucked between this and it is very urget to solve this issue asap. I need your help here please let me know if you have any update for me. I am for your response since long please revert soon.
How can we create search filter like in hubspot home page menu
Hello @vkushwah , there are a few steps to this in my approach (there could be other approaches as well).
1. Clone the search_results.module from @hubspot folder to your theme.
2. This module makes an api call to get all the results and paginate them, the returned object contains the type of the page alongside other info, use that to add a data attribute to the produced template for each result so that you can do the sorting with the radio buttons. 3. Place that module just below opening the "body tag" so that position is relative to the whole content.
4. Position absolute the div of the results ".hs-search-results" with a higher z-index than the rest of the page, and hide it by adding a class ".inactive" with the following rules: "visibility: hidden; pointer-events: none; opacity: 0".
5. add the next rules to add some animation and show the div to the class ".hs-search-results" : "visibility: visible; pointer-events: all; opacity: 1; transition: all .25s ease" 6. Now you need a simple input with a sumbit button that when clicked you fire a javascript function that will do the next things: 6.1. grab the input string (search query) 6.2. pass it to the main function that does the rendering of the results (the one from the search_results.module) 6.3. remove the class ".inactive" from the div of the results ".hs-search-results" to display it.
This is really an overview of the steps, there are a few technicalities to be done correctly but this would end up really complicated to explain in a single post. However if you make some progress don't hesitate to come back with questions, I'd be glad to help you out. I'm also on the Slack community, so you can drop me a line there as well.
If my answer was helpful please mark it as a solution.
