Partial (Wildcard) Search for Responsive Theme

Highlighted
New Member
1 0 1

Hi, 

Sorry for bumping such an old post, however would anyone be able to help me out with getting wildcard search on the "Simple" theme? I've managed to get it working in the top searchbar, however not on the search page.

1 Like
Highlighted
New Member
5 0 0

Hello, I tried all of above in the post but I did not get it to work. I am using Supply Theme,maybe with this theme the process may be different?

0 Likes

Dear Brittion, 

Could you please help me figure the same on the ella theme.

 

here is the code from search-bar.liquid

 

{% comment %}

  A snippet to include a search bar anywhere in your theme.
  Note we are using 'input-group' for the layout. Look under Forms > Input Groups for some demos.

  More information:
   - http://docs.shopify.com/themes/liquid-variables/search

  Return only products or pages in results:
    - http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
    - Or manually add type=product or type=page to the search URL as a parameter

{% endcomment %}

{% if settings.show_header_search %}
<a class="icon-search" href="javascript&colon;void(0)">
	<i class="fa fa-search" aria-hidden="true"></i>
</a>
<form action="/search" method="get" class="input-group search-bar" role="search" onsubmit="addAsterisk();">
  {% comment %}
    Uncomment the following hidden input to only show products in your search results
  {% endcomment %}
	<input type="hidden" name="type" value="all">
  
  <input type="text" name="q" value="{{ search.terms | escape }}" {% if settings.enable_multilang %}data-translate="general.search.placeholder" translate-item="placeholder"{% endif %} placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="Search Site" autocomplete="off">
  
  <span class="input-group-btn">
    <button type="submit" class="btn btn-search">
      <i class="fa fa-search" aria-hidden="true"></i>
      <svg>
        <use xlink:href="#icon-search">
          <svg viewBox="0 0 512 512" id="icon-search" width="100%" height="100%">
            <path d="M495,466.2L377.2,348.4c29.2-35.6,46.8-81.2,46.8-130.9C424,103.5,331.5,11,217.5,11C103.4,11,11,103.5,11,217.5   S103.4,424,217.5,424c49.7,0,95.2-17.5,130.8-46.7L466.1,495c8,8,20.9,8,28.9,0C503,487.1,503,474.1,495,466.2z M217.5,382.9   C126.2,382.9,52,308.7,52,217.5S126.2,52,217.5,52C308.7,52,383,126.3,383,217.5S308.7,382.9,217.5,382.9z"></path>
          </svg>
        </use>
      </svg>
    </button>
  </span>
</form>
{% endif %}

Here is the search.liquid code

{% comment %}
  The {{ content_for_header }} in theme.liquid will output the following stylesheet just for this page:
    - <link rel="stylesheet" href="/global/search.css" type="text/css">

  It has a few helpers in there, but this theme writes its own styles so there
  are no dependencies or conflicts. You can ignore that file.

  Return only products or pages in results:
    - http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
    - Or manually add type=product or type=page to the search URL as a parameter
{% endcomment %}


{% comment %}
  If you're only showing products with the method above, why not show them off in a grid instead?
  Set grid_results to true and see your updated results page for the new layout.
{% endcomment %}

{% assign grid_results = true %}
<div class="search-page">
  {% if search.performed %}
  
  {% comment %}
    Avoid accessing search.results before the opening paginate tag.
    If you do, the pagination of results will be broken.
  {% endcomment %}
  
  {% paginate search.results by 30 %}

  {% comment %}
    We don't have any results to show. Feel free to show off featured products
    or suggested searches here.
  {% endcomment %}
  
  {% if search.results_count == 0 %}
  <header class="page-header">
    <h2>{{ 'general.search.no_results_html' | t: terms: search.terms }}</h2>
    {% include 'search-bar' %}
  </header>
  {% else %}
  <header class="page-header">
    <h2>{{ 'general.search.results_for_html' | t: terms: search.terms }}</h2>
    {% include 'search-bar' %}
  </header>
  
  {% comment %}
    Each result template, based on the grid_layout variable above
  {% endcomment %}
  <div class="block-row">
    {% if grid_results == false %}
    <div class="product-list">      
      {% for item in search.results %}
      {% include 'bold-product' with item, hide_action: 'skip' %}
      {% include 'search-result' %}
      {% endfor %}
    </div>
    {% else %}
    <div class="products-grid row">      
      {% for product in search.results %}
      	{% include 'bold-product' with item, hide_action: 'skip' %}
        <div class="product {% if settings.product_image_border%}grid-item-border{% endif %}{% if settings.product_image_crop%} crop_image{% else %} no_crop_image{% endif %} grid-item col-xs-6 col-sm-4 {% if settings.display_sidebar_cat_page %}col-md-4{% else %}{% if product_grid == 3 %} col-md-3{% endif %}{% endif %} {% if columns %}col-lg-{{product_grid}}{% else %}col{% endif %}">
          {% include 'product-grid-item' %}
        </div>
      {% endfor %}
      <div id="product-list-foot"></div>
    </div>
    <p class="loading-icon" style="text-align: center;margin: 10px auto;display:none;">
      <img style="max-height:50px;" src="{{ "loading-icon.gif" | asset_url }}" />
    </p>
    {% if paginate.next and paginate.pages > 1 %}
	<p class="loadmore" style="visibility:hidden;">&darr; <a class="btn btn-primary" href="{{ paginate.next.url }}">More</a></p>        
	{% endif %}
    
    {% endif %}
  </div>
  {% endif %}
  
  {% comment %}
  {% if paginate.pages > 1 %}
  <div class="text-center">
    {% include 'pagination-page' %}
  </div>
  {% endif %}
  {% endcomment %}
  {% endpaginate %}
  
  {% else %}

  {% comment %}
    If search.performed is false, someone either accessed the page without
    the q parameter, or it was blank.
    Be sure to show a search form here, along with anything else you want to showcase.
  {% endcomment %}
  
  <header class="page-header">
    <h2 {% if settings.enable_multilang %}data-translate="general.search.title"{%endif%}>{{ 'general.search.title' | t }}</h2>
    {% include 'search-bar' %}
  </header>
  {% endif %}
</div>
<script type="text/javascript">

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

        });

 </script>

Appreciate your response

 

Thanks

Pratham

0 Likes
Highlighted

As i struggled a bit in for the particular theme. 

The below did the trick. If anyone is stuck here can paste the code under theme.liquid before ending </body> tag

 

  <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...
          var limit = str.length - 1; 
          if (i < limit) {
          	str[i] = "*" + str[i] + "* OR";                   // adds * for wildcard to each array element
          } else if ( i == limit) {
          	str[i] = "*" + str[i] + "*";
          };                       
     	}
      
     
     	return str.join(' ');                   //  converts the array of words back to a sentence.
	}

  	$(".search-bar").submit(function (event) {
         
   		var $searchfield = $( event.target ).children("input[name='q']");
          	searchVal = $searchfield.val();
      
      	$searchfield.val(wildcard(searchVal));

    });
  </script>

Just make sure to change the class. .search-bar to yours.

 

Thanks

0 Likes
Highlighted
Shopify Partner
45 0 9

HI, I have  the Theme FLOW. Could anybody explain how we can find what to but in javascript code? How to find our classes in both search page and header search bar?

 

Thanks a lot

 

This is my search-bar.liquid:

<form action="/search" method="get" class="input-group search-bar" role="search">
  {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
  <input type="text" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">
  <span class="input-group-btn">
    <button type="submit" class="btn icon-fallback-text">
      <i class="fa fa-search"></i>
      <span class="fallback-text">{{ 'general.search.submit' | t }}</span>
    </button>
  </span>
</form>
0 Likes