Prestashop Tutorial - Create a module with tab

[spott]

Original French tutorial is located at this site:
http://www.julien-breux.com/2009/08/22/t...ec-onglet/
I am not related with this tutorial - I only translated it from French.


Introduction

Many development and developers are wondering how to create a module containing a Prestashop tab.

So we will detail step by step the creation of this famous unit.
Architecture Module

The real plan to build a module in Prestashop always have to resemble this:
   
As you can see, the module has three files:

* Img: for images
* Js: javascript for
* Css: for styles

The module also has various files:

* Logo.gif: icon module (dimensions 16 × 16 pixels)
* AdminTutorial.gif: icon of the tab (from v1.2.0.4, not resolved with implementation Philip S.)
* Tutorial.php: heart of the module file (explained below)
* Tutorial.tpl: template file (or said template) useful for displaying our hook
* AdminTutorial.php
En.php *: for the French translation (perhaps declined in es.php, de.php, etc..)

Note
The word "tutorial" in the name of the file should be replaced by the name of your module, or tab.
The heart of the module file (tutorial.php)

The heart of the module file is the file that governs the installation, uninstallation and configuration enforcement in the hooks.
A class

This file is composed of a single class with the name of your module and extending the class module.

PHP Code:

<?php
class tutorial extends Module
{
  // Méthodes & Membres
}
?>

A manufacturer: __construct ()

The constructor of the class whose method name __construct () (I refer you to courses on the subject PHP5) allows the module to be identified and ranked in the list of modules backoffice.

PHP Code:

public function __construct()
{
  $this->name = 'tutorial';
  $this->tab = 'Blocks';
  $this->version = '1.0';
 
  parent::__construct();
 
  $this->displayName = $this->l('Tutorial Module');
  $this->description = $this->l('I'm a tutorial module, thanks to Julien Breux');
  $this->confirmUninstall = $this->l('Are you sure you want to delete your details ?);
} 


As you can see, the method __construct () can assign values to some members.
(small reminder of the basic variables within the class are called members)
The members are:

* Name: module name (without accents, spaces, special characters ...)
* Tab: module category (other, stats, products, tools, advertisement, blocks, etc..)
* Version: module (recall that at present there is no management update)
* DisplayName: name for the display module (short xHTML allowed)
* Description: description for the display module (short xHTML allowed)
* ConfirmUninstall: prompt before uninstalling the module (xHTML unauthorized message posted in javascript alert)

Important
The pseudo-variable $ this is a reference to your module (or object), ie, to call a method or member in your class,
you can use it like this: $ this-> myMethod () / $ this-> myProperty;

The parent keyword in turn allows the operator via the scope resolution (: to call the Parent contained in the class module (remember the extends keyword allows your module to inherit methods and members Class Module).
A method for translation: l ($ string)

This method can therefore translate text, by default the text passed as parameter must be in English (since this language does not contain accents, and English is the international language)

Thanks to the legacy that we can call the method named l ($ string) of the superclass module.
In this way $ this-> l ( 'My Translation');

Note
In the constructor of your module, you must call the method parent:: __construct () before translating the text (using the method l ($ string)) and after said member $ this-> name. (translation method uses $ this-> name to find the translation files)
A method for installation: install ()

The method for installation is very simple, it can save the module perform the actions you want and also save hooks.
All that is in this method is executed during the installation of your module.

For example, I chose to install a hook, add a configuration variable stored in the database and the famous installation tab (discussed later)

PHP Code:

public function install()
{
  if(!parent::install()
    || !$this->registerHook('leftColumn')
    || !Configuration::updateValue('MOD_TUTORIAL_IMG', 'http://julien.breux.free.fr/logo.jpg') 
    || !$this->installModuleTab('AdminTutorial', array(1=>'My Tutorial Tab', 2=>'Mon onglet tutoriel'), 2))
    return false;
  return true;
} 


To be brief, the method registerHook ($ hookName) can record (reference) a hook in Prestashop. (View latest)
The static method updateValue ($ key, $ value) of the Configuration class allows to update a configuration variable, or create it if it does not exist) and finally the method installModuleTab ($ tabClass, $ tabName , $ idTabParent) and a method of my sauce for recording one or more tabs.

If the install () method returns false, the module is not installed. (well in theory ...)
A method for uninstall: uninstall ()

The method for uninstalling is equally simple method deleteByName ($ key) of the Configuration class allows you to delete a variable configuration database. The method uninstallModuleTab ($ tabClass) is also a method to my sauce to remove a tab.
The hooks on these are automatically uninstalled.

PHP Code:

public function uninstall()
{
  if(!parent::uninstall()
    || !Configuration::deleteByName('MOD_TUTORIAL_IMG') 
    || !$this->uninstallModuleTab('AdminTutorial'))
    return false;
  return true;
} 


A method for configuration: getContent ()
   
This method allows you to configure your module via a link (>> Configure) in the list of modules. It simply loads an echo to the xHTML you put into it:

PHP Code:

public function getContent()
{
  $html = '';
  if(Tools::isSubmit('submitTutorial'))
  {
    if(Validate::isUrl(Tools::getValue('tutorial_img')))
    {
      Configuration::updateValue('MOD_TUTORIAL_IMG', Tools::getValue('tutorial_img'));
      $html .= $this->displayConfirmation($this->l('Settings updated.'));
    }
    else
    {
      $html .= $this->displayError($this->l('Invalid URL.'));
    }
  }
  $tutorial_img = Configuration::get('MOD_TUTORIAL_IMG');
  $html .= '<h2>'.$this->l('Tutorial Module').'</h2>
  <form action="'.$_SERVER['REQUEST_URI'].'" method="post">
    <fieldset>
      <legend>'.$this->l('Settings').'</legend>
      <label>'.$this->l('Image URL').'</label>
      <div class="margin-form">
        <input type="text" name="tutorial_img" value="'.$tutorial_img.'" />
      </div>
      <div class="clear center">
        <p>&nbsp;</p>
        <input class="button" type="submit" name="submitTutorial" value="'.$this->l('   Save   ').'" />
      </div>
    </fieldset>
  </form>';
  return $html;
} 


Tools: isSubmit ($ post_get_var_name): tools Static method that returns true if the form element is sent.
Validate: isUrl ($ var) method static validator that returns true if the variable is passed a URL.
Tools:: getValue ($ post_get_var_name): tools Static method that returns the value of a form element.
displayConfirmation ($ message): Method that displays a success message.
displayError ($ message);: A method of displaying an error message.
   
A method for the hook: hookXXX () (XXX is the name of the hook)

As we will hook hanging from leftcolumn, the method is thus the name: hookleftColumn ($ params)

We will return in another tutorial on the different types of hook in existing Prestashop and different parameters they accept.

This hook can simply display the image of our tutorial in the left column with the template file tutorial.tpl by assigning a variable named TUTORIAL_IMG. (refined to give the url of the image)

PHP Code:

public function hookleftColumn($params)
{
  global $smarty;
  $smarty->assign('TUTORIAL_IMG', Configuration::get('MOD_TUTORIAL_IMG'));
  return $this->display(__FILE__, 'tutorial.tpl');
} 


   
The template file will therefore contain the following code:

PHP Code:

<div class="block">
  <h4>{l s='Tutorial' mod='tutorial'}</h4>
  <div class="block_content center">
    <img src="{$TUTORIAL_IMG}" alt="{l s='Tutorial' mod='tutorial'}" />
  </div>
</div> 


You will notice that only one template in the translation is done with the (ls = 'Tutorial' mod = 'tutorial'),
My Tutorial extends to translate the text and tutorial extends the module name.
Also displaying an assigned variable is used like this: ($ my_var) / ($ myVar) / ...
That's all for the hook ... and templates ...
Install / Uninstall tab of a

So far, you can now make a module that holds the road!
Now let's see how to install a tab. Here's my method:

PHP Code:

private function installModuleTab($tabClass, $tabName, $idTabParent)
{
  @copy(_PS_MODULE_DIR_.$this->name.'/logo.gif', _PS_IMG_DIR_.'t/'.$tabClass.'.gif');
  $tab = new Tab();
  $tab->name = $tabName;
  $tab->class_name = $tabClass;
  $tab->module = $this->name;
  $tab->id_parent = $idTabParent;
  if(!$tab->save())
    return false;
  return true;
} 


Let us now remove a tab. Here's my method: (<- copy / paste)

PHP Code:

private function uninstallModuleTab($tabClass)
{
  $idTab = Tab::getIdFromClassName($tabClass);
  if($idTab != 0)
  {
    $tab = new Tab($idTab);
    $tab->delete();
    return true;
  }
  return false;
} 


The file tab

Here is the file tab:
   
And here is the code:

PHP Code:

<?php
include_once(PS_ADMIN_DIR.'/../classes/AdminTab.php');
class AdminTutorial extends AdminTab
{
  public function display()
  {
    echo $this->l('This is my tab ! A big big thanks to Julien Breux').'<br /><p class="center"><img src="'.Configuration::get('MOD_TUTORIAL_IMG').'" alt="-" /></p>';
  }
}
?>

The class must inherit your tab AdminTab class is for this that we must include this tab (before the function __autoload ()).
The method display () to display content directly to a tab of backoffice Prestashop
And that's what the example shows.
The problem with the translation of the tabs and icon

As you've probably noticed the translation works very badly. That's why I'll run a pipe!
In addition, the icon does not work in the breadcrumb ...
But we are currently bearing problems with Philip S. (currently on vacation, like me, but later)

For the first problem, simply use the constructor for your tab:

PHP Code:

private $module = 'tutorial';
public function __construct()
{
  global $cookie, $_LANGADM;
  $langFile = _PS_MODULE_DIR_.$this->module.'/'.Language::getIsoById(intval($cookie->id_lang)).'.php';
  if(file_exists($langFile))
  {
    require_once $langFile;
    foreach($_MODULE as $key=>$value)
      if(substr(strip_tags($key), 0, 5) == 'Admin')
        $_LANGADM[str_replace('_', '', strip_tags($key))] = $value;
  }
  parent::__construct();
} 


For the second problem, here's a line to add the method installModuleTab ()

PHP Code:

@copy(_PS_MODULE_DIR_.$this->name.'/logo.gif', _PS_IMG_DIR_.'t/'.$tabClass.'.gif'); 


Caution, do not forget to change the member module.
Conclusion

You are now in possession of a complete module that allows just display an image in a tab but also in the left column of your site.
I hope you'll take as much pleasure to see this tutorial that I wrote to.
Feel free to post at least one comment per visit, it's always fun. (Even for most developers "Me" who say: "Phew I knew it!")
On the occasion, please post a link to my site ... or ask the development, I am not very expensive and working well
Thank you to Anne-So for some corrections
Time of completion of the tutorial: 4 hours (I go to bed!)

You'll earn money with my tutorial, make me win
Download - Module tutorial
  tutorial.zip (Size: 3.72 KB / Downloads: 128)

[PremierHostsUK]

Many thanks for this as I was looking for a way to build a box on the right hand colum of my site to put the user info, sitemap & bookmark links into. I'll give it a go but if there is anyone on the forum that has done just this please let me know and help a hand.

Great that I stubled accross this forum as i get lost on the main PS forum

Regards

Jay Kay
http://www.hydroflora.co.uk (Latest Site)

[spott]

You welcome

[mattimatti]

Thank you very much for translating this precious tutorial. !!!!

[sesso]

Thanks much, dear!

[brurez]

Thank you for sharing this.

[amitkahan]

Thank you for sharing this fantastic tutorial, keep it up

[Jubri]

Thanks a lot!

Regards.

[victusmei]

Thank you for the FANTASTIC translation, and thanks to the original author.

I noticed that when installing a Tab, the tab name is not working right: I created a tab named "Reports," but the name showed up as "e" in English, "p" in French, and "o" in Spanish.

I realized that PrestaShop was expecting an array of names, one in each language. Since we are passing a string to it, it treats it as an array and uses the first letter for id_lang 1, the second letter for id_lang 2, etc.

The fix is to modify the function installModuleTab in your tutorial and replace this line:

PHP Code:

$tab->name = $tabName; 


With this line:

PHP Code:

foreach (Language::getLanguages() as $language)
            $tab->name[$language['id_lang']] = $tabName;