Thèmes & templates Prestashop - DDLX

Thèmes & templates Prestashop - DDLX:

'via Blog this'

UPGRADE PRESTASHOP THEME FROM 1.3 TO 1.4

There are quite a few steps involved with upgrading a Prestashop 1.3 theme to a 1.4 compatible theme, but it is all possible with a few skills.. and some elbow grease!

Here is a "step by step how to" guide for upgrading a default presta shop 1.3 theme to work with prestashop 1.4.

1 First Steps

Firstly, (do not try this on your live web server!!!). Make sure you have a copy of your 1.3 theme and a copy of the default Prestashop 1.4 theme, open each folder and we are ready to go!

Rename your copied 1.4 theme folder to be your new theme name ie;"mynewtheme". (Make sure it is a different name than your 1.3 theme - well worth saying!)

2 Replace Core Files

From your 1.3 folder, take footer.tpl and place into your "mynewtheme" folder.

Then put your 1.3 global.css file into your "mynewtheme" folder.

Do the same with the images folder, but make sure you MERGE them rather than replace, this will make sure you keep the old and new images in your folder. (If your computer does not merge files then perhaps try using a FTP program to do this).

Your header.tpl file requires some work before we can move over... and this is where it can get tricky. Most commercial 1.3 templates will have adjustments to this file so not everyone will see the same code. Firstly we need to copy and paste everything within the 1.4 < head > < /head > tags of the header.tpl file, into your 1.3 header.tpl file.
The code just below the head tags also needs moving over, an example of this would look like:

(DO NOT COPY THIS CODE, IT IS FOR VISUAL PURPOSES ONLY)
< body {if $page_name}id=”{$page_name|escape:’htmlall’:'UTF-8′}”{/if}>
{if isset($ad) && isset($live_edit)}
{include file=”$tpl_dir./live_edit.tpl”}
{/if}
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
< div id=”restricted-country”>
< p>{l s=’You cannot place a new order from your country.’} < span>{$geolocation_country}< /span>
< /div>
{/if}

There is another excerpt of code in your 1.4 header.tpl file to display the websites logo that is different between 1.3 and 1.4. It looks something like:

(DO NOT COPY THIS CODE, IT IS FOR VISUAL PURPOSES ONLY)
< a id=”header_logo” href=”{$base_dir}” title=”{$shop_name|escape:’htmlall’:'UTF-8′}”>

< /a>

Copy that code over also. Once you have made these changes, move this header.tpl file from your 1.3 folder into your new 1.4 "mynewtheme" folder.

3 The CSS

One big difference between a Prestashop 1.3 theme and 1.3 theme is the CSS. In Prestashop 1.3, all of the main CSS is handled by the global.css file. In a Prestashop 1.4 theme the CSS is divided up into separate CSS files for different modules and aspects of the website. As CSS is a major part of our website displaying correctly, it requires some work to integrate the old CSS with the new theme.

Approach 1 - more effort

The correct approach would be to install the modules you require for your new 1.4 site, and then take the appropriate CSS from your old global.css file and put this directly into the yourinstalledmodule.css file. For example; if you install the BEST SELLERS module, search your old global.css file for all css relating to "Bestsellers" and then put this into the blockbestseller.css file. This will carry your old css styling over to show in your new module. You need to do this with all of the modules so there is a bit of work to do, but its a clean and correct way of upgrading your theme.

Approach 2 - easier method

We recommend you use "Approach 1" above, but if you do not like editing CSS code or are in a hurry... then you can always go and edit each module to update the reference to the CSS file. For example; the NEW PRODUCT MODULE. In this folder you will see a file located under: /modules/blocknewproducts/blocknewproducts.php. Edit the module CSS reference line in the file.

FROM THIS:
Tools::addCSS(($this->_path).’blocknewproducts.css’, ‘all’);

TO BE THIS:
Tools::addCSS(($this->_path).’global.css’);

So what we have done above is to tell the module to go use our old 1.3 global.css file instead of the specific 1.4 module CSS file. It is a bit of a hack to each module file but will work a treat!

4 Test

Now you can go and setup a local copy, or test copy of 1.4 Prestashop and try your new theme out. It is worth nothing that the above approach is aimed at a default 1.3 theme. As most of you will have custom 1.3 themes, you may have other .tpl files within your 1.3 folder. These will all require bringing over into the 1.4 theme folder for your site to function the same as before. In doing this you may break your new theme due to 1.3 code also requiring updating in those files.

You might also want to check your email templates as well as a few other bits and bobs around the site. Transfer the important information over bit by bit as you test out!

Should you require any further assistance with this process, Amplify provide 1.3 to 1.4 theme upgrades and support assistance. Contact us if you would like Prestashop web development support.

PrestaShop Upgrade 1.3 theme to fit 1.4

Step One

• Take a default prestashop theme for 1.4, this is the one that going to be transformed to your upgraded theme
• Open your folder with your 1.3 theme
• Merge your 1.3 img folder with the 1.4 img folder to keep both old and new pictures to your new template
• Put your old footer.tpl to the 1.4 theme
• Put your old global.css to to new 1.4 template
• header.tpl are mostly changed in premium themes, and it can look different from theme to theme. Your 1.3 header.tpl will not work on the 1.4 version. So therefore you have to change it. Copy and past is the key. Whats between <head> and </head> must be replaced in your old 1.3 header.tpl also what is below </head> has to be changed E.g

<body {if $page_name}id=”{$page_name|escape:’htmlall’:'UTF-8′}”{/if}>
{if isset($ad) && isset($live_edit)}
{include file=”$tpl_dir./live_edit.tpl”}
{/if}
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id=”restricted-country”>
<p>{l s=’You cannot place a new order from your country.’} <span>{$geolocation_country}</span></p>
</div>
{/if}

Also the new header_logo code is different from 1.3 to 1.4. The new code is:

<a id=”header_logo” href=”{$base_dir}” title=”{$shop_name|escape:’htmlall’:'UTF-8′}”>
<img src=”{$img_ps_dir}logo.jpg?{$time}” alt=”{$shop_name|escape:’htmlall’:'UTF-8′}” {if $logo_image_width}width=”{$logo_image_width}”{/if} {if $logo_image_height}height=”{$logo_image_height}” {/if} />
</a>

• Save the new 1.4 theme-folder, name it whatever you want. I suggest now to put the new theme to a 1.4 testsite as it is far from ready.

CSS WORK

First we have to see the structure for the CSS-files, and see the differences between 1.3 and 1.4
In 1.3 all style is managed by global.css. It means that all that you see on your shop included modules are managed by the gloabal.css.
In the new Prestashop 1.4 is the css-files divided. We have global.css who manage most of the general stuff on your site, but we also have css-files that manage your modules and other css-files that manage parts of your shop (see picture of structure)

So what we got here is a lot css files, what use to be in global.css should now be divided in many parts.
I suggest you to install the modules that you need for your shop and then start to editing css code to make it looks nice.
Lets say i install the “New Product Block Module” and when i look in my shop after installed it, it looks like hell. It looks like this cause it not got it style directive from the global.css but insted it got it from blocknewproducts.css in themes/your_new_theme/css/modules/blocknewproducts.css

So basicly what you need to do is to find the css-code for example “blocknewproducts” you have in global.css, cut it from there and paste it to the new directory: i this case: blocknewproducts.css
Like above you have to do with every module that you need in your shop. This is the correct way to do it. Nice and clean

The Easier Way

But if you dont have time/or dont want to edit css code(cut and copy from global.css to new directories) you can do it in an easier way.
You can change the path for what css-file your module is using.
For example the “New Product Block Module” – If we look in the file modules/blocknewproducts/blocknewproducts.php in the third last row we can see:

Tools::addCSS(($this->_path).’blocknewproducts.css’, ‘all’);

You can delete that code and put this code instead:

Tools::addCSS(($this->_path).’global.css’);

global.css

You have to take a look at the global.css for both prestashop 1.3 and 1.4 and compare them. Code can be missing in your old global.css
Example of missing code in your prestashop 1.3 global.css can be this, their might be more missing code i guess, as this is only an example.
In this case it is css code for “one page checkout” Se code below:

#order-opc tfoot p {
margin: 0;
float: left;
width: 85%
}
#order-opc tfoot span {
float: right;
width: 15%;
display: block
}
#order-opc #voucher fieldset {
border: 1px solid #bdc2c9;
padding: 0.7em
}
#order-opc form#voucher fieldset #display_cart_vouchers {
margin-top:5px;
clear:both;
float:left;
}
#order-opc form#voucher fieldset #display_cart_vouchers .voucher_name {
color:#DD2A81;
font-weight:bold;
cursor:pointer;
}
#order-opc form#voucher h4,
#order-opc form#voucher p,
#order-opc form#voucher .button { display: inline }
#order-opc form#voucher h4 {
float: left;
line-height: 1.5em;
margin-right: 6em
}
#order-opc #order_carrier {
clear: both;
margin-top: 1em;
border: 1px solid #bdc2c9;
padding: 0.5em
}
#order-opc #order_carrier h4 {
width: 50%;
display: inline
}
#order-opc #order_carrier img { vertical-align: middle }
#order-opc #order_carrier span { margin: 0 0.2em }

#order-opc #gift_div label, #order #gift_div textarea {
display: block;
width: 100%;
margin: 1em 0
}

Tpl.files

Finally we have the tpl files, your custom theme, all theme by the way have a lots of them.
Hopefully your template provider has not changed code in it, then you don’t need to worry abut this at all.

But if your theme has been changed in the code in some tpl file you have to change it to make it work properly, this guide dont include this issue.