Prestashop offers handy tools to work on the creation of its FrontController in the module and page customization. You can entirely change the page according to your needs and change not only the right or the left column of the theme, but also footer and header.
It’s not that complicated to create a custom FrontController. It’s inherited from ModuleFrontController
|
1 2 3 4 |
class mymoduleFrontModuleFrontController extends ModuleFrontController { } |
and is located in the directory <root>/modules/<mymodule>/controllers/front/. The class ModuleFrontController is inherited from the FrontController class, with rewriting methods setTemplate(), __construct(), getTemplatePath().
Check the article “How To Implement a Controller In a Custom Module“.
Frontend page can be entirely changed as one desires. In order to disable/enable columns and also footer and header, the following FrontController class properties need to be applied:
|
1 2 3 4 5 6 7 |
protected function disableColumns() { $this->display_column_left = false; $this->display_column_right = false; $this->display_footer = false; $this->display_header = false; } |
Front-end page should contain at least one file – layout.tpl which is by default located in /root/modules/moduleName/views/templates/front/layouts/layout.tpl. But there is only one file for displaying the content and it means there isn’t much flexibility. Let’s say, you need to display several pages with different design. To do this task, it’s convenient to use layout.tpl as an entry point to connect with necessary files, for example:
|
1 2 3 |
{if !empty($display_header)}{include file=“$my_module_dir./header.tpl” HOOK_HEADER=$HOOK_HEADER}{/if} {if !empty($template)}{$template}{/if} {if !empty($display_footer)}{include file=“$my_module_dir./footer.tpl"}{/if} |
The header.tpl and footer.tpl files are located one level above the layout.tpl (in fact they can be located anywhere, it’s important to correctly define the $my_module_dir variable).
In order to define the $my_module_dir variable in your controller, you can use the following method:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
protected function getModuleDir($data=null) { $path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/front/'; if(!is_null($data)){ return _PS_MODULE_DIR_.$this->module->name.'/views/templates/front/'.$data.'/'; } if(!is_null($data)) throw new Exception('Template not mapped'); return $path; } |
If you stock the template files of the module in the /root/modules/moduleName/views/templates/front/ directory , then in the mymoduleFrontModuleFrontController class code you can use the method inherited from the FrontController :: setTemplate() class :
PrestaShop Modules
Take your online store to the next level with BelVG PrestaShop Modules
Visit the store|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
protected function showCategory() { if(!$this->chain_after){ return; } if(Tools::getIsset('products_list')) { $this->products = $this->employee->getProducts(); $this->setTemplate(‘product-list.tpl'); } } |
Depending on controller’s logic, you can add any template from the /root/modules/moduleName/views/templates/front/ folder to the FrontController::setTemplate() method.
I would like to point out that in the templates of your module the same variables as in in the main templates of Prestashop theme are available. And you can use these variables if necessary.
In general, to create customized module pages, Prestashop offers enough tools that allow making changes in the design for a Frontend page. For inspiration check how world famous brands running on Prestashop.
PrestaShop Development
Take your online store to the next level with BelVG PrestaShop Development
Visit the page
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
hi Artsem,
What about your method on Prestashop 1.7 ?
It seems that $this->setTemplate(‘product-list.tpl’); doesn’t work anymore. Only the tpl of the module is loaded, and not like in 1.6 the common header, footer. No css, js are loaded anymore !
Looking forward to your comment :)