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!

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Myselfidem

    Thank you very much Nemo about this tip !

    However it seems to me there are some errors on product.js file :

    Here is mine working fine on PrestaShop 1.6.1.6 :

    selectedCombination[‘reference’] = combination[‘reference’]; //changed
    // add the following
    selectedCombination[‘ean13′] = combination[‘ean13′]; //changed

    ———————————————————

    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_ean13:visible’).hide(‘slow’); //changed

    ——————————————————————–
    Many thanks for your good work and keep it.
    Friendly

    • s3vddl

      How did you get this working. My ean code is still the same after i switch my variations :/

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: