Is it possible to do a storefront search using checkboxes and not a search field?

CasperLarsen
Tourist
4 0 0

When i do this:

<form action="{{ routes.search_url }}" method="get" role="search">
  <input type="checkbox" name="q" value="Floor"/>
  <input type="submit" value="Submit"/>
</form>

I get this output:

/search?q=

which is missing the value...

 

If i do this:

<form action="{{ routes.search_url }}" method="get" role="search">
  <input type="text" name="q"/>
  <input type="submit" value="Submit"/>
</form>

i get the correct output: /search?q=Floor (dependant on what is typed in the textfield)

 

Any expert who knows what is going on?

( If i change the name attribute's value to anything else than "q" then it shows the correct output and doesen't "delete" whatever comes after the "=" )

0 Likes
Ninthony
Shopify Partner
2237 337 894

Not sure how it relates, but the q probably stands for query. An option I can think of is to leave the text input there, but hide it. Then when submit is clicked, prevent the submission, get the value of the checked checkbox and push it into the hidden text field, then submit the form. Are you going to have multiple checkboxes? And are they all going to be able to be checked? Meaning you could submit multiple terms? If that were the case how would you want to submit them? For instance you check "Floor" and "Chair" how would you want them placed into the search input? "Floor, Chair" "Floor Chair" etc.

If you're only doing one option radio buttons may be more appropriate because you can't select more than one if they have the same name.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
CasperLarsen
Tourist
4 0 0

Hey, thanks for the reply, didn't think of that. Gonna try it.

 

There will be multiple options where more than one can be chosen at a time.

Ideally they would be submitted like this:

/search?q=floor+brown+tiles

Etc.

expecting to use javascript to remove the q= on multiple terms.

0 Likes
Ninthony
Shopify Partner
2237 337 894

I got this working, just change whatever you want:

<div class="search">
  <form action="/search" method="get" role="search" class="search__form" autocomplete="off" id="my-search">
    <input type="checkbox" class="checkbox-query" value="Floor"><label>Floor</label>
    <input type="checkbox" class="checkbox-query" value="Chair"><label>Chair</label>
    <input name="q" type="search" id="search__input-new" style="display: none;" placeholder="Search store..." value="{% comment %}{{ search.terms | escape }}{% endcomment %}" class="search__input" />
    <input type="submit" value="Search" class="search__btn-new"/>
    <div class="" id="search__results"></div> 
  </form>
  <script>
  let submit = document.querySelector('.search__btn-new');
    let input = document.getElementById('search__input-new')
    submit.addEventListener('click', function(e){
    e.preventDefault();
    let checked = document.querySelectorAll('.checkbox-query:checked')
    let query = [];
    if (checked.length > 1){
      query = [];
      for(var i = 0; i < checked.length; i++){
      	query.push(checked[i].value);
      }
    }else {
    	query = checked[0].value;
    }
      if (typeof query == "object"){
      query = query.join(' ');
      }
      input.setAttribute('value',query);
      document.getElementById('my-search').submit(); 
    })
  </script>
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
CasperLarsen
Tourist
4 0 0

Hmm. Doesn't work for me. Still nothing after q=

I think i found the error actually. It seems there's a plugin or something, overriding all the attributes in input fields for some reason.

 

Can't believe that took me 3 days.

Thanks alot for the help anyways, i am still gonna use your script since it could be useful later, so it was not all in vain.

0 Likes
Ninthony
Shopify Partner
2237 337 894

No problem, feel free to reach out if you have any other questions. I check the forums every day other than the weekends so if you send me a DM here I'll be sure to get back to you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D