This is random post under Prestashop Modification Tutorial Series. You have to already familiar with Object Oriented Programming in PHP, Smarty, module programming in PrestaShop, and able to manage MySql database either using web interface like PhpMyAdmin, or using command line in Windows command prompt / shell.

In this tutorial we’ll take a test case in http://moxelectronics.com/home/. By this time, this website is using flash and our client request to porting this flash website into PrestaShop theme.

Mox Electronics Flash Ecommerce Home Page

After designing new static html page with some image from this flash website we got this. Please note that this screen shot was taken while the project is still not yet finished.

New Statich HTML Page from Flash Webpage

After some step configuring this static html page in PrestaShop theme system we got this.

Mox Prestashop Glossy Theme

The problem is we need to place search box in the center of page like in the flash website. But in prestashop there are just hook home {$HOME} available in this area, which this hook only executed at index / default page. If user navigate to other page like categories, product details, etc they can’t see this search box. So we need to add new hook in this center of page to insert our search box in all available pages.

#1 Add hook variable in Header.php

Find this file in ../prestashop/header.php. We need to define new hook variable in this file so we can using this hook in all available place in new theme.

Add this line

'HOOK_CENTER' => Module::hookExec('center')

the result

$smarty->assign(array(
 'HOOK_HEADER' => Module::hookExec('header'),
 'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
 'HOOK_TOP' => Module::hookExec('top'),
 'HOOK_CENTER' => Module::hookExec('center'),
 'static_token' => Tools::getToken(false),
 'token' => Tools::getToken(),
 'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
 'content_only' => intval(Tools::getValue('content_only'))

));

Our new hook is named HOOK_CENTER, we can adding this hook into smarty file by using this format {$CENTER}. You can name this new hook by following variable naming conventions.

#2 Add new hook data in hook table

In order to PrestaShop understand that we have new hook available in smarty files, you need to insert new row in hook table.

INSERT INTO `yourdatabasename`.`ps_hook` (
`id_hook` ,
`name` ,
`title` ,
`description` ,
`position`
)
VALUES (
NULL , 'center', 'center of page, ', NULL , '1'
);

Description

`id_hook` = An auto increment value
`name` = Name of the new hook
`title` = This title is used in Modules tab in Back Office
`description` = The description of hook (optional)
`position` = Whether this hook observe the order of appearance with other module or not

#3 Add your hook into your template

We have defined our new hook in first step as HOOK_CENTER. You can add this hook by adding this code into your template files

{$CENTER}

In our test case, we need to add this code in 4 main files

1. category.tpl
2. product.tpl
3. index.tpl
4. cms.tpl

Just insert in the first line of each file. Maybe you want also add this line to clear your structure

<div class="clear"> </div>

#4 Make your module executed with this hook

Modify your blocksearch.php to executed with this new hook.

Change your install function into:

function install()
{
if (!parent::install() OR !$this->registerHook('center') OR !$this->registerHook('header'))
return false;
return true;
}

And add this new function

function hookCenter($params)
{
global $smarty;
$smarty->assign('ENT_QUOTES', ENT_QUOTES);
$smarty->assign('ajaxsearch', intval(Configuration::get('PS_SEARCH_AJAX')));
return $this->display(__FILE__, 'blocksearch-top.tpl');
}

Thanks for reading. This is final result from this tutorial, Adding New Hook in PrestaShop System.

Mox Prestashop Glossy Theme with Search Box

This theme is made by my friends, its not mine. We just integrated this theme with Prestashop system. My friend designing this prestashop theme by adobe photoshop then conver it into static html page. My job was integrating this static html with prestashop theme system. Thus this prestashop theme is not free, I’m sorry if it’s not Free Prestashop Theme. In my next post I’ll review some free prestashop theme already out there for free. Thanks for subscribing.

This links go to same article

prestashop hooks, prestashop hook, HOOK PRESTASHOP, prestashop HOOK_TOP, prestashop create hook, prestashop ajouter hook, prestashop create new hook, prestashop template hook, prestashop new hook, prestashop add hook, prestashop hookExec, modify header prestashop, prestashop ???????? ????? ???, ajouter hook prestashop, prestashop theme tutorial, prestashop change hooks, add new hook presta, {$HOOK_TOP}, optimise search module prestashop, new hook prestashop, 

Related posts:

PrestaShop Diet Program – PrestaShop Modification Tutorial Series

The need for speed Despite its technical sophistication and advanced functionality, the PrestaShop e-Commerce Solution is very light (around 6 MB not including translation files), so it’s easy to download, install, and update. PrestaShop is so lightweight and speedy, even customers with slow connection speeds will enjoy buying from you!...

Prestashop Images SEO Tips – Prestashop SEO Tutorial

This post is about How to optimize Prestashop in Search Engine Optimization (SEO) perspective by altering images naming convention. 3) How to name the images It’s been recognised within SEO generally that file names can have an impact on results. This is reflected too within search engine optimisation for images....

Setup Mysql Database – #2 DIY PrestaShop Installation Tutorial Series

This is part #2 from our PrestaShop Installation Tutorial Series. You can read our previous post Uploading PrestaShop files – DIY PrestaShop Installation Tutorial Series in Site5 web hosting. This step is merely same in other web hosting, please try it although with different screenshot. #1. Manage MySql Database #2...

• Previous Entry: Setup Mysql Database – #2 DIY PrestaShop Installation Tutorial Series
• Next Entry: PrestaShop Diet Program – PrestaShop Modification Tutorial Series