Partial (Wildcard) Search for Responsive Theme

New Member
1 0 0

I am trying to add javascript to the theme.liquid file that will allow partial search matches. I came across this old discussion but I'm not able to get it to work.

https://ecommerce.shopify.com/c/shopify-discussion/t/partial-wildcard-search-for-minimal-theme-30699...

I'm using the Responsive theme instead of Minimal. Can anyone help me revise the javascript so each word entered in the search bar has asterisks before and after them to catch all partial matches?

Thank you.  

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Sean,

Britton here with the Shopify support team.

I've done a little bit of testing and this seems to work ok for wildard searches on the Responsive theme for me:

 <script type="text/javascript">

        $('.search').submit(function () {
          	var self = this;
          	event.preventDefault ? event.preventDefault() : event.returnValue = false;
          
            var searchfield = $('.search_box');
            searchfield.val(searchfield.val() + "*");

          	 self.submit();
        });

 </script>

Just using the one "*" seems to be sufficient for getting the wildcard to work as far as I can see. I hope that helps you get set up!

-Britton

Britton Shopify Guru
0 Likes
Tourist
4 0 1

Hi, 

Will this work on the New Standard theme? 

Thanks 

Lisa

 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Lisa,

I did some playing around with new standard and if you add this right before the closing body tag in theme.liquid it should do the trick:

   <script type="text/javascript">

        $('#search-form').submit(function () {
          	var self = this;
          
            var searchfield = $('#search-field');
            searchfield.val(searchfield.val() + "*");

        });

 </script>

-Britton

Britton Shopify Guru
0 Likes
Shopify Partner
18 0 0

Britton,

How can I do the same with the icon theme? Here's the search code from my theme:

              <div id="seek" class="desktop-10 tablet-4 mobile-3">
                
                 <form action="/search" method="get">
                  <input type="hidden" name="type" value="product" />
                  <input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}" />
                  <button type="submit" class="search-button">
                    <i class="fa fa-search"></i> 
                  </button>
                </form>
              </div>

 

And here's the top part of search.liquid:

  <div id="search-bar">
    <form action="/search" method="get">
      <b>
      {% if search.performed %}
      {% if search.results_count == 0 %}
      <p>{{ 'general.search.no_results_html' | t: terms: search.terms }}</p>
      {% else %}
      <p>{{ 'general.search.results_for_html' | t: terms: search.terms }}</p>
      {% endif %}
      {% endif %}
      </b>
  <!--
      <input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}"/> 
-->
    </form>
  </div>
</div>

Let me know if you need anything else. Thanks!

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Mohammed,

If you add this to the bottom of your theme.liquid:

<script type="text/javascript">

        $('#search form').submit(function () {
          	var self = this;
          
            var searchfield = $('#search #q');
            searchfield.val(searchfield.val() + "*");

        });

 </script>

and this to the bottom of search.liquid:

<script type="text/javascript">

        $('#search-bar form').submit(function () {
          	var self = this;
          
            var searchfield = $('#search-bar #q');
            searchfield.val(searchfield.val() + "*");

        });

 </script>

That should work for making all searches on Icon into wildcard searches. Remember to back up your theme before making any code changes.

This is also a pretty straightforward thing to adapt to another theme, so if anyone else has questions let me know!

-Britton

Britton Shopify Guru
0 Likes
Shopify Partner
18 0 0

Britton it works great! Just one thing, if multiple search terms are used at a time how can I make each word wildcard? For example "wood* chair*" instead of "wood chair*"

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi again Mohammed,

add this to the bottom of theme.liquid:

<script type="text/javascript">
    function wildcard(str) {
     str = str.split(' ');                // will split the string delimited by space into an array of words

     for(var i = 0; i < str.length; i++){               // str.length holds the number of occurrences of the array...
          str[i] = str[i] + "*";                        // adds * for wildcard to each array element
     }
     return str.join(' ');                              //  converts the array of words back to a sentence.
}

        $('#search form').submit(function () {
          
            var $searchfield = $('#search #q'),
                searchVal = $searchfield.val();
          
            $searchfield.val(wildcard(searchVal));

        });
</script>

and this to the bottom of seach.liquid:

<script type="text/javascript">
    function wildcard(str) {
     str = str.split(' ');                // will split the string delimited by space into an array of words

     for(var i = 0; i < str.length; i++){               // str.length holds the number of occurrences of the array...
          str[i] = str[i] + "*";                        // adds * for wildcard to each array element
     }
     return str.join(' ');                              //  converts the array of words back to a sentence.
}

         $('#search-bar form').submit(function () {
          
            var $searchfield = $('#search-bar #q'),
                searchVal = $searchfield.val();
          
            $searchfield.val(wildcard(searchVal));

        });

 </script>

That will make it so all the words get a * character appended to them. Thanks for mentioning this, it's a clear limitation to the first solution :)

-Britton

Britton Shopify Guru
0 Likes
Shopify Partner
18 0 0

Thank you, Britton.

0 Likes
Shopify Partner
18 0 0

The wildcard works great, however sometimes it still shows no search results? If I search "microfiber sectional black and white" it will not give me any results, but if I search for each one of those words separately then I get alot of results. Is it possible to tweak it so it searches for each of those words?

0 Likes