Created
May 7, 2014 15:11
-
-
Save carolineschnapp/f014bf78daf2684185d7 to your computer and use it in GitHub Desktop.
JavaScript tag to place at the bottom of collection.liquid to handle both the .sort-by select and the .coll-filter selects.
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
<script> | |
Shopify.queryParams = {}; | |
if (location.search.length) { | |
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) { | |
aKeyValue = aCouples[i].split('='); | |
if (aKeyValue.length > 1) { | |
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]); | |
} | |
} | |
} | |
var collFilters = jQuery('.coll-filter'); | |
collFilters.change(function() { | |
var newTags = []; | |
var newURL = ''; | |
collFilters.each(function() { | |
if (jQuery(this).val()) { | |
newTags.push(jQuery(this).val()); | |
} | |
}); | |
{% if collection.handle %} | |
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 %} | |
}); | |
jQuery('.sort-by') | |
.val('{{ collection.sort_by }}') | |
.bind('change', function() { | |
if (jQuery(this).val()) { | |
Shopify.queryParams.sort_by = jQuery(this).val(); | |
} | |
else { | |
delete Shopify.queryParams.sort_by; | |
} | |
var search = jQuery.param(Shopify.queryParams); | |
if (search.length) { | |
location.search = jQuery.param(Shopify.queryParams); | |
} | |
else { | |
location.href = location.pathname; | |
} | |
}); | |
</script> |
@carolineschnapp, from where can I get the documentation on Shopify.queryParams . I want to know more about it, because somewhere you have used Shopify.queryParams.Page, hence I want to know more about what it stores and how to set values. Secondly, you are using location.search.substr(1).split('&'); to populate array. What I don't understand is in what case the URL will have & symbol.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@carolineschnapp - This Gist is for driving these selects?