Display original price on sale item - product-list.tpl

[andusbeckus]

Hi,

On the product.tpl page the original price of a sale item is shown and crossed out but it is not on the product-list.tpl page.

Can someone help me show the original price where it says "Price Lowered". Everything I have tried hasn't work so I'm really stuck.

Here is the code for product-list.tpl

>{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}


getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />


{$product.name|escape:'htmlall':'UTF-8'|truncate:75:'...'}


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


               {if $product.on_sale}
{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product.reduction_from))}
{l s='Price lowered!'}
               {/if}

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


               {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='Add to cart'}
               {else}
{l s='Add to cart'}
               {/if}
{l s='View'}



   {/foreach}
</ul>
<br>   <!-- /Products list --><br

Thank You

[marjanbajc]

I would like to know also. This should be the default setting in PS.

[Martin89]

agree, i would like also to use this on the product-list.tpl

[cammo]

Also keen to know?

[AKJV]

Add this code to product-list.tpl to display the original price:

{convertPrice price=$product.price_without_reduction}

This works for me.

[cammo]

Thanks AKJV,

I used this combined with an IF statement so it only shows if the item is on sale.

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{convertPrice price=$product.price_without_reduction}{/if}

Haven't thoroughly tested it yet, but it's working at first glance.

[AKJV]

Ah yes, I forgot to add the conditional statement in my reply, sorry for that!
Mine is a bit extended as you can see:

{if ((isset($product.on_sale) && $product.on_sale) || (isset($product.reduction) && $product.reduction)) && $product.price_without_reduction > $product.price && $product.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}

    {convertPrice price=$product.price_without_reduction}

{/if}

Perhaps this may be useful to you as well.
The span class links to custom css style, just like yours.

[sammyhagar7]

Hello,

I've been looking around for a solution to this problem. I am trying to get the original price of an item to show crossed out and then show the sale price below it. I have tried a bunch of stuff but haven't been able to figure it out. On this thread someone mentioned that they had the original prices crossed out?

 

I'm not sure if it is a feature built into prestashop that i am missing or if i have to change some of the code somewhere.

 

in any case, any help would be greatly appreciated. thanks

[AKJV]

Hi sammyhagar7,

 

I have explained how to do this in full detail in a Dutch topic thread but will repeat it here in English:

 

Righ before this bit of code in /themes/your_theme/product-list.tpl:

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}

 

add this:

{if ((isset($product.on_sale) && $product.on_sale) || (isset($product.reduction) && $product.reduction)) && $product.price_without_reduction > $product.price && $product.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
		<span class="old_price_productlist">
		  {convertPrice price=$product.price_without_reduction}
		</span>
	  {else}
		<div style="height:22px;"></div>
	  {/if}

 

Then, add this somewhere in /themes/your_theme/css/product_list.css:

ul#product_list li span.old_price_productlist {
display: block;
font-size: 12px;
text-align: right;
text-decoration:line-through;
padding-bottom: 10px;
height: 12px
}

 

This works in 1.4.4 and probably in 1.4.5 as well. Not sure of previous 1.4.x versions.

Don't forget to enable 'Force compile' for changes to tpl files.

[sammyhagar7]

Hey AKJV,

Thanks for the reply... I tried the changes that you said and for some reason, the original price is not shown. any ideas? The address where I am working on getting the store going is http://www.jumpaudio.net/store.

 

the "earbuds" are the products that have prices so far.

 

Thanks so much for you help on this.

[AKJV]

Hi sammyhagar7,

 

I checked out your website and saw that the first product in the list of earbuds is on sale.

Indeed, no original price is given while I could see the empty div (the space above the current price) so the modifications seem to be implemented correctly.

 

But I don't see the original price on the product page either so it seems something else is wrong.

Have you created a specific price for this product at all in your backoffice?

[sammyhagar7]

Yeah, I see the spot for the original price as well.

 

In product tab I have a price in the pre-tax wholesale price and a price in the pre-tax retail price.

 

For trouble shooting, I uploaded the default product_list.tpl file again and added the change you put in there. Just so you know what I did, here's what that section of code looks like (i don't know how you added those cool code boxes in the forum reply)... This is a little above where I added the code and included a little below. Let me know if that is right. Thanks

 

 

{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}

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

<div>

 

 

{if ((isset($product.on_sale) && $product.on_sale) || (isset($product.reduction) && $product.reduction)) && $product.price_without_reduction > $product.price && $product.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}

<span class="old_price_productlist">

{convertPrice price=$product.price_without_reduction}

</span>

{else}

<div style="height:22px;"></div>

{/if}

 

 

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

</div>

[AKJV]

What I meant was whether you have set a discounted price for the product. See here for more info:

http://doc.prestashop.com/display/PS14/Adding+Products+and+Product+Categories#AddingProductsandProductCategories-ManagingQuantityDiscounts

 

To my understanding, you will need to create a new specific discount in order to get the crossed-out original price displayed on the product page and, with the modification, also on the product-listings.

[sammyhagar7]

OK so I did some experimenting. Yes, I had to put in a "reduction" in price by a certain amount rather than just setting a lower price. Then it showed the original price but didn't have a line through it. So then i moved the code in the CSS product_list.css toward the top of of the sheet rather than at the bottom and it works now. Thanks for the help.

 

one last question: why did that example on the link "http://doc.prestasho...antityDiscounts" show the price crossed out? Seems like it is showing that as part of default prestashop?

[AKJV]

Hi sammyhagar7,

 

Good to know that you managed to get it working in the end!

 

The crossed-out original price is default prestashop behaviour, but has only been implemented on product pages and not in product-listings.

 

Cheers.

[simberak]

Hello!

I am looking for something like you writtent here but little different Is it able to show the price in product-list.tpl without price adjustment (impact)? Because in my shop in the category page there are prices with an impact of attribute (it adds a price of the the first of attributes in BO). I am bothering with this for almost 3 days and I cant get it... I hope there is something like

{convertPrice price=$product.price_without_reduction}

for the price without impact...

Thank to all who answer

[Sorcha]

Thanks AKJV, 

This solution worked for me too on 1.5.6.0!

Thanks

[rschwendeman]

I am running 1.5.6 and it seems to work fine for me!

[totallighting.sk]

Me too!

[isaiaseg]

I tried this and it seems to be working because there is the space where the other price should be, but the space is empty, nothing is showing... any help??

[toniroger]

Hi, what i've done is to add this line to product_list.tpl

 

{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                    <span class="old_price" style="display: inline;">{convertPrice price=$product.price_without_reduction}</span><br />{/if}

just before is shown the price over line 53:
it should looks like this:
 

<div class="content_price">
                	{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                    <span class="old_price" style="display: inline;">{convertPrice price=$product.price_without_reduction}</span><br />{/if}
					{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
					{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if $product.quantity > 0}{l s='Available'}</span>{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="outofstock">{l s='Out of stock'}{/if}</span>{/if}
				</div>

Then change the css file product_list.css adding this code over line 124
 

#product_list li .old_price {
	display: block;
	margin-bottom: 15px;
	font-weight:bold;
	font-size: 18px;
	color:#990000;
	text-decoration:line-through;
}

This change is to show both prices, the original price and the reduction price.

 

Edited because i forgot to say that i use the 1.5.6 version of prestashop.

I hope this can help anybody.

Edited August 28, 2014 by toniroger (see edit history)