PrestaShop Best Practices – The Right Way to Modify v1.4.x

by Adrian Nethercott on July 19, 2011


Adrian NethercottPrestaShop Best Practices is an ongoing series of articles that are meant to demonstrate the best ways to work with PrestaShop.  In this article, Adrian Nethercott of Nethercott Constructions discusses the right, and wrong, way to modify your PrestaShop v1.4.x store.

Nethercott Constructions:

Upgrading PrestaShop to new versions has always been a major issue on the Forum.  That’s because in v1.3.7 and earlier, core files couldn’t be overridden like they can in v1.4, so they had to be modified instead.  There’s also a wealth of information on the PrestaShop forums that was written for v1.3.7 and earlier, so it instructs users to modify their core files.

There are a lot of stores out there with core modifications, and often no log of these modifications was kept, so it is hard to find the modifications.  In this case, the only option is to compare each file to the default file to find the modifications, which is a lot of work.

PrestaShop v1.4 addressed this issue by adding the option to override classes and controllers, so modifying core files is no longer necessary.  Ideally, this should make all stores built using v1.4 and later easy to upgrade.

Unfortunately, that doesn’t help those who have already made modifications, since turning all these modifications into overrides in v1.4 is a lot of work.  Worse, it seems many developers are unaware of the new PrestaShop v1.4 best practices that make it easier to upgrade.

I recently had a client who had a PrestaShop v1.4 website created for them.  The developers had done the best they could, but there were many little issues that they couldn’t resolve, so the client hired me to fix them.  After looking at the code, it became clear that although the developers did know HTML and CSS, they didn’t understand PrestaShop or the proper way to modify it.

They had modified the default theme, many of the modules, and some of the classes and controllers too.  This made it difficult to find what was modified and will make upgrading the store in the future very difficult.

They had also put all of the new CSS code in global.css and embedded a lot of CSS in the HTML using style tags.

What the developers should have done is copy the themes/prestashop directory to a separate directory with a shortened name of the website.  That way, when you need to upgrade PrestaShop in the future, you can overwrite the themes directory without having to worry about losing the changes to your theme.

You will end up with the latest default PrestaShop theme in one directory and your older theme in the other, allowing you to compare the themes and copy over the latest changes.  If you’ve already done it the wrong way, you will need to rename your theme before you overwrite the themes directory with the latest version.

Instead of modifying the modules directly, the developers should have copied the original module TPL files into their modified theme and then modified the files there.  For example, instead of modifying modules/homefeatured/homefeatured.tpl directly, they should have copied it to themes/<theme_name>/modules/homefeatured/homefeatured.tpl.

Actually, since the PHP file modules/homefeatured/homefeatured.php was also modified, it would have been better to copy the modules/homefeatured directory to modules/homefeatured2 and change all instances of homefeatured to homefeatured2.

That way, when you need to upgrade PrestaShop in the future, you can overwrite the modules directory without having to worry about losing the modifications to modules/homefeatured/homefeatured.php.  You can then copy over the latest code from the homefeatured directory to the homefeatured2 directory.  Of course, doing this is unnecessary if you are only modifying the TPL file, and you should avoid editing the PHP files whenever possible.

The developers also shouldn’t have modified the default classes and controllers.  Instead, they should have used overrides.  The best way to write an override is to add code before or after the default code.  That way, you won’t have to worry about upgrading PrestaShop in the future, since the override will run the latest code, then your own code.

Unfortunately, if the code you want to add relies on local variables or code within a core function, you will need to copy the entire function into your override and then modify it as needed.  That makes it slightly harder to upgrade, since you need to copy over the latest changes to your modified function.

You can read more about overriding classes and controllers and see examples in my PrestaShop Development Guide.

The developers also made the mistake of putting all the new CSS code in global.css, including CSS that was used only on the product page.  This caused the product page CSS to be loaded on all pages of the website instead of just the product page, which caused unnecessary CSS to be downloaded and loaded.

If you need to apply CSS to a single page only, you should put it in the appropriate CSS file for that page.  You should only add CSS to global.css if it applies to multiple pages, or if there is no specific CSS file for the page, though creating a CSS for the page would be better.

You should also avoid using the style tag to add CSS and instead move the CSS into the appropriate CSS file.  This enables the CSS to be combined, compressed and cached with the rest of the CSS.

Remember, don’t be lazy, or you’ll create more work for yourself in the future, and we all hate that.

BONUS TIP:

The developers had also created an image-heavy PrestaShop theme.  Usually, this isn’t a problem, but since many of the images weren’t optimised, these images slowed down the website considerably, causing the client to complain that the website was too slow to load.

I always save images that are around 256 colours or less in PNG-8 format using Photoshop, since they are usually smaller than GIF images and have lossless compression, unless there are more than 256 colours.

Lastly, I use Google Page Speed for Firefox to compress GIF and PNG images even further.  The “Optimize Images” option is somehow able to compress these images even more than image editors can, and gives you the option to download the optimised images.

Be aware that the optimised images may not open correctly in image editors anymore, so keep a copy of the original in case you need to edit it.

For images that are much more than 256 colours, I save them in JPEG format with a quality setting of about 60-70, depending on the image.  I try to reduce it as much as possible without a noticeable loss in quality.

Nethercott Constructions Logo

Nethercott Constructions provides custom themes and modules and advice on all things PrestaShop.  You can check them out at http://www.nethercottconstructions.com/.

Adrian Nethercott is a web developer with more than three years of experience working with PrestaShop. His website Nethercott Constructions has free PrestaShop guides and sells PrestaShop modules.

Facebook 

If you enjoyed this article, get email updates (it's free).

{ 51 comments… read them below or add one }

Citlalli October 14, 2013 at 11:57 am

hello how are u, hope you are here yet, i have some questions, i installed one template version 14.0 but i have one problem, they doesn´t display on center column or right column block or footer, i don´t know why, i am beginner for prestashop, i will be grateful for your help.

Citlalli

Reply

maria January 17, 2013 at 5:57 pm

Hi Adrian!
I have just installed Prestashop 1.5 and I would like to edit the text CONTACT – Our hotline is available 24/7 – in the index.php – How I can change the text as it says in the file *Do not edit or add to this file if you wish to upgrade PrestaShop to newer versions in the future*???
Regards
Maria

Reply

yemi October 12, 2012 at 12:04 pm

Thank you Adrian, very nice post.
Please I have a little issue here, I just installed Prestashop 1.5.1 and am having difficulty in editing the modules. I want to be able to edit modules h4 precisely and I don’t know where to go.

I want to add background image, color, font color and all that.

Please where can I go to do this?

Thanks

Reply

Mario August 6, 2012 at 2:38 pm

Hi Adrian,
Do you think is possible to modify the css and some other files to have the center column loaded first, then left, right, header, footer…like here ? – http://matthewjamestaylor.com/blog/perfect-3-column.htm
This will be good for SEO…but I don’t know how complicate this would be.
What do you think?
Thank you

Reply

Mark August 1, 2012 at 8:05 am

Hi Adrian,
I am a copy/ paster, I have no training but can edit kind of .. however, I am struggling with what might be a simple thing. I want to change a colour of the header, the template I am using is a presta add on, the designer is using a hedd.png for black/purple. So, I re coloured the purple to pink, ensured the image had exactly the same name hedd.png However, when i uploaded it, the header went white, when I clicked on where the png should be I got the message: the image ../…/…/ hedd.png cannot be displayed because it contained errors. Usually recolouring or even adding different pics with the same name works, have you any idea what is going wrong please?

Reply

Eric Leonardo July 27, 2012 at 7:28 am

Hi, nice post, Adrian!

I want to add a discount rule to the CartCore, so when:
Order_total is >= 100 And Order_total 500 And Order_total Cart.php ?
Or in the Cart.php file of my personal theme?

Is this code right? Searching on google, I’ve found this example:

if ($order_total >= 50 AND $order_total = 101 AND $order_total < 1000) $order_total = 50/100;
if ($type == 5) return $shipping_fees;
if ($type == 6) return $wrapping_fees;
if ($type == 3) $order_total += $shipping_fees + $wrapping_fees;
if ($order_total < 0 AND $type != 2) return 0;

Thank you
Eric

Reply

Janeske July 26, 2012 at 4:34 am

Hi Adrian
I hope you can help.
I am completely new to all the coding things and need a quick help on my header problem.
Eventually, after I had figured out how to change my background (as well as the header background to match my page background), I desided to design a completely new background. However, when I changed my page background and removed the header background, there is a white block now. I need to remove my logo as well as the white header so that the page background can be seen. My logo is already designed in the page background. All I want is the white middel block.
Can you please, please help with this?

Reply

Adrian Nethercott July 26, 2012 at 6:07 am

It’s hard to help without actually looking at your website, but it sounds like you just need to make the background of #header transparent. Look for a
“background: white” or “background: #fff” in the #header section and remove it.

Reply

Janeske July 26, 2012 at 6:35 am

Thank you for the prompt reply.
My website is http://www.bedight.co.za
I want to remove the logo as well as the white block (header)

Reply

Adrian Nethercott July 26, 2012 at 7:20 am

Remove background: white from #page in global.css and remove the logo.jpg line from header.tpl.

Reply

Janeske July 26, 2012 at 7:25 am

Thanks. I’ve tried to remove the background: white from #page in global.css but then my left, centre and right columns are see through (no back ground) and I need them to be white :-(

Adrian Nethercott July 26, 2012 at 7:40 am

Then add “background: white” to #left_column, #center_column, #right_column and #footer so the background of everything but the header is white.

Reply

Janeske July 26, 2012 at 7:56 am

nope….the whole centre (with left, centre & right) should be one white block…(feels like a lost case)

Adrian Nethercott July 26, 2012 at 7:59 am

Unfortunately, I can’t help you here in the comment section. You need professional help.

Reply

Fred June 11, 2012 at 5:33 am

Thanks for being a great resource for the community.

Can you explain exactly what is considered a ‘core change’? I could not find any information on this in PrestaShop.

Thanks so very much.

Reply

Adrian Nethercott June 11, 2012 at 6:46 am

Hi Fred,

Modifying any file outside of the override or themes directory is considered a ‘core change’. You can copy the default PrestaShop theme to a separate directory and modify it there, but if you modify the default PrestaShop theme, that would be considered a ‘core change’ as well.

Adrian

Reply

William Scott May 31, 2012 at 1:13 am

Hi, Adrian Nethercott

I was designing a theme for prestashop v1.4.7 and before I could finish it they have released v1.4.8 . Now I want to update my design to the new version.

I have made some modifications to the global.css and some module css files. I have also made some modifications to the tpl files of some modues. I have just made modification in the default id and class names of the css files without changing it to a different name. Will it loose all changes when I update to the new theme? Please tell me what files will be affected and what is the best practice for css modifications.

I have also made changes to some .tpl files, now if I place the modified .tpl files into the themes folder as you have mentioned in the article, will it override automatically or should I make changes in the corresponding php file and direct it to the modified .tpl files. Please explain, Thanks.

Reply

Fred May 26, 2012 at 6:29 am

Thanks to a great community and articles like this. We were able to accomplish this. (one class override)

http://www.etiendas.co/en/etiendas-prestashop-modules/27-prestashop-multishop-mulltidomain.html

Reply

mark May 9, 2012 at 3:43 am

Hi,

since I have many languages in my prestashop, I want every language index to have them in their own directory like eg. for english : http://www.mysite.com/stockmarket / for dutch: http://www.mysite.com/beurs

how can it made so that every langage has it’s own keyword related index directory

Reply

Fred April 24, 2012 at 4:52 am

When creating the (lang).php module translate files in our modules, what is the best way to create them?

Do we create the translations from our back off from the base .tpl and export them and then put in our module pack? Thanks so very much for your time and sharing.

Reply

Adrian Nethercott April 24, 2012 at 5:37 am

Go to the Tools > Translations > Module translations, click the French flag, for example, then find your module and enter the translations, and click Save. PrestaShop should then generate fr.php file in your module’s directory on your server. Simply download fr.php off your server and include it in your module’s zip file. Do the same for every other language you want to be translated.

Reply

Fred April 24, 2012 at 5:43 am

Thank you!…finally this is answered as I could not figure out how to generate the key proceeding the ‘other’ translations. You rock for sharing!

Reply

Adrian Nethercott April 24, 2012 at 5:57 am

Glad I could help. It’s easy to overcomplicate things and miss the simple solution.

Reply

sidekah April 19, 2012 at 7:24 am

same problem as Hamouda

So, If I’m having bi-lingual website (Arabic & English). And the Arabic theme layout need to be right to left aligned. Then which files should be modified? and how?

Reply

Adrian Nethercott April 19, 2012 at 9:22 pm

If you are using PrestaShop v1.4.3 or later, you should simply be able to go to the Tools > Languages tab, edit the “Arabic” language and enable the “Is RTL language?” option. In earlier version, it will be much more difficult, since you’d have to modify a lot of code yourself.

Reply

Fred April 7, 2012 at 8:35 am

What is best practice during module installation when an override already exists?

Now if an existing override exists I back it up in place by adding module suffixing (allows me to uninstall/disable module). I then append my new override code to the existing override. This has obvious pitfalls. Is it possible to override a class, for example Configuration.php without having the same php file name?

I’ve learned more reading your ps posts and guides than anywhere else. Thanks you.

Reply

Adrian Nethercott April 7, 2012 at 8:53 am

You can’t override the same class more than once, since that would create two classes with the same name, and PHP doesn’t allow that. You need to merge the code in the two files. For example, if one file overrides the process() function and the other overrides the postProcess() function, then you’ll need to create a single class with both the process() and postProcess() functions in it. If the two files override the same function, then things get more difficult. You will need to create a single function and merge the contents of the two functions together, making sure that the parent function is only called once.

Reply

prestaZ March 17, 2012 at 3:37 am

Hello Adrian,
I am trying to override the CSS file of top horizontal menu (blocktopmenu), but it is not working. What I did so far was
1. Copy the module blocktopmenu from prestashop/modules to themes/mytheme/modules, then edit the CSS file -> no success.
2. Copy only the CSS file superfish-modified.css from prestashop/css/modules/blocktopmenu to themes/mytheme/css/blocktopmenu -> no success.
It seems that only the CSS file under the root directory is being loaded. Do you have any idea what is missing?

Reply

Adrian Nethercott March 17, 2012 at 4:07 am

Unfortunately, you can’t override CSS files like you can TPL files. You should override the TPL file that links to the CSS file, then change the link to a CSS file in the theme’s directory.

Reply

prestaZ March 17, 2012 at 7:48 am

Adrian, thanks a lot for quick reply.
So, I copied blocktopmenu.tpl from prestashop/modules/blocktopmenu to themes/mytheme/modules/blocktopmenu and changed the code there to:

 

The name of modified CSS file changed to superfish-modified1.css – correct?
Then, copied superfish-modified.css from prestashop/modules/blocktopmenu to themes/mytheme/css/blocktopmenu – right? – and renamed it to superfish-modified1.css. Should it work now? I will try again, but I think it did not work…

Reply

Adrian Nethercott March 17, 2012 at 8:04 am

No, that won’t work. You need to add a line like the following to themes/mytheme/modules/blocktopmenu/blocktopmenu.tpl:

<link href=”{$css_dir}modules/blocktopmenu/superfish-modified.css” rel=”stylesheet” type=”text/css” />
Then rename superfish-modified1.css to superfish-modified.css.

Reply

prestaZ April 23, 2012 at 10:30 pm

This worked perfectly! Thanks a lot for your help!!

Rohan Sehgal February 20, 2012 at 12:14 am

Very nice and informative article Adrian.

Its very helpful for both old and new Prestashop developers. Hope more knowledge will be shared by you in future :-)

Thanks
Rohan Sehgal

Reply

Adrian Nethercott February 20, 2012 at 12:35 am

Thanks. There are more articles on the way that I hope you’ll find useful. Keep an eye out on this website.

Reply

Sau Han August 31, 2011 at 5:15 am

Hi Adrian,

In follow-up of Hamouda’s language issue, I was wondering, do you know a way to change an image when you select another language? In my webshop I have an image on the homepage with text in Dutch. I like to change the image to another image with English text when the user changes it’s language.

I’m just in the midst of upgrading my 1.3.6 to 1.4.4.0.

Thanks in advance!

Kind regards, Sau Han

Reply

Adrian Nethercott September 6, 2011 at 7:35 pm

PrestaShop already does this with its “On Sale” image. You can see how it is done on line 247 (in PrestaShop v1.4.4) of product.tpl in your theme’s directory:

<img src="{$img_dir}onsale_{$lang_iso}.gif" alt="{l s=’On sale’}" class="on_sale_img"/>

The English-language image is themes/prestashop/img/onsale_en.gif, the French-language image is themes/prestashop/img/onsale_fr.gif, etc. You can do the same thing with your language-specific images.

Reply

Sau Han September 9, 2011 at 7:24 am

I didn’t notice before that the on_sale image actually holds the solution (I deleted that image in my theme). Thanks for your advice, you saved me a lot of time!

Reply

Erik May 21, 2012 at 6:00 am

Thanks a lot. I really needed this one. Love when things turn out to be this easy. I copied editorial.tpl to: my_theme/modules/editorial and overwrote:

getMediaLink($image_path)}”

with your solution:

<img src="{$img_dir}homepage_logo_{$lang_iso}.jpg"

Then I placed the images in my themes image directory and renamed them: hompage_logo_en.jpg, homepage_logo_es.jpg etc. Worked at fist hit, cheers.

Reply

jose August 11, 2011 at 12:20 am

i will do that and let you know thank you for your help

Reply

Adrian Nethercott August 10, 2011 at 9:17 pm

It is probably a permissions problem. I suggest using an FTP client like Filezilla to recursively change all your directories to chmod 755 and all your files to chmod 644.

Reply

jose August 10, 2011 at 3:44 pm

hello adrian i just installed prestashop successfully my back office is working just fine but when i pull my front office up i get a http error 500 i know it might be a permissions error but dont know where to begin can you help me out

Reply

Adrian Nethercott August 1, 2011 at 9:59 pm

1. No, they cannot. You can only override controllers in the override/controllers directory and override module TPL files in the themes directory. Overrides cannot be executed from within a module’s directory. In my modules, I provide instructions telling the customer to copy the overrides from my module’s directory to their override directory, merging files if necessary.

2. Sure, you can move hooks to different places in different themes, but you can’t change which modules are in which hooks for different themes. For example, you could edit header.tpl and footer.tpl in your theme’s directory and switch {$HOOK_LEFT_COLUMN} and {$HOOK_RIGHT_COLUMN} to have the right column blocks on the left and the left column blocks on the right. You can also put {if $page_name == ‘order’ OR $page_name == ‘order-opc’ OR $page_name == ‘submit’ OR $page_name == ‘confirm’ OR $page_name == ‘order-confirmation’} {/if} around something to display it on order pages only, or change all those == to != to not display something on order pages.

Reply

bogdan August 1, 2011 at 1:22 pm

Can controllers and/or module php file be overriden in a specific template? (e.g. creating a /modules/modulex/override/controllers/controller_x.php file)

Moreover, is there any practice for having template-based hook order?
(in template 1, show the cart in the left, if changing to template 2 show the cart in the right side)

TIA

Reply

Adrian Nethercott July 22, 2011 at 10:43 pm

You can simply use the body.ar prefix to combine both the Arabic and English CSS in the same global.css file. But if you really want them separate, you can override the setMedia() function in classes/FrontController.php and add a language-specific CSS file. For example, create override/classes/FrontController.php with the following:

<?php

class FrontController extends FrontControllerCore
{
    public function setMedia()
    {
        global $cookie;
        parent::setMedia();
        Tools::addCSS(_THEME_CSS_DIR_.’global’.(int)$cookie->id_lang.’.css’);
    }
}

?>

You should then have global.css with all the non-language specific CSS, global1.css for all the English-specific CSS, global2.css for all the Arabic-specific CSS (assuming it’s language ID is 2), etc.

Reply

Hamouda July 19, 2011 at 11:03 pm

Thank you very much Adrian for your advise.

Actually it’s more complicated that that. You will need to add other css styles like texh-align and float in some areas to make it work properly.

So, what I was thinking is to have another globals.css file. For example to have globals_en.css & globals_ar.css and switch between them whenever the language is selected. maybe i will need to have two versions from other css files as well.

So, what do you think about this idea? and how to enable this css switcher?

appreciate your help.

Reply

Adrian Nethercott August 10, 2011 at 10:30 pm

Hi Hamouda,

Just letting you know that PrestaShop v1.4.4 has right-to-left language support, so this modification is no longer necessary. You can now simply go to Tools > Languages, edit a language, and tick “Is RTL language”. The file themes//css/rtl.css will then be included when that language is selected.

Adrian

Reply

Adrian Nethercott July 19, 2011 at 10:22 pm

@Hamouda

That’s tricky to do, since PrestaShop doesn’t distinguish between languages in its CSS. I suggest modifying header.tpl and adding code so that you can distinguish between languages in your CSS.

For example, change line 63 (in PrestaShop v1.4.3) of header.tpl in your theme’s directory from:

to:

Then you can add extra rules to your CSS to make text right-to-left just for the arabic language. For example:

body.ar { direction: rtl }

I haven’t tested this, but it should hopefully make the text right-to-left for Arabic and left-to-right for all other languages.

@PurpleEdge

PrestaShop v1.5.0.0 has already been released on the Downloads section of the PrestaShop website, though it’s an alpha, so it’s just a preview and it’s not ready for production use.

It has a new “Multiple stores” feature that lets you manage multiple PrestaShop stores from a single Back Office. It also has a new security feature that redirects all requests through a single dispatcher file. Or in simpler terms, all requests go through index.php instead of contact-form.php, cms.php, etc.

I’ve heard that v1.5 might also let you edit orders, but I don’t know for sure. The PrestaShop team doesn’t like to promise features until they are actually working on them.

Reply

Adrian Nethercott July 19, 2011 at 10:29 pm

@Hamouda

Seems WordPress doesn’t display HTML code. I’ll try again using HTML entities:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

to:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{$lang_iso}">

Reply

PurpleEdge July 19, 2011 at 6:04 pm

Thanks Adrian, I’m just getting to know PS and I find your articles very helpful. I was lucky enough to come in after 1.4 was launched, so I don’t have to unlearn these bad habits. Do you know what 1.5 has in store for us? (No pun intended!)

Reply

Hamouda July 19, 2011 at 1:49 pm

Very nice post Adrian,

So, If I’m having bi-lingual website (Arabic & English). And the Arabic theme layout need to be right to left aligned. Then which files should be modified? and how?

Thanks.

Reply

Adrian Nethercott July 26, 2012 at 7:34 am

Then add background: white to #left_column, #center_column, #right_column and #footer to make the background of everything but the header white.

Reply

Leave a Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Previous post:

Next post: