Store
Community Documentation

v3 Knowledgebase

How to add a feature to a page using plugin and jQuery

In this sample we will add a feature to the notification block on the index-member page.

We will add a link named "Remove All" next to the Notifications block header. When the user clicks this link, all notifications will be deleted, and the notification box fadeout.



What we need to do:
1 Create a product in Admin Controlpanel
2 Add a module in Admin CP
3 Add the language phrase needed
4 Create a javascript file
5 Create a component file to handle the AJAX request if link is clicked.
6 Add a service to to delete all notifications


Lets get started
In admin CP go Extensions>>Products>>Add product

I used the following settings:
Product ID: linushide
Title: Delete All Notifications Button
Description: Creates a button to delete all notifications in one click
Version: 1.00
Active: Yes


2 Create the module
In admin CP go Extensions>>Modules>>Create New Module

Choose your product name
Is a core: no
Add menu: no
For module id I used: linushide

3 Add the phrase
In admin CP go Extensions>>Languages>>Add phrase




Now its time to focus on the code needed.
In the folder modules, make a folder same as your module id. Mine would be modules/linushide
We are going to need the following files:
modules/linushide/include/plugin/core.component_controller_index_member_start.php
modules/linushide/include/component/ajax/ajax.class.php
modules/linushide/include/component/service/process.class.php
modules/linushide/static/jscript/deletenotifications.js

All folders should also have a blank index.html file.


/linushide/include/plugin/core.component_controller_index_member_start.php
Is our hook and plugin. As the name implies, it will load when a vistor visist the index-member page, and loaded before the page is made. We will tell the system to add our javascript here.

<?php
$this->template()->setHeader(array(
	'<script type="text/javascript">
		myTranslations = {'linushide.remove_all' : ''.Phpfox::getPhrase('linushide.remove_all').''}
		$.extend(true, oTranslations, myTranslations);
		</script>
	',
  		'deletenotifications.js' => 'module_linushide'
));
?>

Something to note here. In order to have the language variable available in the deletenotifications.js it needs to be loaded from PHP. So before adding our js file we extend the oTranslations object to include our variables. In this case its just one but if we wanted more we could:
myTranslations = {'linushide.remove_all' : ''.Phpfox::getPhrase('linushide.remove_all').'', 'linushide.another_var' : ''.Phpfox::getPhrase('linushide.another_var').''}


$.extend is a jQuery function. You can read more about it here http://api.jquery.com/jQuery.extend/


Let make the javascript file modules/linushide/static/jscript/deletenotifications.js
$(function(){
//	console.log(oTranslations['core.remove_all']);
//	console.log(oTranslations);

	$('#js_block_border_notification_feed div:first').append(
		'<a id="deleteNotificationsBtn" href="#" style="font-size: 8px">'+oTranslations['linushide.remove_all']+'</a>'
	);
	
	$('#deleteNotificationsBtn').click(function(){
		//console.log('Clicked '+this.id);	
		$.ajaxCall('linushide.removeAll');
		$("#js_block_border_notification_feed").fadeOut().remove();
	})

});


console.log is just there to help debug and for testing purposes. For console.log to work, you must either have a tool in Firefox such as Firebug. Or Internet Explorer 9 with the development window open.

$('#js_block_border_notification_feed div:first').append(

This tells the browser that we want to append something to the first div inside the HTML element that has the id="#js_block_border_not... etc etc"
This is what the default theme has for id for this block. If you are making this for another theme. Check the page source code to find the proper id.

$('#deleteNotificationsBtn').click(function(){


Is what we want to do when our link is clicked.

$.ajaxCall('linushide.removeAll');

This is a phpFox jQuery extension that tells the browser to do a background call to our /service/ajax/ajax.class.php and run the function named removeAll
Read more about $.ajaxCall there is a sample here http://www.phpfox.com/forum/customizing-phpfox-79/tut-ajax-in-phpfox

$("#js_block_border_notification_feed").fadeOut().remove();

This will fade out the box, and eventualy remove it from the page all together.

The Ajax response
modules/linushide/include/component/ajax/ajax.class.php

<?php
defined('PHPFOX') or exit('NO DICE!');
 class Linushide_Component_Ajax_Ajax extends Phpfox_Ajax
 {
   public function removeAll()
   {
	Phpfox::isUser(true);
	Phpfox::getService('linushide.process')->removeAllNotifications();  
   }
   

 }
?>


For details about the Ajax class, see the link above.


Phpfox::isUser(true);


From the phpFox API:
Used to see if a user is logged in or not. By passing the first argument as TRUE we can also do an auto redirect to guide the user to login first before using a feature.


Phpfox::getService('linushide.process')->removeAllNotifications();


Loads the function removeAllNotifications() inside modules/linushide/include/component/service/process.class.php

<?php
defined('PHPFOX') or exit('NO DICE!');

class Linushide_Service_Process extends Phpfox_Service 
{
	public function __construct(){	
		$this->_sTable = Phpfox::getT('notification');
	}	
	
	public function removeAllNotifications()
	{
		$this->database()->delete($this->_sTable, 'user_id = ' . Phpfox::getUserId());
		
		return true;
	}	
}

?>


You can read about the PhpFox_Service in API here http://www.phpfox.com/phpapi/Phpfox/Phpfox_Service.html

public function __construct(){	
	$this->_sTable = Phpfox::getT('notification');
}

Defines what table in the database to work with.

public function removeAllNotifications(){
	$this->database()->delete($this->_sTable, 'user_id = ' . Phpfox::getUserId());	
	return true;
}


Again the API is the best reference for this. http://www.phpfox.com/phpapi/Phpfox/Phpfox_Database.html

Looking inside other files that does some of the same things that you want to accomplish can also prove very beneficial. In this case /module/notification/include/ajax/ajax.class.php and /module/notification/include/service/process.class.php

How did I come to look in these files? By noticing how the link for Hide single notifications work. The HTML code for hiding notifications is:
<a onclick="$.ajaxCall('notification.hide', 'id=1453'); return false;" href="#">Hide</a>


You might recognize $.ajaxCall('notification.hide)
This translates to /module/notification/include/ajax/ajax.class.php function hide();

Hope you found the tutorial useful and that you learned something new.

If you just want the feature, and do not want/need to learn how it works. You can downloa the addon here http://www.phpfox.com/addons/view/hide-all-notifications/