Products/Services Filtering

Introduction

Ok so I've seen a few old topics on the forums from users requesting help on filtering the products/services page. Ordering active services, seperate to terminated etc.

Well i've recently felt the need to do this myself so i thought i'd share this little tutorial with you all.

This topic will not sort the products/services, but will allow your clients to select which services to show.

Here's a screenshot of what i've done:

So as you can see, i've added checkboxes that allow your clients to select which services they want to see.

I've also added the number of services in brackets - Active (4).

Let's Get Started

To achieve the above, you only need to edit one file - clientareaproducts.tpl

Please make a copy of the original file, in case you mess up or you decide to revert back in future!

Open clientareaproducts.tpl with a text editor and make the following changes:

FIND:

<table class="data" width="100%" border="0" cellpadding="10" cellspacing="0">

REPLACE WITH:

<table id="services" class="data" width="100%" border="0" cellpadding="10" cellspacing="0">

FIND:

{foreach key=num item=service from=$services}

REPLACE WITH:

{foreach key=num item=service from=$services}
 {if $service.class == "active"}{php}$services['active']++;{/php}{/if}
 {if $service.class == "pending"}{php}$services['pending']++;{/php}{/if}
 {if $service.class == "suspended"}{php}$services['suspended']++;{/php}{/if}
 {if $service.class == "terminated"}{php}$services['terminated']++;{/php}{/if}

FIND:

{foreachelse}
 <tr>
   <td colspan="6">{$LANG.norecordsfound}</td>
 </tr>
 {/foreach}

REPLACE WITH:

{/foreach}
 <tr class="clientareatablenone">
   <td colspan="6">{$LANG.norecordsfound}</td>
 </tr>

FIND:

<table border="0" align="center" cellpadding="10" cellspacing="0">
 <tr>
   <td width="10" align="right" class="clientareatableactive"> </td>
   <td>{$LANG.clientareaactive}</td>
   <td width="10" align="right" class="clientareatablepending"> </td>
   <td>{$LANG.clientareapending}</td>
   <td width="10" align="right" class="clientareatablesuspended"> </td>
   <td>{$LANG.clientareasuspended}</td>
   <td width="10" align="right" class="clientareatableterminated"> </td>
   <td>{$LANG.clientareaterminated}</td>
 </tr>
</table><br />

REPLACE WITH:

<table border="0" align="center" cellpadding="10" cellspacing="0">
 <tr>
   <td width="10" align="right" class="clientareatableactive"><input type="checkbox" id="showactive" {php}if ($services['active'] < 1) { echo "DISABLED"; } {/php}></td>
   <td>{$LANG.clientareaactive} ({php}if ($services['active'] > 0) { echo $services['active']; } else { echo "0"; }{/php})</td>
   <td width="10" align="right" class="clientareatablepending"><input type="checkbox" id="showpending" {php}if ($services['pending'] < 1) { echo "DISABLED"; } {/php}></td>
   <td>{$LANG.clientareapending} ({php}if ($services['pending'] > 0) { echo $services['pending']; } else { echo "0"; }{/php})</td>
   <td width="10" align="right" class="clientareatablesuspended"><input type="checkbox" id="showsuspended" {php}if ($services['suspended'] < 1) { echo "DISABLED"; } {/php}></td>
   <td>{$LANG.clientareasuspended} ({php}if ($services['suspended'] > 0) { echo $services['suspended']; } else { echo "0"; }{/php})</td>
   <td width="10" align="right" class="clientareatableterminated"><input type="checkbox" id="showterminated" {php}if ($services['terminated'] < 1) { echo "DISABLED"; } {/php}></td>
   <td>{$LANG.clientareaterminated} ({php}if ($services['terminated'] > 0) { echo $services['terminated']; } else { echo "0"; }{/php})</td>
   <td>Show <a id="showall" style="cursor:pointer">All</a> | <a id="shownone" style="cursor:pointer">None</a></td>
 </tr>
</table><br />
<script type="text/javascript">
{literal}
	$(document).ready(function(){
		$("#showactive").click();
		$('tr.clientareatableactive').show();
		$('tr.clientareatablepending').hide();
		$('tr.clientareatablesuspended').hide();
		$('tr.clientareatableterminated').hide();
		$('tr.clientareatablenone').hide();
	});
	jQuery.fn.checkvisible = function() {
		if (($("#showactive:checked").length == 0) && ($("#showpending:checked").length == 0) && ($("#showsuspended:checked").length == 0) && ($("#showterminated:checked").length == 0)) {
			$('tr.clientareatablenone').show();
		} else {
			$('tr.clientareatablenone').hide();
		}
	};
	$('#showactive').click(function(){
		$('#showactive').checkvisible();
		if (this.checked) { $('tr.clientareatableactive').show(); }
		else { $('tr.clientareatableactive').hide(); }
	});
	$('#showpending').click(function(){
		$('#showpending').checkvisible();
		if (this.checked) { $('tr.clientareatablepending').show(); }
		else { $('tr.clientareatablepending').hide(); }
	});
	$('#showsuspended').click(function(){
		$('#showsuspended').checkvisible();
		if (this.checked) { $('tr.clientareatablesuspended').show(); }
		else { $('tr.clientareatablesuspended').hide(); }
	});
	$('#showterminated').click(function(){
		$('#showterminated').checkvisible();
		if (this.checked) { $('tr.clientareatableterminated').show(); }
		else { $('tr.clientareatableterminated').hide(); }
	});
	$('#showall').click(function(){
		$('tr.clientareatableactive').show();
		$('tr.clientareatablepending').show();
		$('tr.clientareatablesuspended').show();
		$('tr.clientareatableterminated').show();
		$('#showactive').attr('checked', true);
		$('#showpending').attr('checked', true);
		$('#showsuspended').attr('checked', true);
		$('#showterminated').attr('checked', true);
		$('#showall').checkvisible();
	});
	$('#shownone').click(function(){
		$('tr.clientareatableactive').hide();
		$('tr.clientareatablepending').hide();
		$('tr.clientareatablesuspended').hide();
		$('tr.clientareatableterminated').hide();
		$('#showactive').attr('checked', false);
		$('#showpending').attr('checked', false);
		$('#showsuspended').attr('checked', false);
		$('#showterminated').attr('checked', false);
		$('#shownone').checkvisible();
	});
{/literal}
</script>

And that should be all!

The above code has been tested on WHMCS 4.5.2.

If you have any feedback or suggestions, please feel free to reply

great job, i will try later. mant thanks

I hope you find it useful, please leave feedback on this topic

Works great. Maybe you should introduce this for the domain page as well?

I can't read the last box. Anyone can post the code again?

You may not include code updated to 5.3.6 WHMCS default tamplate?

Yeah, I would also like to know how to do this on the default template.