How to add an option to Sort items on the Wishlist Page?

Using custom Javascript, it is possible to add an option to sort the items on the Wishlist page. For simplicity, we shall strict ourselves to alphabetical sorting (A-Z and Z-A) only.

We shall also provide an option to restore the default order of items(i.e. New to Old)

The Sort Wishlist option on Supply theme.

STEPS

1. Create a new snippet titled wishlist-enhancements. It creates the file snippets/wishlist-enhancements.liquid. If this file already exists, skip this step.

2. Add the following code to it. If WishlistLoadedCallback is already defined, append the inner code of the following function to it.

//sort logic
SWPSort=function(){	
	var temp_items=new Array();
	var temp_dom_identifier="#bookmarks .col-md-4";
	$(temp_dom_identifier).each(function(i){ 
		var temp_title=$(this).find(".product_title a").html();
		var temp_html=$(this).prop('outerHTML');
		let temp_item = {
		 "temp_title": temp_title,
		 "temp_html": temp_html,
		}
		temp_items.push(temp_item);
	});
	
	if(typeof temp_items_original=="undefined") {
		temp_items_original=temp_items;				
	}

	
	var sort_mode=$('#sortwishlist').val(); if (sort_mode=="") sort_mode="datenew2old";
	
	if(sort_mode=="ascending")
	{
		 temp_items.sort(function(a, b){
			var x = a.temp_title.toLowerCase();
			var y = b.temp_title.toLowerCase();
			if (x < y) {return -1;}
			if (x > y) {return 1;}
			return 0;
		  });
	}
	else if(sort_mode=="descending")
	{
		 temp_items.sort(function(a, b){
			var x = a.temp_title.toLowerCase();
			var y = b.temp_title.toLowerCase();
			if (x < y) {return 1;}
			if (x > y) {return -1;}
			return 0;
		  });	
		
	}
	else if(sort_mode=="datenew2old")
	{
		if(typeof temp_items_original!="undefined") temp_items=temp_items_original;
	}	
	  
	var temp_parent=$(temp_dom_identifier).parent();
	temp_parent.html("");
	temp_items.forEach(function(i){
		temp_parent.append(i.temp_html);
	});
};

//add button
$(".allbuttons").prepend('<select id="sortwishlist" onchange="SWPSort()" style="width: 200px;"><option value="">Date, New to Old</option><option value="ascending">Alphabetically, A-Z</option><option value="descending">Alphabetically, Z-A</option></select>');

SWPSort(); //initialize

3. Add the following code anywhere before closing </head> in layout/theme.liquid. If already added, you can skip this step.

{% include 'wishlist-enhancements' %} 

4. You may choose to style the Sort dropdown. The following CSS has been optimized for Supply theme. It may vary slightly on other themes. It’s up to you to make those changes.

You can add it to the theme’s stylesheet or to the Extra CSS tool found in App’s Settings.

/* Style for the Select button */  
select#sortwishlist {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid #3e3535fa;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0 5px 0 0px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *