Skip to content

Instantly share code, notes, and snippets.

@zoerooney
Last active August 29, 2015 14:15
Show Gist options
  • Save zoerooney/b6583c776e41fa541b46 to your computer and use it in GitHub Desktop.
Save zoerooney/b6583c776e41fa541b46 to your computer and use it in GitHub Desktop.
Directory using Shopify blog content, sorted by title, with in-page quick search. As seen on: http://afavoritedesign.com/pages/the-peddlers with a full tutorial here: http://zoerooney.com/blog/tutorials/shopify-alphabetical-searchable-directory-page/
<header class="page-title">
<h1>{{ page.title }}</h1>
</header>
<section id="content">
<div class="search-area">
<div class="left">{{ page.content }}</div>
<div class="right"><form><i class="icon-search"></i><input type="text" id="peddler-search" placeholder="type your city, state or postal code"></form></div>
</div>
<div class="locations">
{% assign sorted_articles = blogs.peddlers.articles | sort: 'title' %}
{% for article in sorted_articles %}
{% unless article.tags contains 'international' %}
<div class="location">
<h3>{{ article.title }}</h3>
<div class="columns">
{{ article.content }}
</div>
</div>
{% endunless %}
{% endfor %}
{% for article in sorted_articles %}
{% if article.tags contains 'international' %}
<div class="location">
<h3>{{ article.title }}</h3>
<div class="columns">
{{ article.content }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</section><!-- #content -->
{{ "jquery.quicksearch.js" | asset_url | script_tag }}
<script>
jQuery(document).ready(function($){
$('#peddler-search').quicksearch('.columns p', {
'show': function () {
$(this).show();
$(this).parents('.location').find('h3').show();
},
'hide': function () {
$(this).hide();
$('.location').each(function(){
if ( $(this).find('p:visible').length == 0 ) {
$(this).find('h3').hide();
}
});
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment