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

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -