PS1.6 How show the short description on the product list like on the product page.

jcros · July 8, 2014

Hi everybody,

I want on the default theme add the short description on the product list, like the short description on the product page.

I modify the line 96 on the product-list.tpl

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

like this

{$product.description_short}

But this line on the global.js make disappear the short description.

html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';

Hope my explanation are clear

Sorry for my frenchglish !!

Thanks Johan

dioniz · July 8, 2014

Try to change this code in product_list.css:

ul.product_list.grid > li .product-container .product-desc {
    display: none;
}

to display:block;

vekia · July 8, 2014

html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';

Hope my explanation are clear

im affraid that this short snippet can't disable description

what about css styles as Dioniz mentioned?

jcros · July 9, 2014

Hi Dioniz, HI Vekia,

It's OK on the new product page, but on the product-list in a category it's not good.

Link to the New product page

http://jppfrance.fr/

Linkt to 1 category

http://jppfrance.fr/12-amenagement-interieur

In the source page the element product-desc is empty

<p class="product-desc"></p>

In the global.js

this code returns empty

$(element).find('.product-desc').html()

However, the element contains this html :

<div class="product-container" itemscope="" itemtype="http://schema.org/Product">
  <div class="left-block">
    <div class="product-image-container">
      <a class="product_img_link" href="http://jppfrance.fr/amenagement-interieur/1-chaise-salsa.html" title="Chaise SALSA" itemprop="url">
        <img class="replace-2x img-responsive" src="http://jppfrance.fr/1-home_default/chaise-salsa.jpg" alt="Chaise SALSA M4 non-assemblable coloris champagne" title="Chaise SALSA M4 non-assemblable coloris champagne" width="270" height="270" itemprop="image">
      </a>
      <a class="quick-view" href="http://jppfrance.fr/amenagement-interieur/1-chaise-salsa.html" rel="http://jppfrance.fr/amenagement-interieur/1-chaise-salsa.html">
        <span>Aperçu rapide</span>
      </a>										      <div class="content_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
        <span itemprop="price" class="price product-price">23,77 € HT</span>
        <meta itemprop="priceCurrency" content="1">
      </div>
    </div>
  </div>
  <div class="right-block">
    <h5 itemprop="name"><a class="product-name" href="http://jppfrance.fr/amenagement-interieur/1-chaise-salsa.html" title="Chaise SALSA" itemprop="url">Chaise SALSA</a>
    </h5>
    <p class="product-desc" itemprop="description"></p>
    <p>Chaise SALSA réalisée en polypropylène monobloc pur teinté dans la masse, empilable, utilisation intérieure ou extérieure.</p>
    <p></p>
    <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" class="content_price"><span itemprop="price" class="price product-price">23,77 € HT</span>
      <meta itemprop="priceCurrency" content="1">
    </div>
    <div class="button-container">
      <a class="button ajax_add_to_cart_button btn btn-default" href="http://jppfrance.fr/panier?add=1&id_product=1&token=0aa772c658648edca2113140413dbed3" rel="nofollow" title="Ajouter au panier" data-id-product="1">
        <span>Ajouter au panier</span>
      </a>
      <a itemprop="url" class="button lnk_view btn btn-default" href="http://jppfrance.fr/amenagement-interieur/1-chaise-salsa.html" title="Afficher"><span>Détails</span></a>
    </div>										    <div class="color-list-container"> </div>
    <div class="product-flags"></div>
  </div>
  <div class="functional-buttons clearfix"></div>
</div>
<!-- .product-container> -->

The short description is shifted out the element product-desc.

<p class="product-desc" itemprop="description"></p>
    <p>Chaise SALSA réalisée en polypropylène monobloc pur teinté dans la masse, empilable, utilisation intérieure ou extérieure.</p>
    <p></p>

I don't inderstand why :/

I rollback my modification on produc-list.tpl and the produc-list.css, i will add some picture today.

Edited July 9, 2014 by jcros (see edit history)

NemoPS · July 9, 2014

Yes, because you have nested p tags, you have to remove those from the short description wrapper

jcros · July 9, 2014

Hi Nemo1, thanks for you reply

I want to keep the format (bold, italic), that's why i remove strip_tag on the short description.

i will test to change the p tag in the template to another tag or maybe you have an idea ?

Thanks Johan

NemoPS · July 9, 2014

Change this

to a div

jcros · July 9, 2014

It works very fine, i change the p tag to a div tag

10roses · September 16, 2014

Hello there

I stuck with this, I 've followed the topic but I can't get it to work (I'm using ps 1.6 wit a copy of the default theme),

I'm not able to change the p tag to a div tag, I do edit the product-list.tpl file but it keeps displaying a <p>, I've also claeared cache

If I edit the line {$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'} it shows but not the p tag

Could anyone help me with this

thanks a lot in advance

product list page link: http://www.lacompatibile.es/es/6-capsulas-compatibles-nespresso

single product page link: http://www.lacompatibile.es/es/home/8-capsula-nespresso-fortissimo.html

x

vekia · September 16, 2014

can you please show us how your modified code looks like ?

NemoPS · September 17, 2014

Actually, I can see it's applied to #short_description_content

bastien80 · September 18, 2014

Hello, I want to achieve a similar thing as JCROS

I want that in the product list, the short description show a table with 5 columns and 6 rows

However, in fron office it shows, non formated and incomplete

http://www.kleplus.fr/16-plips-pour-peugeot

I tried also to transform into an image and use it in the shortdescription but the image will not show in the product list short description.

Could you help me?

I copy below the code of the product list tpl, many thanks in advance

{if isset($products) && $products}

{*define numbers of product per line in other page for desktop*}

{if $page_name !='index' && $page_name !='product'}

{assign var='nbItemsPerLine' value=3}

{assign var='nbItemsPerLineTablet' value=2}

{assign var='nbItemsPerLineMobile' value=3}

{else}

{assign var='nbItemsPerLine' value=4}

{assign var='nbItemsPerLineTablet' value=3}

{assign var='nbItemsPerLineMobile' value=2}

{/if}

{*define numbers of product per line in other page for tablet*}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}

<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list list row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">

{foreach from=$products item=product name=products}

{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}

{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}

{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}

{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

</a>

{if isset($quick_view) && $quick_view}

<span>{l s='Quick view'}</span>

</a>

{/if}

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}

</span>

{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction}

{displayWtPrice p=$product.price_without_reduction}

</span>

{if $product.specific_prices.reduction_type == 'percentage'}

<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>

{/if}

</div>

{/if}

{if isset($product.new) && $product.new == 1}

</span>

{/if}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

</span>

{/if}

</div>

{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}

{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}

</a>

</h5>

{hook h='displayProductListReviews' product=$product}

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

</p>

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}

</span>

{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction}

{displayWtPrice p=$product.price_without_reduction}

</span>

{if $product.specific_prices.reduction_type == 'percentage'}

<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>

{/if}

</div>

{/if}

{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

{if ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<a class="btn btn-default green" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

</a>

{else}

<a class="btn btn-default green" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">

</a>

{/if}

{else}

</span>

{/if}

</a>

</div>

{if isset($product.color_list)}

<div class="color-list-container">{$product.color_list} </div>

{/if}

{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.online_only) && $product.online_only}

<span class="online_only">{l s='Online only'}</span>

{/if}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

<span class="discount">{l s='Reduced price!'}</span>

{/if}

</div>

{if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}

{if ($product.allow_oosp || $product.quantity > 0)}

</span>

{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}

</span>

{else}

</span>

{/if}

</span>

{/if}

</div>

{if $page_name != 'index'}

{hook h='displayProductListFunctionalButtons' product=$product}

{if isset($comparator_max_item) && $comparator_max_item}

<a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">{l s='Add to Compare'}</a>

</div>

{/if}

</div>

{/if}

</div>

</li>

{/foreach}

</ul>

{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}

{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}

{addJsDef comparator_max_item=$comparator_max_item}

{addJsDef comparedProductsIds=$compared_products}

{/if}

Edited September 18, 2014 by bastien80 (see edit history)

stevent · October 4, 2014

Hello Bastin 80, I see on your site that you arrive to do bold, italics and paragrafs in the short desc in the product list.

Can you please tell me what was your solution??

I tried all what we see on the forums but no way

http://www.arthostechnics.com/catalogue/fr/12-nos-produits

Thank you !

NemoPS · October 6, 2014

It should be enough to get rid of strip tags here

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

</p>

product-list.tpl

10roses · October 6, 2014

as a matter of fact I could not solve it in time so I ended up using another theme

jcros · October 6, 2014

Hi all,

That's the code i change in product_list.php file to show short description, if it can help



<div class="product-desc" itemprop="description">

{$product.description_short}

</div>

stevent · October 6, 2014

It should be enough to get rid of strip tags here

<p class="product-desc" itemprop="description">

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

</p>

product-list.tpl

Hi all,

That's the code i change in product_list.php file to show short description, if it can help
<div class="product-desc" itemprop="description">
{$product.description_short}
</div>

Thanks every body for answer. The winner is JCROS

Just for info NEMO1 , when I do what you propose, the description is just deleted

Best regards..

Katanai · July 2, 2016

<div class="product-desc" itemprop="description">
{$product.description_short}
</div>

Did this changes in product-list.tpl

But short description dissapear when I switch :

grid view -> list view -> grid view -> list view

I have short discription only in list view..

I did this in global.js...

for list view

html += '<div class="product-desc">'+ $(element).find('.product-desc').html() + '</div>';
/*html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';*/

for grid view

html += '<div itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</div>';
/*html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';*/

Now it works... I hope... Just ask - is everything OK? thx

NemoPS · July 4, 2016

Katanai,
Yes, you need to add that as well

lovemyseo · May 26, 2017

Katanai,

Yes, you need to add that as well

All done but unable to display bullets on products listing page any clue for PS 1.6.1.11?

PS1.6 How show the short description on the product list like on the product page.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites