Breaking News: Grepper is joining You.com. Read the official announcement!

Shopify sort products in collection liquid

CoderHomie answered on May 11, 2022 Popularity 9/10 Helpfulness 4/10

answer Shopify sort products in collection liquid

Shopify sort products in collection liquid

Comment

<select id="sort-by">
  	{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
  	{% for option in collection.sort_options %}
    	<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
      	{{ option.name }}
    	</option>
  	{% endfor %}
</select>

<script>
  	Shopify.queryParams = {};
  	// Preserve existing query parameters
  	if (location.search.length) {
    	var params = location.search.substr(1).split('&');
    	for (var i = 0; i < params.length; i++) {
      	var keyValue = params[i].split('=');
      	if (keyValue.length) {
        	Shopify.queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
      	}
    	}
  	}
  	// Update sort_by query parameter on select change
  	document.querySelector('#sort-by').addEventListener('change', function(e) {
    	var value = e.target.value;
    	Shopify.queryParams.sort_by = value;
    	location.search = new URLSearchParams(Shopify.queryParams).toString();
  	});
</script>

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: shopify.dev

Tags: liquid shopify whatever

Link to this answer
Share Copy Link

Contributed on May 11 2022

CoderHomie

0 Answers Avg Quality 2/10

Shopify sort products in collection liquid

Contents

More Related Answers

Shopify sort products in collection liquid

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.