CODEWITHSUNDEEP
sortingfiltershopifyliquid
Jurgen Feuchter
Jurgen Feuchter

Reputation: 604

Shopify: Getting highest price item from collection

Does anyone know how I could get the highest price product from a category? It would be better if it was via Liquid, but if its with JavaScript its ok as well. Any ideas are welcome :P I only need to get the highest price item on a category.

Ive stumbled upon the next liquid code:

{% assign products = collection.products | sort: 'price' %}
{% for product in products %}
    <h4>{{ product.title }}</h4>
{% endfor %}

But I cant seem to get this working to sort by price-descending. Is there a way to do this? anyone? :P

for future reference here is the link where I found this:

https://docs.shopify.com/themes/liquid-documentation/filters/array-filters#sort

Thanks in advance :D

Cheers!

Upvotes: 1

Views: 3257

Answers (3)

bknights
bknights

Reputation: 15402

Depending on how you are going to use the information then one way to do this is to use an iframe hack:

{ % assign products = collection.products | sort: 'price' % } 
<div id="highPriceItem" style="display:none;">{{ products[-1].title }}</div> 

<script> function receiveHighPriceItem(elem) {
    //extract info here and do whatever with it.
    alert('High Item: ' + elem.firstChild.nodeValue);
}
window.addEventListener('load', function() {
    if (!window.parent || window.parent === window) { // check so no infinite iframes
        // jQuery free example
        var iframe = document.createElement('IFRAME');
        iframe.setAttribute('style', 'visibility:hidden;height:0; width:100%;');
        iframe.setAttribute('src', '?sort_by=price-descending&checkhigh=T');
        document.getElementsByTagName('BODY')[0].appendChild(iframe);
    } else if (window.parent && window.parent !== window && window.parent.receiveHighPriceItem) {
        window.parent.receiveHighPriceItem(document.getElementById('highPriceItem'));
    }
}); 
</script>

/** EDIT **/

Ive actually found a faster way of getting the highest price. Cause right now, you´re basically loading the collection page two times to find out. All you would have to do is create a new collection page named for example collection.hprice.liquid and add the next code in it 

{% layout none %}
<script type="text/javascript">
  window.addEventListener('load', function() {
    if (window.parent && window.parent !== window && window.parent.receiveHighPriceItem) {
      window.parent.receiveHighPriceItem(document.getElementById('highPriceItem'));
    }
  });
</script>

<!-- Thanks to bknights for the code :D -->
{% assign products = collection.products | sort: 'price' %} 
<div id="highPriceItem" style="display:block;">{{ products[-1].price_max | divided_by: 100 }}</div>

Now on the code you had, simply change the iframe.setAttribute('src') to this 

iframe.setAttribute('src', '?sort_by=price-descending&checkhigh=T&view=hprice');

And it will be much faster cause it will load only a div on the hprice view :D After that you can delete needless code like the else on the addEventListener.

Upvotes: 2

Ryan Brenner
Ryan Brenner

Reputation: 101

I don't believe there is a way to do this straight from your liquid file. There are (to my knowledge, and excluding any Javascript hackery) two ways to get it to work, but it depends on how your collection is being pulled onto the page.

If the collection is on a regular collection page, i.e. my-store.myshopify.com/collections/my-collection, you can add the ?sort_by=price-descending query to the end of your URL and it will pull your items, sorted by price, and will also work with pagination. This page in particular helped me out with that.

If you are pulling the collection from a non-collection page, and you ONLY want to sort it by price-descending, you can actually sort it straight from the collection's page in the Admin dashboard. Just select the collection you want to sort and look for the "Sort" dropdown.

Collection Page Sort Section

Keep in mind though, that this will affect the sorting of this collection on all pages. So if you want to have it sorted this way on one page, but another way on another non-collection page, then it probably isn't the right solution.

If neither of the options above work for you, then I think the only way is to use Javascript to pull all of your items, sort them by price, and then select the ones that should be displayed on your current page depending on how your pagination is set up.

Good luck!

Upvotes: 1

bknights
bknights

Reputation: 15402

Putting together a few resources you get:

  {% assign products = collections[settings.frontpage_collection].products | sort: 'price' %}   

<h2>{{ products[-1].title }}</h2> <!-- last sorted product, -2 is second last etc -->

  {% for product in products reversed %} <!-- list in reverse sorted order -->

Upvotes: 0

Related Questions