How to Edit Front Page Content in Prestashop
In this tutorial I will show you step by step how to edit front page content in prestashop. Even if it sounds it is easy I have to say it is not so easy as it sounds especially if you are begginer with prestashop. Does not matter your prestashop developer level because I will try to explain how easy I can in order to everybody know how to create a module for front page after read this tutorial.
First of all you have to open up your prestashop installation using a ftp client like Filezilla or with your text editor. In modules folder create a new folder and name it: homepage. In this folder we will have to create a new file called homepage.php where we will add all main functions of our module. Your homepage.php file should look like the following:
<?php if (!defined('_PS_VERSION_')) exit; class Homepage extends Module{ public function __construct(){ $this->name = 'homepage'; $this->version = 1.0; $this->bootstrap = true; $this->displayName = $this->l('Homepage'); parent::__construct(); $this->displayName = $this->l('Homepage'); $this->description = $this->l('Edit front page.'); if ($this->active && Configuration::get('homepage') == '') $this->warning = $this->l('You have to configure your module'); $this->errors = array(); } public function install(){ if (!parent::install()) return false; $this->registerHook('displayHome') && $this->registerHook('displayAdminNavBarBeforeEnd') && $this->registerHook('displayAdminAfterHeader') && $this->registerHook('displayBackOfficeHeader'); return true; } public function uninstall(){ if (!parent::uninstall()) return false; parent::uninstall(); return true; } public function getContent(){ $output = '<h2>Global Settings</h2>'; if (Tools::isSubmit('submit'.Tools::ucfirst($this->name))) { $home_first_section = Tools::getValue('home_first_section'); Configuration::updateValue('home_first_section', $home_first_section); 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('home_first_section', Tools::getValue('home_first_section', Configuration::get('home_first_section'))); $this->context->smarty->assign('path', $this->_path); $this->context->smarty->assign('submitName', 'submit'.Tools::ucfirst($this->name)); $this->context->smarty->assign('errors', $this->errors); return $this->display(__FILE__, 'views/templates/admin/edit.tpl'); } public function hookDisplayHome(){ $this->context->smarty->assign( array( 'home_first_section' => Configuration::get('home_first_section') ) ); return $this->display(__FILE__, 'views/templates/front/homepage.tpl'); } }
As you can see in the code above here you have all code you need to install/uninstall the module and update a textarea field from module settings page. Here you have a model so you can add how many fields you need in this module using my example.
In the displayForm() function we only assign the variables we need in the edit.tpl file, when this function is called we return the edit.tpl file with all variables assigned. You will see we use these variable later in the edit.tpl template file. The getContent() function has the role to save our form from edit.tpl in the if statement we check if our form was submitted. Using updateValue() function we update a column from prestashop database with the new value from our form.
As you can see in the hookDisplayHome() function we have a return there, this return actally will return our homepage, in other words, we need to create some new folders in the homepage folder.
Create folders like so:
- Homepage
- homepage.php
- views
- templates
- admin
- edit.tpl
- front
- homepage.tpl
- admin
- templates
All content which will be added in homepage.tpl will appear on your prestashop front page, because we have just registered this template file in displayHome hook. Of course you can change the position of this module using prestashop back office under: Design -> Positions and search for displayHome hook.
In edit.tpl file you will have to add the form from where you will stoare all data for your module. So the file should look like the following:
{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-horizontal"> <div class="panel"> <div class="panel-heading"> <i class="icon-cogs"></i> Labels Settings </div> <div class="form-wrapper"> <div class="form-group"> <label class="control-label col-lg-3">First Section Description</label> <div class="col-lg-9"> <textarea name="home_first_section" class="form-control">{$home_first_section}</textarea> </div> </div> </div> <div class="panel-footer"> <a href="" class="btn btn-default" id="cms_form_cancel_btn" onclick="window.history.back();"> <i class="process-icon-cancel"></i> Cancel </a> <button type="submit" value="1" id="cms_form_submit_btn" name="{$submitName}" class="btn btn-default pull-right"> <i class="process-icon-save"></i> Save </button> </div> </div> </form>
This is the easiest way you can edit front page content in prestashop as you wish, if you want you can search for other modules on google but I think the above method is the best one because you can create your own fields and then show them how you need in the tpl file.