-
-
Save carolineschnapp/11352987 to your computer and use it in GitHub Desktop.
| <div> | |
| <label for="sort-by">Sort by</label> | |
| <select id="sort-by"> | |
| <option value="manual">Featured</option> | |
| <option value="price-ascending">Price: Low to High</option> | |
| <option value="price-descending">Price: High to Low</option> | |
| <option value="title-ascending">A-Z</option> | |
| <option value="title-descending">Z-A</option> | |
| <option value="created-ascending">Oldest to Newest</option> | |
| <option value="created-descending">Newest to Oldest</option> | |
| <option value="best-selling">Best Selling</option> | |
| </select> | |
| </div> | |
| <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]); | |
| } | |
| } | |
| } | |
| jQuery('#sort-by') | |
| .val('{{ collection.sort_by | default: collection.default_sort_by | escape }}') | |
| .bind('change', function() { | |
| Shopify.queryParams.sort_by = jQuery(this).val(); | |
| location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20'); | |
| }); | |
| </script> |
Simply add the following.
<select class="custom-select" name="sort_by" onchange="javascript:location.href = window.location.href.split('?')[0] + `?sort_by=${this.value}`;"> {% for option in collection.sort_options %} <option value="{{ option.value }}" {% if option.value == collection.sort_by %}selected{% endif %}>{{ option.name }}</option> {% endfor %} </select>thanks, this is should be the best answer
This worked , and is the simplest and best. No external JS required
Would anyone know of a way to get the same output as using ?sort_by=best-selling but programatically?
I've remade the search/filter/sort system on my landing page using a mix of js and liquid, i'm able to sort and query by any of the product's information provided by the product object, but i can't seem to find a way to query the number of times a product has been sold in order to get the best selling items.
Can anyone help me out with this?
my store is on at: store.streamspell.com in case anyone wants to better understand my case...
Would anyone know of a way to get the same output as using ?sort_by=best-selling but programatically?
I've remade the search/filter/sort system on my landing page using a mix of js and liquid, i'm able to sort and query by any of the product's information provided by the product object, but i can't seem to find a way to query the number of times a product has been sold in order to get the best selling items.
Can anyone help me out with this?
my store is on at: store.streamspell.com in case anyone wants to better understand my case...
hacky but maybe create a collection that is sorted by best seller and output that collection w/liquid and work with that?
Would anyone know of a way to get the same output as using ?sort_by=best-selling but programatically?
I've remade the search/filter/sort system on my landing page using a mix of js and liquid, i'm able to sort and query by any of the product's information provided by the product object, but i can't seem to find a way to query the number of times a product has been sold in order to get the best selling items.
Can anyone help me out with this?
my store is on at: store.streamspell.com in case anyone wants to better understand my case...hacky but maybe create a collection that is sorted by best seller and output that collection w/liquid and work with that?
That's actually the only way i was able to achieve the result i wanted.
I created a collection with that sort by default and looped through it getting the product id and setting an index value to each product.id based on their position in the new collection. That did the trick but may not be a very scalable solution for stores with large amounts of product data.
I really wish there was at least a way to see what kind of logic shopify uses in their default sort by.
Anyways, thanks!
Hi All,
Would someone be able to help me with arranging the drop down filter to display the tag values in this order:
- Size 00
- Size 0
- Size 1
- Size 2
- ...
- Size 10
- Size 11
(instead of the current order as in the image attached below)
I've tried a few things but unsuccessful in the past few weeks. Any help would be heaps appreciated.
FYI, I am using the Venture theme of Shopify. Thank you in advance!
Hello everyone,
any ideas in how to exclude variants with price lower than 1 euro, when filtering by price?
The store has samples in every product, it is affecting the price sort :\
<div>
<label for="sort-by">Sort by</label>
<select id="sort-by">
<option value="manual">Featured</option>
<option value="price-ascending">Price: Low to High</option>
<option value="price-descending">Price: High to Low</option>
<option value="title-ascending">A-Z</option>
<option value="title-descending">Z-A</option>
<option value="created-ascending">Oldest to Newest</option>
<option value="created-descending">Newest to Oldest</option>
<option value="best-selling">Best Selling</option>
</select>
</div>
<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]);
}
}
}
jQuery('#sort-by')
.val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
});
</script>
Thank you all for the codes! It worked for me on the Debut theme. I was just wondering if anyone knew how to add space below the sort by drop down menu as it is currently touching the product image below it. Thanks
Thank you soo much. Its working perfectly fine for me. Huge Thanks.
I signed in just to let everyone know that after much googling. Shopify has this feature but its not well know.
i decided to post this to clarify how to set the default sort type.
From your Shopify admin, go to Products > Collections.
Click a collection.
In the Products section, click the drop-down list beside Sort, and then select a sort order.
If you select Manually, then you can click and drag the products in the list to reorder them.
You can also click and select one or more products in the list. Click Move to reorder them to a specific position in the collection.
Your should be notified that it was been updated.
This helped me keep my new arrivals collection sorted by newest .
you can set each collection as desired.
Your welcome.