-
-
Save Qurus/203c138e9aa830ba4055554cbc085291 to your computer and use it in GitHub Desktop.
Shopify ajax search
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
var currentAjaxRequest = null; | |
var searchForms = $('form[action="/search"]').css('position', 'relative').each(function() { | |
var input = $(this).find('input[name="q"]'); | |
input.attr('autocomplete', 'off').bind('keyup change', function() { | |
var term = $(this).val(); | |
var form = $(this).closest('form'); | |
var searchURL = '/search?type=product&q=*' + term + '*'; | |
var resultsList = $('.search-results'); | |
resultsList.perfectScrollbar({ | |
suppressScrollX: true | |
}); | |
if (term.length > 3 && term !== $(this).attr('data-old-term')) { | |
$(this).attr('data-old-term', term); | |
if (currentAjaxRequest !== null) currentAjaxRequest.abort(); | |
currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) { | |
resultsList.empty(); | |
if (data.results_count === 0) { | |
resultsList.html('<p>No results.</p>'); | |
resultsList.fadeIn(200); | |
resultsList.hide(); | |
} else { | |
$.each(data.results, function(index, item) { | |
var link = $('<a></a>').attr('href', item.url); | |
link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>'); | |
link.append('<span class="title">' + item.title + '</span>'); | |
link.wrap('<div class="large-4 columns"></div>'); | |
resultsList.append(link.parent()); | |
}); | |
if (data.results_count > 10) { | |
resultsList.append('<div class="row"><div class="semi-10 large-push-2 semi-push-1 large-8 columns"><a class="btn" href="' + searchURL + '"> +(' + data.results_count + ') more</a></div></div>'); | |
} | |
resultsList.fadeIn(200); | |
} | |
}); | |
} | |
}); | |
}); | |
// Clicking outside makes the results disappear. | |
// $('body').bind('click', function(){ | |
// $('.search-results').hide(); | |
// }); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="search-box search-elem"> | |
<button class="close"></button> | |
<div class="inner row"> | |
<div class="semi-10 large-push-2 semi-push-1 large-8 columns"> | |
<h3>SEARCH</h3> | |
{% assign searchterm = search.terms | escape | replace: '*', '' | replace: 'title:','' %} | |
<form action="/search" method="get" role="search"> | |
<input type="text" name="q" id="search-field" value="{{searchterm}}" placeholder="Enter search term"> | |
<button class="submit" type="submit">SEARCH</button> | |
</form> | |
</div> | |
<div class="semi-10 large-push-2 semi-push-1 large-8 columns search-results"></div> | |
</div> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% layout none %} | |
{% capture results %} | |
{% for item in search.results %} | |
{% assign product = item %} | |
{ | |
"title" : {{ product.title | json }}, | |
"url" : {{ product.url | within: product.collections.last | json }}, | |
"thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }} | |
} | |
{% unless forloop.last %},{% endunless %} | |
{% endfor %} | |
{% endcapture %} | |
{ | |
"results_count": {{ search.results_count }}, | |
"results": [{{ results }}] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment