Sort a blog alphabetically -- I was so close :)

MattWoberts
Shopify Partner
15 0 0

Hi,

My client wants to use a blog as a recipe listing, which seems to work well, except they want the blog listing page alphabetical instead of by date.

I thought i had it all figured out with my code below, but alas, shopify doesn't seem to want to let me create arrays, so my solution is going to have to be to copy and paste the same code 24 times (or possibly use a snippet to help)... Current code looks like this

 

	{% assign array = ['a','b','c','d'] %}
	
	{% for item in array %}
	
		<div class="recipes recpipes-{{item}}">
		
			{% for article in blog.articles  %}
				
				{% assign order = article.title | truncate:1,'' | downcase %}
			
				{% if order == item %}
				
					.. Output the title of the recipe here and a link ..
			
			{% endfor %}
		
		</div>
	
	{% endfor %}

 

 

Is there a simpler way, or should I continue along this track?
Cheers!

 

0 Likes
Stuart_Whitman
Excursionist
293 0 10

Personally I would do this in jQuery. Would probably be a lot easier. I've done something similar with sorting categories.

Stuart Whitman http://stuartwhitman.co.uk + http://wiki.shopify.com/Stuart_Whitman + http://twitter.com/stuartwhitman + http://hookedonshopify.com
0 Likes
MattWoberts
Shopify Partner
15 0 0

You're dead right. I realised after I'd almost finished that it would be better as a jQuery job, so I changed it over. For anyone that wants to do something similar in shopify here's the low down on how I got blog posts to appear alphabetically, grouped by letter - like this:

 

A

Apple Pie

Almond Slice

C

Carrot Cake

Chocolate Cake

...

 

Step 1 - Produce the output in the liquid file:

To get a simple non-sorted list of products, including a css class for the <li> that indicates the group it belongs to, I used this code:

<ul id="recipes">
    {% for article in blog.articles  %}
      {% capture alpha %}{{ article.title | truncate:1,'' | downcase }}{% endcapture %}
      <li class="{{alpha}}"><a href="{{article.url}}">{{ article.title }}</a></li>
    {% endfor %}
</ul>

 

Step 2 - Do some jQuery magic on that to sort it, and to group it:

This was a bit more complicated. I'm not going to explain the js, but here it is:

 

// Sort the recipe listings
var mylist = $('#recipes');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});

$(listitems).appendTo(mylist);

// Do the grouping magic - you don't need this if you just want to sort.
var headings = 'abcdefghijklmnopqrstuvwxyz';
var $recipes = $('#recipes').detach();
var index = 0;
$.each(headings, function(idx, val){
	if ($recipes.find('li.' + this).length > 0) {
			index ++;
			var newUl =  $('<div class="recipe-group ' + ( index % 4 == 0 ? 'recipe-group-third' : '' ) + '"><h3>' + this + '</h3></div>').append($('<ul/>').append($recipes.find('.' + this))) ;
	    	$('div#recipe-listing').append(newUl);
	};
});

 

 

Hope that helps someone...

 

0 Likes
JoePichardo
New Member
9 0 0

Hey MattWoberts, I've actually made an app to drag and drop blogs into the positions you would like, in this case alphabetically and without the jQuery code. Here's the link to the Shopify App: Article Organizer Pro

0 Likes