> For the complete documentation index, see [llms.txt](https://docs.prestashop-project.org/1-5-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.prestashop-project.org/1-5-documentation/english-documentation/developer-guide/creating-a-front-office-module.md).

# Creating a front-office module

**Table of contents**

* [Creating a front-office module](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Creatingafront-officemodule)
  * [Organizing your module](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Organizingyourmodule)
  * [Creating the bootstrap file](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Creatingthebootstrapfile)
    * [Adding a constructor](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Addingaconstructor)
    * [The install() and uninstall() methods](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Theinstall\(\)anduninstall\(\)methods)
  * [Building the config.xml file](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Buildingtheconfig.xmlfile)
  * [Adding a configuration page](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Addingaconfigurationpage)
  * [Implementing hooks](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-Implementinghooks)
  * [Template and CSS files](http://doc.prestashop.com/display/PS15/Creating+a+front-office+module#Creatingafront-officemodule-TemplateandCSSfiles)

## Creating a front-office module <a href="#creatingafront-officemodule-creatingafront-officemodule" id="creatingafront-officemodule-creatingafront-officemodule"></a>

### Organizing your module <a href="#creatingafront-officemodule-organizingyourmodule" id="creatingafront-officemodule-organizingyourmodule"></a>

A module is made of a lot of files, all stored in a folder that bears the same name as the module, that folder being in turn stored in the /modules folder at the root of the main PrestaShop folder.

Default files and folders for a PrestaShop 1.5 module:

* "Bootstrap" file: `name_of_the_module.php`
* Translation files: `fr.php`, `en.php`, `es.php`, etc., all in the `/translations` sub-folder
* Cache configuration file: `config.xml`
* Module-specific controllers, all in the `/controllers` sub-folder
* Class-overriding code, all in the `/override` sub-folder (automatic install/uninstall using copy or merge)
* View files: JavaScript, Models, CSS files, etc.:
  * `/views/css` sub-folder for CSS files
  * `/views/js` sub-folder for JavaScript files
  * `/views/templates/front` sub-folder for files used by the module controller
  * `/views/templates/hooks` sub-folder for files used by the module's hooks
* 16x16 module logo: `name_of_the_module.jpg` (JPG format)
* 32x32 module logo: `name_of_the_module.png` (PNG format)

The module we are going to create in called "Hello World!". Therefore, its folder is `/modules/helloworld`, and its bootstrap file must be `/modules/helloworld/helloworld.php`, with a `HelloWorld` class defined inside.

### Creating the bootstrap file <a href="#creatingafront-officemodule-creatingthebootstrapfile" id="creatingafront-officemodule-creatingthebootstrapfile"></a>

Here is a very basic first file for the module, named `helloworld.php`:

| `<?phpif` `(!defined('_PS_VERSION_')) exit;class` `HelloWorld extends` `Module{}` |
| --------------------------------------------------------------------------------- |

At this stage, the module can only be seen in the "Modules" page in the back-office, in the "Other modules" section.

#### Adding a constructor <a href="#creatingafront-officemodule-addingaconstructor" id="creatingafront-officemodule-addingaconstructor"></a>

&#x20;Let's add a first method to our bootstrap code. This method will initialize the module's variables.

| `<?phpif` `(!defined('_PS_VERSION_')) exit;class` `HelloWorld extends` `Module{  public` `function` `__construct()  {    $this->name = 'helloworld';    $this->tab = 'front_office_features';    $this->version = '1.0';    $this->author = 'Me, myself and I';    // New in Prestashop 1.5    $this->ps_versions_compliancy = array('min'` `=> '1.5', 'max'` `=> '1.6'); // required Prestashop 1.5    $this->dependencies = array('blockcart'); // This module needs the 'blockcart' module in order to work properly.    parent::__construct();    $this->displayName = $this->l('Hello World');    $this->description = $this->l('This is a sample module.');    $this->confirmUninstall = $this->l('Are you sure you want to uninstall?');    if` `(!Configuration::get('HELLO_WORLD_NAME'))      $this->warning = $this->l('No name provided');  }}` |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

`$this->name` must be the same as the module's folder name!

`$this->tab` is meant to indicate in which module category the module should reside when displayed in the back-office module list. It can take one of the following values:

* `administration`: Administration
* `advertising_marketing`: Advertising & Marketing
* `analytics_stats`: Analytics & Stats
* `billing_invoicing`: Billing & Invoices
* `checkout`: Checkout
* `content_management`: Content Management
* `export`: Export
* `front_office_features`: Front Office Features
* `i18n_localization`: I18n & Localization
* `market_place`: Market Place
* `merchandizing`: Merchandizing
* `migration_tools`: Migration Tools
* `others`: Other Modules
* `payments_gateways`: Payments & Gateways
* `payment_security`: Payment Security
* `pricing_promotion`: Pricing & Promotion
* `quick_bulk_update`: Quick / Bulk update
* `search_filter`: Search & Filter
* `seo`: SEO
* `shipping_logistics`: Shipping & Logistics
* `slideshows`: Slideshows
* `smart_shopping`: Smart Shopping
* `social_networks`: Social Networks

#### The install() and uninstall() methods <a href="#creatingafront-officemodule-theinstall-anduninstall-methods" id="creatingafront-officemodule-theinstall-anduninstall-methods"></a>

These two methods make it possible to control what happens when the store administrator installs or uninstalls the module.

In this example, we perform the following tasks during installation:

* check that the module is not already installed
* check that the module is not added to the `leftColumn` hook
* check that the module is not added to the `header` hook
* create the `HELLO_WORLD_NAME` configuration setting, setting its value to "World"

| `public` `function` `install(){  if` `(Shop::isFeatureActive())    Shop::setContext(Shop::CONTEXT_ALL);  if` `(!parent::install() OR    !$this->registerHook('leftColumn') OR    !$this->registerHook('header') OR    !Configuration::updateValue('HELLO_WORLD_NAME', 'World'))    return` `false;  return` `true;}` |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

For its part, the uninstallation method simply deletes the `HELLO_WORLD_NAME` configuration setting.

| `public` `function` `uninstall(){    if` `(!parent::uninstall() \|\|        !Configuration::deleteByName('HELLO_WORLD_NAME') )        return` `false;    return` `true;}` |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

### Building the config.xml file <a href="#creatingafront-officemodule-buildingtheconfig.xmlfile" id="creatingafront-officemodule-buildingtheconfig.xmlfile"></a>

This file makes it possible to optimize the loading of the module list in the back-office.

| `<?xml version="1.0"` `encoding="UTF-8"` `?><module>  <name>helloworld</name>  <displayName>Hello World></displayName>  <version>1.0></version>  <description>This is a sample module.</description>  <author>Moi></author>  <tab>front_office_features></tab>  <confirmUninstall>Are you sure you want to uninstall?</confirmUninstall>  <is_configurable>1</is_configurable>  <need_instance>1</need_instance>  <limited_countries></limited_countries></module>` |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

A few details:

* `is_configurable` indicates whether the module has a configuration page or not.
* `need_instance` indicates whether an instance of the module must be created when it is displayed in the module list. This can be useful if the module has to perform checks on the PrestaShop configuration, and display warning message accordingly.
* `limited_countries` is used to indicate the countries to which the module is limited. For instance, if the module must be limited to France and Spain, use `<limited_countries>fr,es</limited_countries>`.

This module can be created automatically by PrestaShop.

### Adding a configuration page <a href="#creatingafront-officemodule-addingaconfigurationpage" id="creatingafront-officemodule-addingaconfigurationpage"></a>

Your module can get a "Configure" link in the back-office module list, and therefore let the user change some settings. This "Configure" link appears with addition of the `getContent()` method.

| `public` `function` `getContent(){  if` `(Tools::isSubmit('submit'.$this->name))  {    $HELLO_WORLD_NAME` `= strval(Tools::getValue('HELLO_WORLD_NAME'));    if` `(!$HELLO_WORLD_NAME` `OR          empty($HELLO_WORLD_NAME) OR          !Validate::isGenericName($HELLO_WORLD_NAME))      $output` `.= $this->displayError( $this->l('Invalid Configuration value') );    else    {       Configuration::updateValue('HELLO_WORLD_NAME', $HELLO_WORLD_NAME);       $output` `.= $this->displayConfirmation($this->l('Settings updated'));    }  }  return` `$output.$this->displayForm();}` |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

The configuration form itself is displayed with the `displayForm()` method:

| `public` `function` `displayForm(){  // Get default Language  $default_lang` `= (int)Configuration::get('PS_LANG_DEFAULT');  // Init Fields form array  $fields_form[0]['form'] = array(    'legend'` `=> array(        'title'` `=> $this->l('Settings'),    ),    'input'` `=> array(        array(          'type'` `=> 'text',          'label'` `=> $this->l('Configuration value'),          'name'` `=> 'HELLO_WORLD_NAME',          'size'` `=> 20,          'required'` `=> true        )    ),    'submit'` `=> array(      'title'` `=> $this->l('Save'),      'class'` `=> 'button'    )  );  $helper` `= new` `HelperForm();  // Module, Token and currentIndex  $helper->module = $this;  $helper->name_controller = $this->name;  $helper->token = Tools::getAdminTokenLite('AdminModules');  $helper->currentIndex = AdminController::$currentIndex.'&configure='.$this->name;  // Language  $helper->default_form_language = $default_lang;  $helper->allow_employee_form_lang = $default_lang;  // title and Toolbar  $helper->title = $this->displayName;  $helper->show_toolbar = true; // false -> remove toolbar  $helper->toolbar_scroll = true; // yes - > Toolbar is always visible on the top of the screen.  $helper->submit_action = 'submit'.$this->name;  $helper->toolbar_btn = array(    'save'` `=>    array(      'desc'` `=> $this->l('Save'),      'href'` `=> AdminController::$currentIndex.'&configure='.$this->name.'&save'.$this->name.            '&token='.Tools::getAdminTokenLite('AdminModules'),    ),    'back'` `=>      array(      'href'` `=> AdminController::$currentIndex.'&token='.Tools::getAdminTokenLite('AdminModules'),      'desc'` `=> $this->l('Back to list')    )  );  // Load current value  $helper->fields_value['HELLO_WORLD_NAME'] = Configuration::get('HELLO_WORLD_NAME');  return` `$helper->generateForm($fields_form);}` |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

### Implementing hooks <a href="#creatingafront-officemodule-implementinghooks" id="creatingafront-officemodule-implementinghooks"></a>

As is, the module does not do much. In order to display something on the front-office, we have to add support for a few hooks. This is done by implementing the hooks' methods:

* `hookDisplayLeftColumn()`: will hook code into the left column – in our case, it will fetch the `HELLO_WORLD_NAME` module setting and display the module's template file, `helloworld.tpl`
* `hookDisplayRightColumn()`: will simply do the same as `hookDisplayLeftColumn()`
* `hookDisplayHeader()`: will add a link to our CSS file, `/views/css/helloworld.css`

| `public` `function` `hookDisplayLeftColumn($params){  $this->context->smarty->assign(array(      'name'` `=> Configuration::get('HELLO_WORLD_NAME')  ));  return` `$this->display(__FILE__, 'helloworld.tpl');}` `public` `function` `hookDisplayRightColumn($params){  return` `$this->hookDisplayLeftColumn($params);}` `public` `function` `hookDisplayHeader(){  $this->context->controller->addCSS($this->_path.'views/css/helloworld.css', 'all');}` |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

### Template and CSS files <a href="#creatingafront-officemodule-templateandcssfiles" id="creatingafront-officemodule-templateandcssfiles"></a>

Here is our template file, located in `/views/templates/hook/helloworld.tpl`:

| `<div id="hello_world_block_left"` `class="block">  <h4>{l s='Message'` `mod='helloworld'}</h4>  <div class="block_content">    <p>Hello,    {if` `isset($name) AND $name}{$name}{else}World{/if}    </p>  </div></div>` |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

...and our CSS file, located in `/views/css/helloworld.css`:

| `div#hello_world_block_left p { font-weight: bold }` |
| ---------------------------------------------------- |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.prestashop-project.org/1-5-documentation/english-documentation/developer-guide/creating-a-front-office-module.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.