Can we show product reference (Item Number) in the items list view?

[lepusa]

Currently by default in the item view, the item reference number is shown just below the product description, such as on this page.

 

We would like product reference numbers to appear in the items list view. Can this be done? See these two screen shots from this page for example:

 

 

Edited January 18, 2017 by lepusa (see edit history)

[lepusa]

Hello, anyone? I would think this would be a built in option, but I suppose a hack is needed.

[JeredBolton]

You need to change two files in your theme in order to add the product reference to the list view of products.

 

1. In product-list.tpl at around line 128, add something to display the model reference:

{if $smarty.capture.displayProductListReviews}
    <div class="hook-reviews">
        {hook h='displayProductListReviews' product=$product}
    </div>
{/if}
{* NEW CODE *}
<h6 class="productReference"> 
    {l s='Model'} {$product.reference|escape:'html':'UTF-8'}
</h6>
(* END OF NEW CODE *}
<p class="product-desc" itemprop="description">
    {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</p> 

2. In your theme's js directory you'll find global.js - you need to add a corresponding line to the display function to make the model reference appear in the list view:

function display(view)
{
    if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
        $('.product_list > li').each(function(index, element) {
            var html = '';
            html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
            html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
            // NEW CODE START
            html += '<h6 class="productReference">'+ $(element).find('h6').html() + '</h6>';
            // NEW CODE END
            var hookReviews = $(element).find('.hook-reviews');
            if (hookReviews.length) {
                html += hookReviews.clone().wrap('<div>').parent().html();
            }

Having made the change, clear the smarty cache and you're done.

 

The above assumes that each product has a reference. If some products don't have a reference you may want to add some logic to suppress the model field when it's empty.

Edited January 19, 2017 by JeredBolton (see edit history)

[lepusa]

You need to change two files in your theme in order to add the product reference to the list view of products.

 

1. In product-list.tpl at around line 128, add something to display the model reference:

{if $smarty.capture.displayProductListReviews}
    <div class="hook-reviews">
        {hook h='displayProductListReviews' product=$product}
    </div>
{/if}
{* NEW CODE *}
<h6 class="productReference"> 
    {l s='Model'} {$product.reference|escape:'html':'UTF-8'}
</h6>
(* END OF NEW CODE *}
<p class="product-desc" itemprop="description">
    {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</p> 

2. In your theme's js directory you'll find global.js - you need to add a corresponding line to the display function to make the model reference appear in the list view:

function display(view)
{
    if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
        $('.product_list > li').each(function(index, element) {
            var html = '';
            html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
            html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
            // NEW CODE START
            html += '<h6 class="productReference">'+ $(element).find('h6').html() + '</h6>';
            // NEW CODE END
            var hookReviews = $(element).find('.hook-reviews');
            if (hookReviews.length) {
                html += hookReviews.clone().wrap('<div>').parent().html();
            }

Having made the change, clear the smarty cache and you're done.

 

The above assumes that each product has a reference. If some products don't have a reference you may want to add some logic to suppress the model field when it's empty.

That worked great, thanks!

 

One note, your solution worked only for list view, but adding the code from line 286 of your second example again after the 'else' statement in global.js made the Item Number appear in both list and grid views:

 

else
{
$('ul.product_list').removeClass('list').addClass('grid row');
$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
$('.product_list > li').each(function(index, element) {
html = '';
html += '<div class="product-container">';
html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
html += '<div class="right-block">';
html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
html += '<h6 class="productReference">'+ $(element).find('h6').html() + '</h6>';
var rating = $(element).find('.comments_note').html(); // check : rating
if (rating != null) {
html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
}

See it in action here: https://leadingedgeproducts.com/store/18-fantail-mop-heads

[JeredBolton]

I've just noticed that you must include a corresponding line of code in the else statement, otherwise if the user switches between the grid and list view the new h6 element will become undefined.

 

If you want the item number to show in both the list and grid views, add your extra line to the else statement and you're done.

 

If you want the item number to only show in the list view, you have to hide the element in the grid view:

 

In global.js add the following to the else statement:

html += '<h6 style="display: none" class="productReference">'+ $(element).find('h6').html() + '</h6>';

and in product-list.tpl change the h6 element to:

<h6 style="display: none" class="productReference">

Edited January 20, 2017 by JeredBolton (see edit history)