jquery - Shopify filtering with multiple tags -
i've been following doc filtering multiple tags select elements wondering if there way modify javascript work other ui elements such buttons or text links: https://docs.shopify.com/support/your-store/collections/filtering-a-collection-with-multiple-tag-drop-down
i've attached suggest code below reference:
<ul class="clearfix filters"> <li class="clearfix filter"> {% assign tags = 'red, green, blue' | split: ',' %} <label>shop color</label> <select class="coll-filter"> <option value="">all</option> {% t in tags %} {% assign tag = t | strip %} {% if current_tags contains tag %} <option value="{{ tag | handle }}" selected>{{ tag }}</option> {% elsif collection.all_tags contains tag %} <option value="{{ tag | handle }}">{{ tag }}</option> {% endif %} {% endfor %} </select> </li> <li class="clearfix filter"> {% assign tags = 'small, medium, large' | split: ',' %} <label>shop size</label> <select class="coll-filter"> <option value="">all</option> {% t in tags %} {% assign tag = t | strip %} {% if current_tags contains tag %} <option value="{{ tag | handle }}" selected>{{ tag }}</option> {% elsif collection.all_tags contains tag %} <option value="{{ tag | handle }}">{{ tag }}</option> {% endif %} {% endfor %} </select> </li> <li class="clearfix filter"> {% assign tags = 'cotton, leather, polyester' | split: ',' %} <label>shop material</label> <select class="coll-filter"> <option value="">all</option> {% t in tags %} {% assign tag = t | strip %} {% if current_tags contains tag %} <option value="{{ tag | handle }}" selected>{{ tag }}</option> {% elsif collection.all_tags contains tag %} <option value="{{ tag | handle }}">{{ tag }}</option> {% endif %} {% endfor %} </select> </li> </ul> <script> /* product tag filters - number of filters on type of collection page. give product tag filter select element class of coll-filter. give collection select class of coll-picker. brought caroline schnapp. */ shopify.queryparams = {}; if (location.search.length) { (var akeyvalue, = 0, acouples = location.search.substr(1).split('&'); < acouples.length; i++) { akeyvalue = acouples[i].split('='); if (akeyvalue.length > 1) { shopify.queryparams[decodeuricomponent(akeyvalue[0])] = decodeuricomponent(akeyvalue[1]); } } } jquery('.coll-picker').change(function() { if (jquery(this).val()) { location.href = '/collections/' + jquery(this).val(); } else { location.href = '/collections/all'; } }); var collfilters = jquery('.coll-filter'); collfilters.change(function() { delete shopify.queryparams.page; var newtags = []; collfilters.each(function() { if (jquery(this).val()) { newtags.push(jquery(this).val()); } }); {% if collection.handle %} var newurl = '/collections/{{ collection.handle }}'; if (newtags.length) { newurl += '/' + newtags.join('+'); } var search = jquery.param(shopify.queryparams); if (search.length) { newurl += '?' + search; } location.href = newurl; {% else %} if (newtags.length) { shopify.queryparams.constraint = newtags.join('+'); } else { delete shopify.queryparams.constraint; } location.search = jquery.param(shopify.queryparams); {% endif %} }); </script>
Comments
Post a Comment