How to change the sort order of items in the cart?

8 0 3

I'm using the JS Buy SDK to implement basic shopping cart functionality on a static website. One of the last items I have to figure out before launching the site relates to the sort order of the cart items.

Currently the order seems to be arbitrary. It is not alphabetical; it does not follow the order in which items were added to the cart; it does not map to the prices; it does not map to the date that the product was created.

Here is a pared-down version of the function I'm using to list the cart items. How can I perform a simple alphanumerical sort on the title? I could do this with JS after the list of cart items is returned, but it would be ideal to simply generate the list alphanumerically to begin with.

function set_cart(CheckoutId) {
    var itemscount = 0;
    shopClient.checkout.fetch(CheckoutId).then((checkout) => {
        if(checkout.lineItems !== 'undefined') {        
            var currency = '$';
            var currency_name = checkout.currencyCode;
            if(currency_symbols[currency_name]!=='undefined') {
                currency = currency_symbols[currency_name];
            var cart_structure= '<ul class="cart">';
            checkout.lineItems.forEach((item) => {
                itemscount = itemscount + item.quantity;                
                var ItemTotalPrice = (item.quantity*item.variant.price).toFixed(2);
                cart_structure+= '<li class="'+item.title+'">'+item.title+'</li>';
            cart_structure+= '</ul>';
            $.cookie("_cartquantity", itemscount,{ expires: 365, path: '/', secure: 'true' });


Shopify Partner
1867 182 776

Hi Thomas,

As far as I know, there isn't a way to specify a sort order for the lineItems in the checkout object. There isn't even a way to do it directly via Storefront API.

But it's easy to accomplish using JavaScript so somewhere in that code, preferably right after

if(checkout.lineItems !== 'undefined')

You can add these few lines that'll sort your line items alphabetically desc order & unicode aware

checkout.lineItems.sort(function(a, b) {
   return a.title.toLowerCase().localeCompare(b.title.toLowerCase());

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
8 0 3

Thank you very much for taking the time to respond, your solution works perfectly.

The checkout page itself lists the items in the order they were added to the cart by the user, but I can live with that as there seems to be no way to change it.

New Member
2 0 0

Hi Karl, I need to change the order of items in the cart. I want to have the first item added to appear at the top and the last item added to appear at the bottom. Thank in advance for any help. 

Shopify Expert
158 0 33

to reverse the order should be fairly simple- in the code for the cart you would change {% for item in cart.items %} to {% for item in cart.items reversed %}