What’s the easiest way to make a search bar in Cwicly? I want an empty input field with a submit button next to it. Then when you click the button, it submits the search query and loads the results in the next page.
I spent several hours trying to make a search bar using the Query and Input blocks, but no matter how I clicked around in the Query settings, I couldn’t make a basic text input field with a submit button next to it. In the end I resorted to using Gutenberg’s generic Search block, which feels like a blight on my otherwise 100% Cwicly-built site.
Using an Input block by itself didn’t work, because I couldn’t select an input type in the dropdown. I read on another post here about how you have to nest your Input block in a Div block, which is nested inside a Query Template block, and then inside a Query Block, but that didn’t work for me, as I still wasn’t able to select an input type in the dropdown, and it kept repeating the Input block. Then, no matter how many times I selected Search in the Query block settings, it would reset itself to the default settings after closing.
I sought an answer in the Cwicly LIbrary where I saw the pre-built comment design layouts, but those were designed for comments, not search, and there is no equivalent for a search bar. I attempted to change the Query settings around to make it be a search bar, but that didn’t work for me either.
To conclude, how can I add a site-wide search bar to my site in Cwicly?
Does the Cwicly staff plan on making a Cwicly Search block to replace the Gutenberg one, so it’s a one-click install? Or can you add a simple pre-built Search Bar to the Design Library?
In the meantime, I just managed to make one from scratch, inspecting the Gutenberg block.
It seems to do the trick
Just setup your search results template and you’re done!
So here is my setup:
- div (change tag to form and add attributes below)
-- button (icon and no text, change tag to button and add attributes below)
-- input (add attributes below)
Can you show me what the result is?
Could we use this to link to a search page with filters? Like how you might enter search/filter parameters on a homepage for a real estate listing site, and then get taken to the search page with the chosen filters.
The end result of your block and my block are the same, in that it loads the search results in the next page, and the URL changes to add /?s=test or whatever term you searched for.
I prefer to have a Cwicly-made block. So, now it’s a question of figuring out how to style your version to look like my version, which I’ll begin doing now.
To owynter, this is a standard search field that you can find on any WordPress site. You put in a term and it searches your site for it. I’m not sure if it can do what you’re asking for, but there might be a guide out there, unrelated to Cwicly, that shows how to do such a thing with the search field.
Theoretically… if all you’re doing is adding the url parameter, then you should be able to structure that to match the meta queries on a page with a query + filter.
Well the search input is like my screenshot above, and the result page is like that (standard /?=text WP search URL generated by default search template with default query and simple query template including post title):
As for linking to a more complex results page with filters, there are different ways to do it.
One common way for me seems to be using a similar form with multiple inputs which convert to parameters in result page URL, then on this page you need to get the URL parameters to feed the query.
Haven’t played with Cwicly filters yet so I can’t tell about a Cwicly dedicated solution.
I added a ‘Search Bar - Horizontal’ to my Cwicly Cloud Library and submitted it to the Community. It looks like the one in my picture above, with a Div containing an Input and search Button. It’s based on your guide, so the advanced attributes and tags are preset. Just click and go.
It’s my first time doing this and I don’t know if it worked right, or has to be approved. Once (and if) approved, you can search for it in the Community tag of the Library button at the top left of the Editor, under All.
Has anybody connected this to the filter-block and query-block so it can be used with the query and filter-blocks ?
Desired outcome is to put a search term in the input-box and then the results page (or modal pop-up) has some filters that the resut can be filtered by - with or without a preset query so we can control what content is being searched and can be filtered ?
There is just one thing I’m wondering how to achieve. Once you are on the search results page usually there is again a search field with the current search term in it. So the visitor can modify the search term and also sees what he initially searched for.
Does someone know if I can modify the Cwicly input field to contain the current search term?
In this screenshot you see the WP Search Block with the current search term and below the Cwicly input field that is empty.
how does one go about creating the search results page? consider me a total amateur.
i’ve gotten so far as to use the original Wordpress ‘search’ block, and it returns me to a themed search page but i don’t know how to correctly display the found pages in a grid or something?
For this you place a Paragraph inside the Query Block and set the Visibility Conditions to “Has items > false”
This way the message “No items found” only appears when the query is empty.
