Inserting the SKU Underneath the short description

[Norbert2]

Hi There,

Could someone please tell me how to insert the SKU/Reference number underneath the short description on the product page?
I would like to insert the reference number between the colour and the quantity of items, or even above where it says the colour (please see screenshot).

I have seen lots of posts on this, but most of them date back to between 2010-2020. 

I am currently using the latest prestashop 8.2 and the classic theme with CSS altered.

It would be great if someone would have an easy solution to this.

Thanks.

Norbert

Edited Saturday at 07:30 PM by Norbert2
Added extra info. (see edit history)

[ComGrafPL]

Not sure if it work on 8.2:

product.tpl

<div class="product-short-description">
    {if isset($product.description_short)}
        {$product.description_short nofilter}
    {/if}
</div>

add below:

<div class="product-reference">
    {if $product.reference}
        <strong>{l s='Reference'}:</strong> {$product.reference}
    {/if}
</div>

 

[Norbert2]

3 hours ago, ComGrafPL said:

Not sure if it work on 8.2:

product.tpl

<div class="product-short-description">
    {if isset($product.description_short)}
        {$product.description_short nofilter}
    {/if}
</div>

add below:

<div class="product-reference">
    {if $product.reference}
        <strong>{l s='Reference'}:</strong> {$product.reference}
    {/if}
</div>

 

Thanks for getting back to me. Yes, it still works, however, I have variations to my product and the SKU stays static on the first one. So when someone changes the product from the drop down, the SKU doesn't change. I am not sure if you know how to make it dynamic? Obviously the product details tab uses .json to make the SKU changes dynamic. Obviously it changes there, but not underneath the short description.

[ComGrafPL]

What if:

<div id="product-reference">
    {% if product.reference %}
        <strong>{{ 'Reference'|trans }}:</strong> <span id="dynamic-sku">{{ product.reference }}</span>
    {% endif %}
</div>

 

[Norbert2]

5 hours ago, ComGrafPL said:

What if:

<div id="product-reference">
    {% if product.reference %}
        <strong>{{ 'Reference'|trans }}:</strong> <span id="dynamic-sku">{{ product.reference }}</span>
    {% endif %}
</div>

 

Thanks you again. I tried it, unfortunately, it brings up a HTTP 500 error. I tried placing it in different areas of the file, however, everytime you want to visit the product page, it shows an error. It's obviously not a necessity, however, it does help my customers locate the SKU easier when they contact us, rather than hidden in the Product Details tab.

[ps8modules]

9 hours ago, ComGrafPL said:

What if:

<div id="product-reference">
    {% if product.reference %}
        <strong>{{ 'Reference'|trans }}:</strong> <span id="dynamic-sku">{{ product.reference }}</span>
    {% endif %}
</div>

 

Hi @ComGrafPL

It is not possible to put twig code in tpl.

Hi @Norbert2

In order to load the SKU or EAN code, javascript is also needed and possibly a module and a hook.

There is already a ready-made module for what you require, which allows you to display SKUs and EANs, including attributes 😉

[ComGrafPL]

I was thinking to use it on /assets/js/custom.js

document.addEventListener('DOMContentLoaded', function () {
    const skuElement = document.getElementById('dynamic-sku');

    // Listen for attribute changes (e.g., dropdown, color, size changes)
    prestashop.on('updatedProduct', function (event) {
        if (event && event.product) {
            const newReference = event.product.reference;
            if (skuElement && newReference) {
                skuElement.textContent = newReference;
            }
        }
    });
});

 

[Norbert2]

42 minutes ago, ps8modules said:

Hi @ComGrafPL

It is not possible to put twig code in tpl.

Hi @Norbert2

In order to load the SKU or EAN code, javascript is also needed and possibly a module and a hook.

There is already a ready-made module for what you require, which allows you to display SKUs and EANs, including attributes 😉

Hi @ps8modules

I had a hunch that might be the case i.e. that I will need some sort of a javascript. Could you please let me know what the name of that module is, that you are referring to?

Edited yesterday at 07:22 PM by Norbert2 (see edit history)

[ps8modules]

Add product reference SKU, or EAN 13 anywhere on the product page

 

Edited 14 hours ago by ps8modules
added images (see edit history)

[Norbert2]

13 hours ago, ps8modules said:

Add product reference SKU, or EAN 13 anywhere on the product page

 

@ps8modules Thanks for letting me know. I will check it out and purchase as soon as I have finalised a few other modules.