How To Create An Options Page For Module Prestashop

I will show you how to implement a new module in prestashop and how to create an options page for the module step by step. This is not very complicated you need to do only few steps to achive this. 

First of all you need to go in the modules folder and create a new one, let's say: ThemeOptions will be my folder. Then in this folder you have to create a file, which will be the main file of the module where we will put the install(), uninstall() functions and so on. Then create a new folder in ThemeOptions called controllers. In this folder we will add a new folder called admin and here we will create a new file called AdminNewModule.php

So the foldes and files structure should follow the following structure:

ThemeOptions

   - controllers

         - admin

               - AdminThemeOptions.php

 - models

 - views 

         - templates

                - admin

                       -  configure.tpl

 - ThemeOptins.php

In the AdminThemeOptions controller you have to insert the following code:

<?php

if(!defined('_PS_VERSION_')){
  exit;
}

class AdminThemeOptions extends ModuleAdminController  {
  public function __construct()
  {
    $this->table = 'theme_options_data';
    $this->className = 'OptionsModel';
    $this->lang = true;
    $this->deleted = false;
    $this->colorOnBackground = false;
    $this->bulk_actions = array('delete' => array('text' => $this->l('Delete selected'), 'confirm' => $this->l('Delete selected items?')));
    $this->context = Context::getContext();
    // définition de l'upload, chemin par défaut _PS_IMG_DIR_
    $this->fieldImageSettings = array('name' => 'image', 'dir' => 'example');
    parent::__construct();
  }
}
 

This is the code you should have in your controller for options page to appear.

Now in main module file we have to add all main functions like install() uninstall() renderForm and so on, so our file should look like this:

<?php

if(!defined('_PS_VERSION_')){
  exit();
}
class ThemeOptions extends Module{

  private $errors = null;

  public function __construct(){ 
    $this->name = 'ThemeOptions';
    $this->tab = 'Theme Options';
    $this->version = 1.0;
      $this->need_instance = 0;
   
      parent::__construct();
   
      $this->displayName = $this->l('Theme Options');
      $this->description = $this->l('Description of my module.');
    
    if ($this->active && Configuration::get('theme_options_page') == '')
      $this->warning = $this->l('You have to configure your module');
    
    $this->errors = array();
  }
   public function install(){
    	if (!parent::install()) 
      		return false;
    $this->installModuleTab();
    	return true;  
     }
   public function uninstall(){
  		if (!parent::uninstall())
    		return false;
    $this->uninstallInternal();
  		parent::uninstall();
  	}
  private function installModuleTab() {
        $tab = new Tab();
    // Need a foreach for the language
    
    $tab->class_name = 'AdminThemeOptions';
    $tab->id_parent = 0; // Home tab
    $tab->module = 'Theme Options';
    $tab->add();
    
    Configuration::updateValue('theme_facebook_url', '');
    Configuration::updateValue('theme_instagram_url', '');
    Configuration::updateValue('theme_google_url', '');
    return parent::install() && $this->registerHook('header');
    
    
    
    }

  private function uninstallInternal() {
        $moduleTabs = Tab::getCollectionFromModule($this->name);
    if (!empty($moduleTabs)) {
      foreach ($moduleTabs as $moduleTab) {
        $moduleTab->delete();
      }
    }
    }
  public function reset(){
      if (!parent::reset())
        return false;
      if( !$this->resetCode()){
        return false;
      }	   
      return Module::enableByName($this->name);
    }
  public function getContent()
  {
    $output = '<h2>'.$this->displayName.'</h2>';
    if (Tools::isSubmit('submit'.Tools::ucfirst($this->name)))
    {
      $facebook_url = Tools::getValue('theme_facebook_url');
      $instagram_url = Tools::getValue('theme_instagram_url');
      $google_url = Tools::getValue('theme_google_url');
      
      Configuration::updateValue('theme_facebook_url', $facebook_url);
      Configuration::updateValue('theme_instagram_url', $instagram_url);
      Configuration::updateValue('theme_google_url', $google_url);
      
      if (isset($this->errors) && count($this->errors))
        $output .= $this->displayError(implode('<br />', $this->errors));
      else
        $output .= $this->displayConfirmation($this->l('Settings updated'));
    }
    return $output.$this->displayForm();
  }
  public function displayForm() 
  {
    $this->context->smarty->assign('request_uri', Tools::safeOutput($_SERVER['REQUEST_URI']));
    $this->context->smarty->assign('path', $this->_path); 
    $this->context->smarty->assign('theme_facebook_url', pSQL(Tools::getValue('theme_facebook_url', Configuration::get('theme_facebook_url'))));
    $this->context->smarty->assign('theme_instagram_url', pSQL(Tools::getValue('theme_instagram_url', Configuration::get('theme_instagram_url'))));
    $this->context->smarty->assign('theme_google_url', pSQL(Tools::getValue('theme_google_url', Configuration::get('theme_google_url'))));
    $this->context->smarty->assign('submitName', 'submit'.Tools::ucfirst($this->name));
    $this->context->smarty->assign('errors', $this->errors);
    // You can return html, but I prefer this new version: use smarty in admin, :)
    return $this->display(__FILE__, 'views/templates/admin/configure.tpl');
  }
  
  public function returnFacebookUrl(){
    $facebook_url = Configuration::getValue('theme_facebook_url');
    return $facebook_url;
  }
}

We are almost done with this module but we still need the html code to show the form on the page, so here is the configure.tpl html code:

{if $errors|@count > 0}
    <div class="error">
        <ul>
            {foreach from=$errors item=error}
                <li>{$error}</li>
            {/foreach}
        </ul>
    </div>
{/if}

<form action="{$request_uri}" method="post" class="form form-horizontal">
    <div class="row">
        <div class="col">
            <div class="card">
                <h3 class="card-header">Social Settings</h3>
                <div class="card-block">
                    <div class="card-text">
                        <div class="form-group">
                            <label class="form-control-label">Facebook URL:</label>
                            <input type="text" size="20" name="theme_facebook_url" class="form-control" value="{$theme_facebook_url}" />
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Instagram URL:</label>
                            <input type="text" size="20" name="theme_instagram_url" class="form-control" value="{$theme_instagram_url}" />
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Google URL:</label>
                            <input type="text" size="20" name="theme_google_url" class="form-control" value="{$theme_google_url}" />
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <input type="submit" name="{$submitName}" value="{l s='Save' mod='example'}" class="btn btn-primary" />
                </div>
            </div>
        </div>
    </div>
</form>



         

Now you can install the module and access the configure page. We have 3 variable here which all of them can be accessed in the configure.tpl file. This code should create an options page for a prestashop module. If you need to get this data in other front templates like header or footer you can follow this totorial where I added some code to access variable in header.tpl file in prestashop.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x