Skip to content

Instantly share code, notes, and snippets.

@davelowensohn
Last active March 14, 2023 18:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davelowensohn/94db52943af5ba6aece02723d149936d to your computer and use it in GitHub Desktop.
Save davelowensohn/94db52943af5ba6aece02723d149936d to your computer and use it in GitHub Desktop.
Shopify dropdown filters
{% paginate collection.products by 32 %}
<div id="collection-description" class="desktop-12">
<h1>{{ collection.title }}</h1>
{{ collection.description }}
</div>
{% if settings.filters %}
<div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
{% include 'dropdown-filter' %}
</div>
{% endif %}
{% if collection.products.size > 0 %}
<ul id="product-loop" style="width: 100%">
{% for product in collection.products %}
{% include 'locksmith-variables', locksmith_scope: 'subject', locksmith_subject: product %}
<li class="product desktop-3 mobile-half{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" {% if locksmith_access_granted %}data-price="{{ product.price }}"{% endif %}>
{% include 'product-listing' %}
</li>
{% endfor %}
</ul>
{% include 'pagination' %}
{% else %}
<h4 class="change-filter-settings">No products found. Try fewer filters!</h4>
{% endif %}
{% endpaginate %}
<!-- SELECT VALUES DON'T AFFECT ANYTHING! But I'm sad to delete these selects. -->
<div class="two columns testclass">
<label>Style</label>
<select class="inline-plain style-filter" name="style-filter">
<option>All</option>
{% for tag in collection.all_tags %}
{% assign first_char = tag | slice: 0 %}
{% if first_char == '1' or first_char == '2' %}
{% else %}
<option>{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="two columns testclass">
<label>Manufacturer</label>
<select class="inline-plain manufacturer-filter" name="manufacturer-filter">
<option>All</option>
{% for vendor in collection.all_vendors %}
<option>{{ vendor }}</option>
{% endfor %}
</select>
</div>
<div class="two columns testclass">
<label>Date</label>
<select class="inline-plain date-filter" name="date-filter">
<option>All</option>
{% for tag in collection.all_tags %}
{% assign first_char = tag | slice: 0 %}
{% if first_char == '1' or first_char == '2' %}
<option>{{ tag }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="two columns testclass">
<label>Type</label>
<select class="inline-plain type-filter" name="type-filter">
<option>All</option>
{% for type in collection.all_types %}
<option>{{ type }}</option>
{% endfor %}
</select>
</div>
<ul id="sortme">
{% if settings.sort-dropdown-a-check %}
<li class="clearfix filter">
{% assign tags = settings.sort_a | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
<h4>Filter by {% if settings.sort-a == blank %}{{ 'collections.filter.shop_by_color' | t }}{% else %}{{ settings.sort-a }}{% endif %}</h4>
<select class="styled-select coll-filter">
<option value="">All</option>
{% for tag in tags %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | downcase }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag | downcase }}</option>
{% endif %}
{% endfor %}
</select>
</li>
{% endif %}
{% if settings.sort-dropdown-b-check %}
<li class="clearfix filter">
{% assign tags = settings.sort_b | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
<h4>Filter by {% if settings.sort-b == blank %}{{ 'collections.filter.shop_by_size' | t }}{% else %}{{ settings.sort-b }}{% endif %}</h4>
<select class="styled-select coll-filter">
<option value="">All</option>
{% for tag in tags %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | downcase }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag | downcase }}</option>
{% endif %}
{% endfor %}
</select>
</li>
{% endif %}
{% if settings.sort-dropdown-c-check %}
<li class="clearfix filter">
{% assign tags = settings.sort_c | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
<h4>Filter by {% if settings.sort-c == blank %}{{ 'collections.filter.shop_by_material' | t }}{% else %}{{ settings.sort-c }}{% endif %}</h4>
<select class="styled-select coll-filter">
<option value="">All</option>
{% for tag in tags %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | downcase }}</option>
{% elsif collection.all_tags contains tag %}
<option value="{{ tag | handle }}">{{ tag | downcase }}</option>
{% endif %}
{% endfor %}
</select>
</li>
{% endif %}
</ul>
<script>
/* Product Tag Filters - Good for any number of filters on any type of collection pages */
/* Give you product tag filter select element a class of coll-filter */
/* Give your collection select a class of coll-picker */
/* Brought to you by Caroline Schnapp */
var allFilters = jQuery('.coll-filter, .coll-picker');
allFilters.change(function() {
var newTags = [];
jQuery('.coll-filter').each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
if (newTags.length) {
var query = newTags.join('+');
if (jQuery('.coll-picker').length) {
window.location.href = '/collections/' + jQuery('.coll-picker').val() + '/' + query;
}
else {
window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
}
}
else {
if (jQuery('.coll-picker').length) {
window.location.href = '/collections/' + jQuery('.coll-picker').val();
}
else {
{% if collection.handle %}
window.location.href = '/collections/{{ collection.handle }}';
{% elsif collection.products.first.type == collection.title %}
window.location.href = '{{ collection.title | url_for_type }}';
{% elsif collection.products.first.vendor == collection.title %}
window.location.href = '{{ collection.title | url_for_vendor }}';
{% endif %}
}
}
});
</script>
...
{
"type": "header",
"content": "Filtering a collection"
},
{
"type": "paragraph",
"content": "These options rely on your use of Product Tags.... You can enter anything in these areas providing that it exists as a product tag. To work effectively the tags must match case and spelling and all must be comma separated"
},
{
"type": "checkbox",
"id": "filters",
"label": "Show collection filters",
"default": true
},
{
"type": "checkbox",
"id": "sort-dropdown-a-check",
"label": "Show Filter 1",
"default": true
},
{
"type": "text",
"id": "sort-a",
"label": "Filter 1 title",
"default": "Shirts, Pants, Dresses"
},
{
"type": "textarea",
"id": "sort_a",
"label": "Filter 1 tags"
},
{
"type": "checkbox",
"id": "sort-dropdown-b-check",
"label": "Show filter 2",
"default": true
},
{
"type": "text",
"id": "sort-b",
"label": "Filter 2 title",
"default": "Shirts, Pants, Dresses"
},
{
"type": "textarea",
"id": "sort_b",
"label": "Filter 2 tags"
},
{
"type": "checkbox",
"id": "sort-dropdown-c-check",
"label": "Show filter 3",
"default": true
},
{
"type": "text",
"id": "sort-c",
"label": "Filter 3 title",
"default": "Shirts, Pants, Dresses"
},
{
"type": "textarea",
"id": "sort_c",
"label": "Filter 3 tags"
}
...
@an333999
Copy link

an333999 commented Jul 7, 2022

For using above tag filter it generate the link like this guitar-strings/on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+on+acoustic-10-41

So much of on added before the link how can i remove those "on" please help me !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment