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.
<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>
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:
class Product extends ProductCore
{
}
We want to extend the getAttributesGroups method. Mine, grabbed from a clean 1.6.1.2 version, looks like this:
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);
}
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.
class ProductController extends ProductControllerCore
{
}
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
$combinations[$row['id_product_attribute']]['reference'] = $row['reference'];
Right after it, add
$combinations[$row['id_product_attribute']]['ean13'] = $row['ean13'];
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:
combinationsJS[k]['reference'] = combinations[i]['reference'];
I am sure you can already bet what we need to add:
combinationsJS[k]['ean13'] = combinations[i]['ean13'];
Then, around line 427
selectedCombination['reference'] = combinations[combination]['reference']; // add the following selectedCombination['ean13'] = combinations[combination]['ean13'];
Lastly, the very code that acts on the switch:
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');
Right after, add
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');
We do not obviously have that productean13 variable. That needs to be added to product.tpl. So, back to it, locate
{addJsDef productReference=$product->reference|escape:'html':'UTF-8'}
And add
{addJsDef productean13=$product->ean13|escape:'html':'UTF-8'}
Right after that.
Save and refresh, we are done!
