-
-
Save baorv/abaff4dea37e026f501d2f012ea56e89 to your computer and use it in GitHub Desktop.
Shopify ajax search
This file contains 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 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 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