How can I sort my baseball cards in numerical order?

[JKSportsCards]

Hi there. I could not find a solution to this. I am building a vintage baseball card shop where I sell single cards for a variety of different years.

I'm breaking each set/year into its own collection and I need to show the cards in numerical order. Each product is named using the convention "Card # Player Name" for each collection. For example, in the collection “1965 Topps Baseball” I have a product called “350 Mickey Mantle”.

The issue I am having is that there seems to be no sort option for numerical order. When I sort alphabetically the cards will display out of order .... i.e. in the order 1,2,3,4,5,6,7,8,9,10 then 100,101,102 etc. Is there a way I can fix this so the product order is numerical?

[Guleria]

Hello @JKSportsCards ,

Only JS is solution for it.
Idea it, first you have to split the title just to get the numeric value from the title. Once you get it then use it with data attribute. After that write a simple script which will sort your products loop in numeric order on page load.
script example

var divList = $(".product-index");
     divList.sort(function(a, b){ return $(a).data("listing-sort")-$(b).data("listing-sort")});

     $(".loop_parent").html(divList);

 '.loop_parent' is parent class of loop.

'listing-sort' is a data attribute

'.product-index' class of each product parent element

Thanks

[JKSportsCards]

@Guleria 

Thanks for the reply. Where do I insert this script? 

[Guleria]

I shared an example and idea to implement. It's not a solution. 
You have to write code a/to the theme you are using and the setup you have. 

[LitCommerce]

Hi @JKSportsCards,

This is impossible. Shopify does not support this in admin and theme, you can only install the app.

Refer https://apps.shopify.com/search?q=Collection%20Sort

Hope you can find the app you need. Or you can contact Shopify for support: https://help.shopify.com/en/questions#/contact

And if you sort by JS, it won't work with pagination.

Hope it helps!

[Guleria]

JS sort works with infinite scroll. 

[LitCommerce]

Hi @Guleria,

'infinite scroll' will also work with pagination to load ajax.

If only show all, then hide and simulate 'infinite scroll', it will make the site load heavily if there are many products. 🙂 

[Guleria]

Yes I know but as per requirement in this post we have numeric value in title which we can use and it will not affect load time. 

[PremierStores]

Hi, @JKSportsCards: 

What you can do is edit the cards name from "1 The first card" to "001 the first Card", then the sort function will work properly.

Best wishes.

[EdLazor]

I'm running into the same issue. How did you eventually resolve it?