As a sequel of this great post by Tetsuro, showing us Limiting Storefront Search to Certain Product Types, we wanted to share a tiny different scenario we faced. Tetsuro’s example uses a dropdown and product types are only one word. In the following example we inject the product type without the user interacting with this, also product types are of 2 words: Team Logo… We didn’t try with any product type of more than 2 words! So anyone figuring this out, please inform!

Store: LogosForTeams

Store owner wanted to restrict search based on the page/collection user was, so if user was on Mascot Parts collection, which is a group of products with product type = Mascot Part, our search would only be performed inside that group of products.

First, we load jQuery min on the collection.liquid template: (you can also load this library in your theme.liquid)

<script type=”text/javascript” charset=”utf-8″ src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

Second, we add the jQuery function on the collection.liquid template:

<script>
jQuery(function() {

var query;
var selection = “”;
var text;
jQuery(“#searchform”).on(“submit”,function(e) {

text = jQuery(“#q”).val();

selection = jQuery(“#param”).val()

query = selection+ ” ” + text;

jQuery(“#q”).val(query);

});

});
</script>

Third, we add the search form with different product type value depending on the handle (collection or page) we’re at:

{% case handle %}
{% when ‘mascot-part’ %}

<form method=”get” id=”searchform” action=”/search”>
<fieldset>
<input type=”text” id=”q” name=”q”>
<input id=”param” type=”hidden” value=”product_type:Mascot Part”/>
<button value=”findlogos” id=”findlogos” type=”submit”> Find a Mascot Part!
</button>
</fieldset>
</form>

{% when ‘team-logo’ %}

<form method=”get” id=”searchform” action=”/search”>
<fieldset>
<input type=”text” id=”q” name=”q”>
<input id=”param” type=”hidden” value=”product_type:Team Logo”/>
<button value=”findlogos” id=”findlogos” type=”submit”> Find a Team Logo!
</button>
</fieldset>
</form>

{% endcase %}

DONE!