Partial (Wildcard) Search for Minimal Theme

Highlighted
New Member
5 0 0

Hi,

There are several old posts in the forum about making the search function automatically add a wildcard to search terms, but I cannot get the function to work.  We are using the Minimal Vintage theme.

I tried the solutions in the following threads:

https://ecommerce.shopify.com/c/ecommerce-design/t/wildcard-search-by-default-177673

https://ecommerce.shopify.com/c/shopify-discussion/t/method-for-partial-word-matches-in-store-front-...

I am adding the javascript code to the head in theme.liquid and adding the onsubmit code to the search form in search-bar.liquid.

Any help would be appreciated.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 36

Hello there, Ben here - your Shopify Guru! 

  The code you are trying to use was not designed for the minimal theme. I would recommend you remove and changes you made from the first forum thread you linked to and just go with the method outlined in the second thread. That could uses JQuery to modify what is typed into the search box. You need to update the code to work with the minimal themes elements. I have done this for you:

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

This will work with the top search box on the home page. Paste that code at the bottom of your theme.liquid file. 

The only thing that you will want to do is hide the search box from your search template. The two search boxes have the same form and input classes. This JQuery selects the values in the input box then adds the while card character. However if you try to use the second search box it will remove the text and just keep adding * to each end. If you just use the top search box it works correctly. 

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben Czegeny - Shopify Guru
Support@Shopify.com

 

 

0 Likes
Highlighted
New Member
5 0 0

Ben,

Thank you so much for the response. Your explanations and suggestions are greatly appreciated.

For some reason, it's still not working.

I added the code you provided to theme.liquid right above the closing head tag.  It shows up properly when viewing the source code of the website.

And as per your instruction, I edited search.liquid and commented out the search form (i.e. {% include 'search-bar' %}) in the body of the search results so that only one search field (the one in the header) shows up on the website.

I also tried updating the classes in the script to match what I see in the search form but that didn't work:

<script type="text/javascript">

        $('.header-bar__search-form').submit(function () {
          	var self = this;
          	event.preventDefault ? event.preventDefault() : event.returnValue = false;
          
            var searchfield = $('.header-bar__search-input');
            searchfield.val("*" + searchfield.val() + "*");
          
          	 self.submit();
        });

 </script>

Am I missing something?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 36

Hey There, 

  Place the script at the bottom of your theme.liquid file. You do not want this in your head section. Also it is a best practice to have scripts load after the page is rendered for page speed. You may have some other modifiations that are effecting this code working. I used a fresh install of minimal to test this with and the class names look to be different then yours. 

I have moved the script with your class modifications to the bottom of your theme.liquid. It does appear to be working now :)

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Highlighted
New Member
5 0 0

Yes, I'm not sure why the class names are so different.  But it works now, thank you so much!

0 Likes
Highlighted
New Member
5 0 0

Sorry to bring this up again but there's a small but critical problem.  The search bar is moved to the navigation menu for responsive widths in tablet and mobile and it's not working.  It looks like the search terms are completely replaced by wildcards.

I'm guessing this is the issue that was referred to earlier in regards to having a second search box on the page.  The mobile page only has one search box but I guess it's still affected.  Is there any way to resolve this?

Thanks!

0 Likes