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/...
$("#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...
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_Databas...
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-notific...
Will this work for V3?
Hello, I tried to use this. Added the files and added the product and module and its not showing up. Any ideas.
NM.. got it working. Thanks!
Thank you so much. It is very nice tutorial. However it works only in index.member. I couldn't work it to site wide. Example i need this button to header bar in my site. So, my header bar works in site wide but this button works only index.member because of plugin: core.component_controller_index_member_start.php
Hey linus. There u could have assinged you phrase to your own modul "linushide" instead of "core" now export your product and you have a addon created. Now you upload here and all users have to do is upload and install . When you export it all the files and folder you created will be packed with a install xml to make it easy for other to use since you already did the entire job 
Ok updated it. attached a zip file with the plugin. But it does not show here. Ill post it in the addon section
I think this should be in the free addon section . Thanks for the tutorial
Very cool. Thanks for sharing and nicely done tutorial. 
