[SOLVED] product.tpl: display the price 2 times, with attribute price changes supported

[Jan Jansen]

Hi there,

 

I'm trying to display the price 2 times on the product page, including the "old price". I want to do this for visual reasons, because my product page is very large large.

 

Now I got 2 prices displayed besides one aspect: only the first price is updating when I change attributes (attributes that include price changes). My goal is make both prices change automatically  when changing attributes, instead of only the first displayed price.

 

This is the code for the first price (that is working with attribute price changes):

		<div id="prijs-addcart-box">
		<div id="price-box">
					{if $product->specificPrice AND $product->specificPrice.reduction}
				<div id="old_price_klein"><span class="bold">
				{if $priceDisplay >= 0 && $priceDisplay <= 2}
					{if $productPriceWithoutReduction > $productPrice}
						<span id="old_price_display">{convertPrice price=$productPriceWithoutRedution}</span>
						<!-- {if $tax_enabled && $display_tax_label == 1}
							{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
						{/if} -->
					{/if}
				{/if}
				</span>
				</div>
			{/if}

			<div class="price">
				{if !$priceDisplay || $priceDisplay == 2}
					{assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL)}
					{assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
				{elseif $priceDisplay == 1}
					{assign var='productPrice' value=$product->getPrice(false, $smarty.const.NULL)}
					{assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
				{/if}

				<div class="our_price_display_klein">
				{if $priceDisplay >= 0 && $priceDisplay <= 2}
					<span id="our_price_display">{convertPrice price=$productPrice}</span>
					<!--{if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))}
						{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
					{/if}-->
				{/if}
				</div>
		</div>

This is the code for the second price(that is not working with attribute price changes):

		<div class="content_prices clearfix">
			<!-- prices -->
			{if $product->show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}

			{if $product->on_sale}<div id="saleprice"><span class="on_sale">{l s='Saleprice:'}</span></div>{/if}
			{if $product->specificPrice AND $product->specificPrice.reduction}
				<p id="old_price"><span class="bold">
				{if $priceDisplay >= 0 && $priceDisplay <= 2}
					{if $productPriceWithoutReduction > $productPrice}
						<span id="old_price_display">{convertPrice price=$productPriceWithoutRedution}</span>
						<!-- {if $tax_enabled && $display_tax_label == 1}
							{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
						{/if} -->
					{/if}
				{/if}
				</span>
				</p>
			{/if}

			<div class="price">
				{if !$priceDisplay || $priceDisplay == 2}
					{assign var='productPrice' value=$product->getPrice(true, $smarty.const.NULL)}
					{assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
				{elseif $priceDisplay == 1}
					{assign var='productPrice' value=$product->getPrice(false, $smarty.const.NULL)}
					{assign var='productPriceWithoutRedution' value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
				{/if}

				<p class="our_price_display">
				{if $priceDisplay >= 0 && $priceDisplay <= 2}
					<span id="our_price_display">{convertPrice price=$productPrice}</span>
					<!--{if $tax_enabled  && ((isset($display_tax_label) && $display_tax_label == 1) OR !isset($display_tax_label))}
						{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}
					{/if}-->
				{/if}
				</p>

I tried to copy/paste the fist code, that is working with attribute-price-changes. But that didn't solve the problem. So I must be doing something wrong for sure.

 

I use the Original product.js in my theme folder.

 

Every input is MUCH appreciated !

Edited February 7, 2014 by Jan Jansen (see edit history)

[CartExpert.net]

Hi.

 

For the 2nd price you need to set a different ID, it can't be our_price_display. IDs must be unique.

 

Look up the function 'updateDisplay' in product.js, locate and duplicate the following lines:

$('#our_price_display').text(our_price);
		$('#old_price_display').text(formatCurrency(productPriceWithoutReduction, currencyFormat, currencySign, currencyBlank));

and change 'our_price_display' to the new ID.

 

Regards.

Robin.

The CartExpert Team

[Jan Jansen]

Robin, thanks a lot !!!

 

Your help is much appriciated, everything is working as it should now.

 

Case solved

[chaitu]

Hi iam new to prestashop and the code which you have given is not working in my prestashop

iam using prestashop 1.6 version

[cuapaca]

Hi community,

I have a similar issue, but the answer given before did´t work for me

Im duplicating this code on my product.tpl and I´ve changed the ID to: #our_price_display_2

as you can see:

 

product.tpl

 <div class="single-price price" id="our_price_display_2" itemprop="price">{convertPrice price=$productPrice|floatval}

						{if ($product->specificPrice || $product->specificPrice.reduction)}
						{strip}
							{if $priceDisplay >= 0 && $priceDisplay <= 2}
								<div class="single-price-before">Antes 
									{hook h="displayProductPriceBlock" product=$product type="old_price"}
									<span id="old_price_display">{if $productPriceWithoutReduction > $productPrice}{convertPrice price=$productPriceWithoutReduction|floatval}{/if}{if $productPriceWithoutReduction > $productPrice && $tax_enabled && $display_tax_label == 1} {/if}</span>
								</div>
							{/if}
						{/strip}
						{/if}
					  </div>

In another part above of my HTML code, and I did change.

 

I did change my product.js and duplicated the line as this: 

 

product.js

$(document).on('change', '#quantity_wanted', function(e){
	e.preventDefault();
	var specificPrice = findSpecificPrice();

	if(false !== specificPrice){
		$('#our_price_display').text(specificPrice);
	}else{
		if (typeof productHasAttributes != 'undefined' && productHasAttributes){
			updateDisplay();
		}else{
			$('#our_price_display').text(formatCurrency(parseFloat($('#our_price_display').attr('content')), currencyFormat, currencySign, currencyBlank));
			
			$('#our_price_display_2').text(formatCurrency(parseFloat($('#our_price_display_2').attr('content')), currencyFormat, currencySign, currencyBlank));
			
		}
	}
});

But the second price still have no change when you select the attribute, so the main price is Ok, but the duplicated price not working

Here is my testing site: http://pruebas.dianalevy.net/es/women/8-camiseta.html

I hope somebody could help me please, and thanks for your time