Shopify advanced front end search links:
https://www.google.com.eg/search?q=shopify+search+in+a+collection
http://docs.shopify.com/manual/your-store/dashboard/storefront-search
http://docs.shopify.com/pos/operating-pos/products/view-search-products
http://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/subcategories
http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/how-to-add-swiftype-search-to-your-shopify-store
http://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/filter-a-collection-using-product-tags
http://docs.shopify.com/themes/theme-development/templates/search-liquid
http://www.microapps.com/blogs/english/13370313-shopify-store-search-limited-by-product-type
custom code to search by product type:
/////////////////////////////////////
// customizations by alhoseany
/////////////////////////////////////
jQuery(function() {
var query = '';
var text = jQuery('.search_menu .search_box .txtbox');
var option = jQuery('#select_product_type');
var selection = '';
var prevValue = text.val();
if(prevValue.indexOf("product_type:") != -1){
var prevValue1 = prevValue.split(" AND ");
var prevValue2 = prevValue1[0].split("product_type:");
text.val(prevValue1[1]);
option.val(prevValue2[1]);
jQuery('.breadcrumb > li').last().html('Product Type: '+ prevValue2[1] + ' and Search Keyword: ' + prevValue1[1]);
}
jQuery('.select_product_type_cont').show();
jQuery('.search_menu form').submit(function() {
if(option.val() != ''){
selection = "product_type:" + option.val();
query = selection+ " AND " + text.val();
text.val(query);
}
});
});
<div class="select_product_type_cont">
<select name="select_product_type" id="select_product_type" class="form-control">
<option value="">Select Product Type</option>
{% for product_type in shop.types %}
<option value="{{ product_type }}">{{ product_type }}</option>
{% endfor %}
</select>
</div>
/* select product type in search */
.select_product_type_cont {
margin-bottom: 15px;
display:none;
}
advanced solution. using tags like this:
actor_actor name
artist_artist name
author_author name
<div class="menu_c search_menu">
<div class="select_product_type_cont">
<select name="select_product_type" id="select_product_type" class="form-control search-by" data-search-by="product_type:">
<option value="">Search by Product Type</option>
{% for product_type in shop.types %}
<option value="{{ product_type }}">{{ product_type }}</option>
{% endfor %}
</select>
<select name="select_product_vendor" id="select_product_vendor" class="form-control search-by" data-search-by="vendor:">
<option value="">Search by Brand</option>
{% for product_vendor in shop.vendors %}
<option value="{{ product_vendor }}">{{ product_vendor }}</option>
{% endfor %}
</select>
<select name="select_product_actor" id="select_product_actor" class="form-control search-by" data-search-by="tag:actor_">
<option value="">Search by Actor</option>
{% for tag in collections.all.all_tags %}
{% if tag contains 'actor_' %}
{% assign thistag = tag | replace_first: '"', ' ' | replace_first: 'actor_', '' %}
<option value="{{ thistag }}">{{ thistag }}</option>
{% endif %}
{% endfor %}
</select>
<select name="select_product_artist" id="select_product_artist" class="form-control search-by" data-search-by="tag:artist_">
<option value="">Search by Artist</option>
{% for tag in collections.all.all_tags %}
{% if tag contains 'artist_' %}
{% assign thistag = tag | replace_first: '"', ' ' | replace_first: 'artist_', '' %}
<option value="{{ thistag }}">{{ thistag }}</option>
{% endif %}
{% endfor %}
</select>
<select name="select_product_author" id="select_product_author" class="form-control search-by" data-search-by="tag:author_">
<option value="">Search by Author</option>
{% for tag in collections.all.all_tags %}
{% if tag contains 'author_' %}
{% assign thistag = tag | replace_first: '"', ' ' | replace_first: 'author_', '' %}
<option value="{{ thistag }}">{{ thistag }}</option>
{% endif %}
{% endfor %}
</select>
<select name="select_product_tag" id="select_product_tag" class="form-control search-by" data-search-by="tag:">
<option value="">Search by Product Tag</option>
{% for tag in collections.all.all_tags %}
{% if tag contains 'author_' %}{% elsif tag contains 'artist_' %}{% elsif tag contains 'actor_' %}{% else %}
<option value="{{ tag | replace_first: '"', ' ' }}">{{ tag | replace_first: '"', ' ' }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<form action="/search" method="get" role="search">
<div class="search_box">
{% unless settings.search_results == 'everything' %}
<input type="hidden" name="type" value="product">
{% endunless %}
<input type="search" name="q" value="{{ search.terms | escape }}" class="txtbox" placeholder="{{ 'general.search.submit' | t }}" aria-label="{{ 'general.search.submit' | t }}">
<button class="btn btn-link" type="submit" value="{{ 'general.search.submit' | t }}"><span class="fa fa-search"></span></button>
</div>
</form>
</div>
/*----------------
Customizations Styles
-----------------*/
/* Customizations Styles by alhoseany*/
#header #nav .navbar .dropdown-menu li > a {
color: #e53e2e;
letter-spacing: 1px;
}
/* select product type in search */
.select_product_type_cont {
display:none;
}
.select_product_type_cont select {
margin-bottom: 15px;
}
/////////////////////////////////////
// customizations by alhoseany
/////////////////////////////////////
jQuery(function () {
// query is the search query
// text is the text input used for serach string
// searchBy is the select elements for cutom search
var query = '';
var text = jQuery('.search_menu .search_box .txtbox');
var searchBy = jQuery('.select_product_type_cont .search-by');
// get the search string on page load
var prevValue = text.val();
// is there is a previous search string on page load
var searchByCheck = false;
// search query text to use in breadcrumb
var searchByText = '';
var searchByIndex = 0;
// iterate through the select elements
searchBy.each(function () {
// check if this select element is used in the previous search query and set its load value
if (prevValue.indexOf(jQuery(this).data('search-by')) !== -1) {
var prevValue1 = prevValue.split(" AND ");
var prevValue2 = prevValue1[searchByIndex].split(jQuery(this).data('search-by'));
console.log(prevValue1);
console.log(prevValue2);
searchByCheck = true;
if (prevValue2[1]) {
jQuery(this).val(prevValue2[1]);
searchByText += "<strong>" + jQuery(this).data('search-by').replace('_', ' ').toUpperCase() + "</strong> " + prevValue2[1] + " , ";
}
searchByIndex++;
}
});
if (searchByCheck) {
var prevValue1 = prevValue.split(" AND ");
if (prevValue1[prevValue1.length - 1]) {
text.val(prevValue1[prevValue1.length - 1]);
searchByText += '<strong>Search Keyword:</strong> ' + prevValue1[prevValue1.length - 1];
} else {
// remove last comma
searchByText = searchByText.replace(/,s*$/, "");
text.val('');
}
jQuery('.breadcrumb > li').last().html(searchByText);
}
jQuery('.select_product_type_cont').show();
jQuery('.search_menu form').submit(function () {
searchBy.each(function () {
if (jQuery(this).val() !== '') {
query += jQuery(this).data('search-by') + jQuery(this).val() + " AND ";
}
});
query += text.val();
text.val(query);
});
});
