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

Highlighted
Tourist
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>';
            jQuery(".cart-items").html(cart_structure);
            $.cookie("_cartquantity", itemscount,{ expires: 365, path: '/', secure: 'true' });
            jQuery('.cart_quantity').text(itemscount);    
        }
    });        
}

 

1 Like
Highlighted
Shopify Partner
1840 177 716

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
1 Like
Highlighted
Tourist
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.

0 Likes
Highlighted
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. 

0 Likes
Shopify Expert
148 0 29

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 %}

0 Likes