Displaying the EAN/JAN barcode in PrestaShop’s product page

In this tutorial we will learn how to display the EAN13 or JAN barcode field in product pages in PrestaShop.

* You can apply the same process to the UPC barcode, if that is the one you need, just by changing every occurrence of ean13 to upc

1 – Amending the product.tpl file

The first, obvious step is to modify the product page template. If you are not using Attribute Combinations, this is actually the only step you need to complete!

Therefore, open up your theme’s product.tpl, and decide where you want to add the field. Above or below the reference (or instead of it) might be a good spot.

[php htmlscript=”true”]
<p id="product_ean13"{if empty($product->ean13) || !$product->ean13} style="display: none;"{/if}>
<label>{l s=’Ean13:’} </label>
<span {if !empty($product->ean13) && $product->ean13} content="{$product->ean13}"{/if}>{$product->ean13|escape:’html’:’UTF-8′}</span>
</p>
[/php]

Save and refresh to see the field pop up where you placed it. As mentioned above, if you are not using product combinations, you can stop here. Otherwise, there are a couple of other modifications you need to do.

2 – Getting the new field for combinations

In order to display the proper ean when changing attributes, having each combination its own, we need to ensure the field is assigned to the javascript that handles the page update on select. Sadly, PrestaShop only grabs a limited number of fields with the default combinations query, and we therefore need to override/modify both the Product class and controller.

Extending the Product Plass in PrestaShop

Create a new file named Product.php inside override/classes, that will serve as Product class override. Begin by writing some standard override code:

[php]
class Product extends ProductCore
{

}
[/php]

We want to extend the getAttributesGroups method. Mine, grabbed from a clean 1.6.1.2 version, looks like this:

[php]
public function getAttributesGroups($id_lang)
{
if (!Combination::isFeatureActive()) {
return array();
}
$sql = ‘SELECT ag.`id_attribute_group`, ag.`is_color_group`, agl.`name` AS group_name, agl.`public_name` AS public_group_name,
a.`id_attribute`, al.`name` AS attribute_name, a.`color` AS attribute_color, product_attribute_shop.`id_product_attribute`,
IFNULL(stock.quantity, 0) as quantity, product_attribute_shop.`price`, product_attribute_shop.`ecotax`, product_attribute_shop.`weight`,
product_attribute_shop.`default_on`, pa.`reference`, product_attribute_shop.`unit_price_impact`,
product_attribute_shop.`minimal_quantity`, product_attribute_shop.`available_date`, ag.`group_type`
FROM `’._DB_PREFIX_.’product_attribute` pa
‘.Shop::addSqlAssociation(‘product_attribute’, ‘pa’).’
‘.Product::sqlStock(‘pa’, ‘pa’).’
LEFT JOIN `’._DB_PREFIX_.’product_attribute_combination` pac ON (pac.`id_product_attribute` = pa.`id_product_attribute`)
LEFT JOIN `’._DB_PREFIX_.’attribute` a ON (a.`id_attribute` = pac.`id_attribute`)
LEFT JOIN `’._DB_PREFIX_.’attribute_group` ag ON (ag.`id_attribute_group` = a.`id_attribute_group`)
LEFT JOIN `’._DB_PREFIX_.’attribute_lang` al ON (a.`id_attribute` = al.`id_attribute`)
LEFT JOIN `’._DB_PREFIX_.’attribute_group_lang` agl ON (ag.`id_attribute_group` = agl.`id_attribute_group`)
‘.Shop::addSqlAssociation(‘attribute’, ‘a’).’
WHERE pa.`id_product` = ‘.(int)$this->id.’
AND al.`id_lang` = ‘.(int)$id_lang.’
AND agl.`id_lang` = ‘.(int)$id_lang.’
GROUP BY id_attribute_group, id_product_attribute
ORDER BY ag.`position` ASC, a.`position` ASC, agl.`name` ASC’;
return Db::getInstance()->executeS($sql);
}
[/php]

Copy and paste your own inside the override, then add another column to the SELECT statement, right after ag.`group_type`: , pa.`ean13`

Extending the Product Controller in PrestaShop

Create and initialize a file called ProductController.php inside override/controllers/front.

[php]
class ProductController extends ProductControllerCore
{

}
[/php]

This time we have to copy the whole assignAttributesGroups method, so make sure you really grab yours from the original ProductController.
After pasting it, locate the following snippet

[php]
$combinations[$row[‘id_product_attribute’]][‘reference’] = $row[‘reference’];
[/php]

Right after it, add

[php]
$combinations[$row[‘id_product_attribute’]][‘ean13’] = $row[‘ean13’];
[/php]

Save, then reach cache/ and erase the class_index.php file, so that the overrides take place

Step 3 – displaying the EAN 13 field with Javascript

So far, so good. The very last thing we need to do it modifying product.js, located inside the theme folder, /js/, in order for the field to be displayed for the current combination, and to change when selecting attributes. Make sure the combinations you select have the field filled in; otherwise you might get misleading results.

The first block of code to locate is the following, around line 93 in PrestaShop 1.6.1.2:

[js]
combinationsJS[k][‘reference’] = combinations[i][‘reference’];
[/js]

I am sure you can already bet what we need to add:

[js]
combinationsJS[k][‘ean13’] = combinations[i][‘ean13’];
[/js]

Then, around line 427

[js]
selectedCombination[‘reference’] = combinations[combination][‘reference’];
// add the following
selectedCombination[‘ean13’] = combinations[combination][‘ean13’];
[/js]

Lastly, the very code that acts on the switch:

[js]
if (selectedCombination[‘reference’] || productReference)
{
if (selectedCombination[‘reference’])
$(‘#product_reference span’).text(selectedCombination[‘reference’]);
else if (productReference)
$(‘#product_reference span’).text(productReference);
$(‘#product_reference:hidden’).show(‘slow’);
}
else
$(‘#product_reference:visible’).hide(‘slow’);
[/js]

Right after, add

[js]
if (selectedCombination[‘ean13’] || productean13)
{
if (selectedCombination[‘ean13’])
$(‘#product_ean13 span’).text(selectedCombination[‘ean13’]);
else if (productean13)
$(‘#product_ean13 span’).text(productean13);
$(‘#product_ean13:hidden’).show(‘slow’);
}
else
$(‘#product_reference:visible’).hide(‘slow’);
[/js]

We do not obviously have that productean13 variable. That needs to be added to product.tpl. So, back to it, locate

[php htmlscript=”true”]
{addJsDef productReference=$product->reference|escape:’html’:’UTF-8′}
[/php]

And add

[php htmlscript=”true”]
{addJsDef productean13=$product->ean13|escape:’html’:’UTF-8′}
[/php]

Right after that.

Save and refresh, we are done!

Looking for quality PrestaShop hosting? Check out Arvixe Web Solutions.

Tags: , , , , | Posted under PrestaShop, Uncategorized | RSS 2.0

Author Spotlight

Fabio Porta

Fabio has been involved in web development and design since 2005, when launched his first website at the age of 16. He’s now highly skilled in both client and server side development, along with design, and since August 2012 runs a successful website about PrestaShop tutorials and Prestashop Modules called Nemo’s Post Scriptum, at http://nemops.com

Leave a Reply

Your email address will not be published. Required fields are marked *