1. Introduction
For several reasons, you may need to add a new field to the products in your Prestashop store. In this tutorial, we will describe how to do this for 1.5.x and 1.6.x versions of Prestashop that are substantially identical at the architecture level.
It will then be for us to describe how to add a new field to the products of a Prestashop store by respecting the instructions of Prestashop. The expected result is to have the new field available in FO in the product listing and / or on the product page and in BO in the product edition form.
2. Description of the approach
We will begin by describing the expected result. We will add a composition field (in the case of a drink, it is its chemical composition). The field will be present in FO on the product sheet through a composition tab. In BO, the field will be available in the product editing form, it will be translatable and use a WYSWYG because it is a text that can be formatted.
The solution will be:
– Edit the product_lang table by adding the new field
– Overload the Product class to add the new field to the Product object for its native management by Prestashop
– Overload the tpl information.tpl in BO by adding a new block
– Edit the tpl product.tpl of the theme to add the new tab
3. The different steps
3.1. Updating the database
We will start by modifying the Prestashop database, to allow it to host a new field. We will add a composition field, type text, with a SQL script like the one below.
ALTER TABLE `product_lang` ADD` composition` TEXT NOT NULL
3.2. Product class overload
We will not discuss in detail the overload of a Prestashop class. If necessary, you will find on our site, a tutorial specially dedicated to this task.
Overloading the Product class leads to the creation of the /override/classes/Product.php file. It will contain the Product class that inherits from the ProductCore class.
We will define a public property composition and we will add a new entry in the fields subtable of the $ definition static table, as shown below:
<?php
class Product extends ProductCore
{
public $composition;
public static $definition = array(
// ...
'fields' => array(
// ...
'composition' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),
// ...
),
// ...
);
}
NB: We remind you that for the overload of a class or a controller under Prestashop, it is absolutely necessary to update the file cache/class_index.php to take into account the new overloaded files.
3.3. Overloading the information.tpl file
In order to manage the new field in BO, it will be necessary to overload the file /admin/themes/default/template/controllers/products/informations.tpl which is that the display of the tab information in the form for publishing a product in BO. Remember that you should replace admin with the name of your store’s admin directory.
Overloading this file will lead to the creation of the /override/controllers/admin/templates/products/informations.tpl file. This file will have as initial contents that of the original file with in addition the lines below:
<tr>
<td class="col-left">
{include file="controllers/products/multishop/checkbox.tpl" field="composition" type="tinymce" multilang="true"}
<label>{l s='Composition:'}<br /></label>
</td>
<td style="padding-bottom:5px;">
{include file="controllers/products/textarea_lang.tpl" languages=$languages
input_name='composition'
input_value=$product->composition
}
<p class="clear"></p>
</td>
</tr>
3.4. Front Office Display
We just have to display this field in front-office. We chose to do it through a tab. To do this, we will modify the /themes/your_theme/product.tpl file.
<div id="more_info_block" class="clear">
<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
<!-- ... -->
{if $product->composition }
<li>
<a id="more_info_tab_information" href="#idTab13">
{l s='Information'}
</a>
</li>
{/if}
<!-- ... -->
</ul>
<div id="more_info_sheets" class="sheets align_justify">
<!-- ... -->
{if isset($product) && $product->composition }
<div id="idTab13" class="rte">{$product->composition }</div>
{/if}
<!-- ... -->
</div>
This step concludes the addition of the new field to the product page of your shop.
4. Conclusion
The need to make custom developments under Prestashop is well established. And make changes on the product sheet according to the particularities of the products according to the field is very common.
However, it is important to note that these changes must be made according to Prestashop recommendations. The main reason is to ensure that a version update does not overwrite the changes.
We have described in this tutorial, how to add a new field to the product sheet by following the instructions of prestashop. This method can also be applied for other classes (Category, CMS, etc.)
