How to Make a Search Bar?

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?

Thank you.

Interested in seeing the answer as well.

1 Like

Hi,

A search block would be of course very welcome!

In the meantime, I just managed to make one from scratch, inspecting the Gutenberg block.
It seems to do the trick :slight_smile:
Just setup your search results template and you’re done!

image

So here is my setup:

image

- 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)

Form attributes:

Button attributes:

Input attributes:

2 Likes

Ingenious.

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.

Interesting solution. I had never tried using Cwicly’s advanced attributes section. By following your guide I was able to reproduce your results.

Prior to your guide, I used the Gutenberg block and modified it to appear in a modal pop-up window after clicking the search icon in the main nav.

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.

I’ll probably give it a go over the weekend.

2 Likes

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):

I actually transformed the input to button/modal yesterday because it was easier to deal with responsive header :wink:

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.

Well I actually moved to button/modal like you for responsive purpose :wink:

There is really not styling, just a div including input and icon button.

You nailed it :muscle:
I don’t actually use filters for now, but with inputs it works like a charm, mapping the generated URL parameters with the query meta :slight_smile:

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.

You can also add it using my public key: jDE3gFpa0N82bWSschGT by following the Docs: Cloud Design Library - Documentation

2 Likes