Jump to content

Showing Total Price when changing quantity.

akumi

By akumi
in OUT - 1.6.0.11 [7 Jan 2015]

 Share

Recommended Posts

akumi Newbie

akumi

Posted
Posted

I noticed that at the product page, when you press the + sign to increase quantity, it still shows the unit price and doesn't show the total price. But at the checkout, when you press the + sign, it updates the total price and it even changes the unit price if you have volume discount for the product). 

 

My question is whether Prestashop 1.6 has this option in the back office to do so or does it have to be done by modifying the code. I've attached an image of it as well. Any help would be appreciated.

 

 

post-534699-0-30384100-1398247084_thumb.png

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Hi

 

you can use Javascrypt for that add commande on + and - function

in file theme/default/bootstrap/js/product.js

line 251
replace
 if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
            $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');           
        } else {
            $('input[name='+fieldName+']').val(quantityAvailableT);           
        }

by
 if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
            $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
            var total = (productPrice * (currentVal + 1));
            var total = total.toFixed(2);
            $('p.our_price_display').fadeOut();	
            $('span#our_price_display').text(total + ' ' + currencySign)
            $('p.our_price_display').fadeIn();
        } else {
            $('input[name='+fieldName+']').val(quantityAvailableT);           
        }

line 269
replace
 if (!isNaN(currentVal) && currentVal > 1) {
            $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
            var total = (productPrice * (currentVal - 1));
            var total = total.toFixed(2);
            $('p.our_price_display').fadeOut();	
            $('span#our_price_display').text(total + ' ' + currencySign)
            $('p.our_price_display').fadeIn();
        } else {
            $('input[name='+fieldName+']').val(1);
        }
by
 if (!isNaN(currentVal) && currentVal > 1) {
            $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');            
        } else {
            $('input[name='+fieldName+']').val(1);
        }

test on PS 1.6

you can keep span unit price  and create new span with id  in product.tpl and addapt my code with your 'span#idofspan'

 

@++

 

Loulou66

Link to comment
Share on other sites
Eysr Newbie

Eysr

Posted
Posted

Hey,

Thank you Loulou66, i'll try this tomorrow.

Do you have any idea how to show the total price with discount prices?

For example if my price for one product is 10$, can it show 17$ for two instead of 20?

Link to comment
Share on other sites
AZC Newbie

AZC

Posted
Posted

Thanks Loulou that works great.

 

2 Questions though: 1) how do i get rid of the fade in fade out?

and 2) this still does not help for the combinations. The price still shows no change for different combinations.

Link to comment
Share on other sites
AZC Newbie

AZC

Posted
Posted

Doesn't work for me either. My price update is fine until i change the quantity of a combination, then all i get is the default price again.

As far as typing in manually you'll need to add an .on(input) function so that it updates whatever happens, but then you get problems with maximum quantity. (i'm sure thats as clear as mud... :unsure: )

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Hi

 

when you change combination ( color, size, etc..) it is normal because the price combinations can not be all equal so when you change the combination the price back to 1 unit to avoid that the client is mistaken in prices

 

for the add as typing in my file

before
	
});
// dpisplay price * quantity by loulou66 (called in line 257 and 268)
function displayPrice(fieldName)

add
	$("input[name='qty']").on('change' ,function(){
		displayPrice(fieldName);
	});

now when you change the quantity as typing anc click beside the input the price is updated

 

@++

 

Loulou66

Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

Hi,

 

@loulou66 :

 

je crois que tu es français alors je vais poster en français...

 

J'ai appliqué les modifs pour la mise à jour des prix (our_price_display et old_price) et cela fonctionne bien.

 

Mais lorsque je sélectionne une déclinaison avec une majoration sur le prix, le calcul ne prend pas en compte cette majoration.

 

As-tu une idée ?

 

Merci

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Couou, HI 

 

FRENCH

pour PS 1.6.0.5/1.6.0.5 defaut thème

 

j'ai modifier le product.js pour que l'affichage du prix change en fonction des quantités ou des attributs choisis par le client tout en tenant compte des prix spécifiques des déclinaisons et/ou des promo

 

un seul bémol j'ai désactiver le prix barré (old_price) si vos groupes affiche le prix HT

 

j'ai ajouter en commentaire en début de fichier les lignes ajouter ou modifiées

A tester sur des PS local avant :P

 

EINGLISH

PS 1.6.0.5/1.6.0.5 default theme
 
I change the product.js for the display of the prices change depending on the quantity or attributes chosen by the customer  while considering specific attribute price and specifiques prices
 
one downside I disable the crossed out price (old_price) if your group displays the price HT
 
I added in comment in beginning of the file the lines added or changed
please test on local PS before

 

@++

 

Loulou66

product.zip

  • Like 4
Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

 

un seul bémol j'ai désactiver le prix barré (old_price) si vos groupes affiche le prix HT

 

Merci pour tes modifs, mais en ce qui me concerne.

 

J'utilise justement les prix barrés et les prix sont affichés en HT.

 

Aurais-tu une astuce ?

 

Merci

Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

FRENCH

 

J'ai finis par trouvé (valable pour PS 1.6.0.6)

 

Cette modification permet la mise à jour automatique de tous les prix (normal/déclinaisons/promos/ht/ttc) selon la quantité

 

ENGLISH

 

I finally found (valid for PS 1.6.0.6)

This modification allows the automatic updating of prices (normal / versions / specials / ht / ttc) depending on the amount

 

 

 

product.zip

  • Like 5
Link to comment
Share on other sites
AZC Newbie

AZC

Posted
Posted

Yes I have the latest version, i've tried the latest changes (although at the moment i've removed them because they werent helping)

 

Basically at the moment the correct price shows for the combinations. However when i change the quantity the price returns to the default combination price.

 

When I used the latest changes, the prices did not show correctly at all, it seemed as if it was showing the price before tax.

Link to comment
Share on other sites
AZC Newbie

AZC

Posted
Posted

Home after the update to the latest version, it works perfectly.

 

Here is my config:

PS 1.6.0.6

Display prices HT

Display of old prices crossed

Activated promotions

I tried with latest default theme and your porduct.js

 

The price I get is without tax. How do i change that?

Link to comment
Share on other sites
akumi Newbie

akumi

Posted
  • Author
Posted (edited)

used 1.6.0.6 and works great but is there a way to show the prices with taxes even though customer is guest/visitor (I have set to show prices with tax for guest & visitor in back office but apparently it doesn't affect product.js). Where in the product.js can i change that.

 

PS just noticed that all the prices in volume discount are without tax as well, would also like to have them with tax. Thanks.

Edited by akumi (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
starsg38 Newbie

starsg38

Posted
Posted

How can we make this work so that it shows the discount price on quantity? For example I have bulk discounts 1-49 is $5.00 each and 50-100 is $2.85 each. But with this code it shows only the base price. It will update the price with combination discounts not quantity. If anyone has any ideas I would greatly appreciate it! I have been searching for a solution to this with no luck.

Link to comment
Share on other sites
  • 3 weeks later...
morrisa Newbie

morrisa

Posted
Posted

On the question of the display of tax, I've noticed that at line 719 of the amended product.js is

if (noTaxForThisProduct)
Is this the right way round? If I change the first line to 
if (!noTaxForThisProduct)
Then the tax inclusive price is used and the total is displayed with tax.
 
However, I then ran into the issue with Javascript floating point arithmetic that resulted in the calculated price being wrong.
 
I changed
{
basePriceDisplay = basePriceWithoutTax * (taxRate/100 + 1) * currentVal;
priceWithDiscountsDisplay = priceWithDiscountsWithoutTax * (taxRate/100 + 1) * currentVal;
}
else
{
basePriceDisplay = basePriceWithoutTax * currentVal;
priceWithDiscountsDisplay = priceWithDiscountsWithoutTax * currentVal;
}
to
{
basePriceDisplay = (Round((basePriceWithoutTax*100) * (taxRate/100 + 1),0) * currentVal)/100;
priceWithDiscountsDisplay = (Round((priceWithDiscountsWithoutTax*100) * (taxRate/100 + 1),0) * currentVal)/100;
}
else
{
basePriceDisplay = ((basePriceWithoutTax*100) * currentVal)/100;
priceWithDiscountsDisplay = ((priceWithDiscountsWithoutTax*100) * currentVal)/100;
}
 
 
This seemed to fix the problem for me and my calculated prices are now correct. I use the first block of the code (my prices are inclusive of tax) and so the second block may need checking.

 

I hope this helps move things along.

 

My revised product.js is attached as product.js.txt - I couldn't upload it without the .txt extension!

 

product.js.txt

 

Alan

Link to comment
Share on other sites
antoniopedota Newbie

antoniopedota

Posted
Posted

Hi Guys, please, I need your help:
Here in this link:
http://dalecanna.net...uct#/pack-1-uds
In v1.5 I managed to make prestashop to work so that at first the base price shows at the bottom and when the user chooses any other quantity the price changes. Since 1.6 none of my products are behaving like that. At first the page shows the initial price and the it sticks to 0,00. Can you please tell me how to solve this. Thanks

Link to comment
Share on other sites
  • 3 weeks later...
Ureta Newbie

Ureta

Posted
Posted

Hi, I'm trying to do something similar. when I click plus button I need to increment X times. I created an atribute called "multiplo" and each product got a diferent value, example.. 12. 1 click... 12.... 2 clicks... 24 

 

Then this value will be different to customer groups.

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
Jhony Ranger Newbie

Jhony Ranger

Posted
Posted (edited)

Tested on 1.6.0.8 and working:

 //       if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
 //           $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
 //       } else {
 //           $('input[name='+fieldName+']').val(quantityAvailableT);
 //       }
  if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
            $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
            var total = (productPrice * (currentVal + 1));
            var total = total.toFixed(2);
            $('p.our_price_display').fadeOut();	
            $('span#our_price_display').text(total + ' ' + currencySign)
            $('p.our_price_display').fadeIn();
        } else {
            $('input[name='+fieldName+']').val(quantityAvailableT);           
        }
    });
	 // The button to decrement the product value
    $(document).on('click', '.product_quantity_down', function(e){
        e.preventDefault();
        fieldName = $(this).data('field-qty');
        var currentVal = parseInt($('input[name='+fieldName+']').val());
 //       if (!isNaN(currentVal) && currentVal > 1) {
 //           $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
 //       } else {
 //           $('input[name='+fieldName+']').val(1);
 //       }
  if (!isNaN(currentVal) && currentVal > 1) {
            $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
			var total = (productPrice * (currentVal - 1));
            var total = total.toFixed(2);
            $('p.our_price_display').fadeOut();	
            $('span#our_price_display').text(total - ' ' + currencySign)
            $('p.our_price_display').fadeIn();
        } else {
            $('input[name='+fieldName+']').val(1);
        }

Regards.

Edited by GuilleFX (see edit history)
  • Like 1
Link to comment
Share on other sites
antoniopedota Newbie

antoniopedota

Posted
Posted

Tested on 1.6.0.8 and working:

 //       if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
 //           $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
 //       } else {
 //           $('input[name='+fieldName+']').val(quantityAvailableT);
 //       }
  if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
            $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
            var total = (productPrice * (currentVal + 1));
            var total = total.toFixed(2);
            $('p.our_price_display').fadeOut();	
            $('span#our_price_display').text(total + ' ' + currencySign)
            $('p.our_price_display').fadeIn();
        } else {
            $('input[name='+fieldName+']').val(quantityAvailableT);           
        }
    });
	 // The button to decrement the product value
    $(document).on('click', '.product_quantity_down', function(e){
        e.preventDefault();
        fieldName = $(this).data('field-qty');
        var currentVal = parseInt($('input[name='+fieldName+']').val());
 //       if (!isNaN(currentVal) && currentVal > 1) {
 //           $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
 //       } else {
 //           $('input[name='+fieldName+']').val(1);
 //       }
  if (!isNaN(currentVal) && currentVal > 1) {
            $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
			var total = (productPrice * (currentVal - 1));
            var total = total.toFixed(2);
            $('p.our_price_display').fadeOut();	
            $('span#our_price_display').text(total - ' ' + currencySign)
            $('p.our_price_display').fadeIn();
        } else {
            $('input[name='+fieldName+']').val(1);
        }

Regards.

Thanks Guille but, I am sorry, I am a graphic designer. Can you help me telling me where should I paste this code? Thanks in advance!

  • Like 1
Link to comment
Share on other sites
  • 4 weeks later...
Marco Brughi Newbie

Marco Brughi

Posted
Posted

Hi,

    I have PS 1.6.0.8 and personalized theme with product attribute and quantity discounts, and don't use tax I've tried all the variations proposed but none work for me.

 

In my ecommerce the product attribute change the unit price correctly but i don't visualize change when I increase quantity, is always displayed the unit price.

 

I attached my product.tpl.

 

Can you help me?

 

Thanks!

product.tpl.txt

Link to comment
Share on other sites
antoniopedota Newbie

antoniopedota

Posted
Posted

Hi Marco. This code was sent to me by GuilleFX. He says to put it in the product.js inside your theme folder/js/... But only works for items without attributes, otherwise the code gets crazy.

// if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
// $('input[name=+fieldName+]').val(currentVal + 1).trigger('keyup');
// } else {
// $('input[name=+fieldName+]').val(quantityAvailableT);
// }
if (!isNaN(currentVal) && currentVal < quantityAvailableT) {
$('input[name=+fieldName+]').val(currentVal + 1).trigger('keyup');
var total = (productPrice * (currentVal + 1));
var total = total.toFixed(2);
$('p.our_price_display').fadeOut();    
$('span#our_price_display').text(total + ' ' + currencySign)
$('p.our_price_display').fadeIn();
} else {
$('input[name=+fieldName+]').val(quantityAvailableT);
}
});
     // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
e.preventDefault();
fieldName = $(this).data('field-qty');
var currentVal = parseInt($('input[name=+fieldName+]').val());
// if (!isNaN(currentVal) && currentVal > 1) {
// $('input[name=+fieldName+]').val(currentVal - 1).trigger('keyup');
// } else {
// $('input[name=+fieldName+]').val(1);
// }
if (!isNaN(currentVal) && currentVal > 1) {
$('input[name=+fieldName+]').val(currentVal - 1).trigger('keyup');
            var total = (productPrice * (currentVal - 1));
var total = total.toFixed(2);
$('p.our_price_display').fadeOut();    
$('span#our_price_display').text(total - ' ' + currencySign)
$('p.our_price_display').fadeIn();
} else {
$('input[name=+fieldName+]').val(1);
}

 

 

I have not tried it yet. But I will. I hope it works for you.

Link to comment
Share on other sites
Marco Brughi Newbie

Marco Brughi

Posted
Posted

Hi Antonio, thank you but unfortunately the problem is exactly this, there are product attributes, then, from what you have written, I do not think that code works. Anyway I want to try it, you never know, but according to you where in the file product.js should I put this code?

 

thanks for your help!

Link to comment
Share on other sites
  • 2 months later...
  • 2 weeks later...
shaktishakya Newbie

shaktishakya

Posted
Posted (edited)

Add the following function somewhere in product.js file. You may add this just above the function updateDisplay() definition. Note that I used another div element having id 'total_qty_price' to display the updated price.

function displayTotalPriceByQty( unit_price ){
	total_qty_price = $('#total_qty_price');
	qty_wanted = parseInt($('#quantity_wanted').val());

	if( typeof unit_price == 'undefined' || unit_price == '' )
		unit_price = productPrice;

	if(qty_wanted > 0){
		
		if(qty_wanted == 1)
			total_qty_price.hide('fast');
		else if(unit_price > 0){
			total_qty_price.show('fast');
			total_price = formatCurrency((unit_price * qty_wanted), currencyFormat, currencySign, currencyBlank);
			total_qty_price.text( '= ' + total_price);
		}	
		
	}else{
		total_qty_price.hide('fast');
	}
}

Replace:

if (productPriceDisplay > 0) {
   our_price = formatCurrency(productPriceDisplay, currencyFormat, currencySign,  currencyBlank);
} else {
   our_price = formatCurrency(0, currencyFormat, currencySign, currencyBlank);
}

With:

if (productPriceDisplay > 0) {
    displayTotalPriceByQty(productPriceDisplay);
    our_price = formatCurrency(productPriceDisplay, currencyFormat, currencySign, currencyBlank);
} else {
    displayTotalPriceByQty(0);
    our_price = formatCurrency(0, currencyFormat, currencySign, currencyBlank);
}

Lastly, call functions at the end of click event on '.product_quantity_up' and '.product_quantity_down' as:

if($('.attribute_list').length)           
    updateDisplay();
else
    calculateTotalQtyPrice();
Edited by shaktishakya (see edit history)
Link to comment
Share on other sites
  • 1 month later...
imagetag Newbie

imagetag

Posted
Posted (edited)

Since I changed the template and the javascript alot, i can only add a brief description, how I've done it.

 

1. Add the updatePrice function to the +/- buttons and bind a change handler to the quantity field and call updatePrice there, too.

2. At the top of the updatePrice function you will find an if clause, which checks for combinations and ends the function, if there are none. You will have to check, if combinationsFromController is undefined, and only if it not, use the original clause. Instead of exiting the function set an additional variable, noCombs, for example and set it to true or false.

3. Add a 

if (!noCombs)...

to any line, where prices are recalculated by the use of the combination object.

4. Write a small iteration over your specific price display and define some variables to calculate the price later like:

$('#quantityDiscount tr').each(function(){
        if ("undefined" != typeof $(this).data('discount-quantity')){
            if(parseInt($(this).data('discount-quantity')) <= parseInt($('#quantity_wanted').val()) && parseInt($(this).data('discount-quantity')) > amount){
                reduction = $(this).data('discount');
                amount = parseInt($(this).data('discount-quantity'));
                if ($(this).data('discount-type').search("amount") < 0) rtype = "percent";
            [spam-filter]
    });


    if (rtype != "percent") priceWithDiscountsDisplay = priceWithDiscountsDisplay.toFixed(2) - reduction;
    else {
        priceWithDiscountsDisplay = priceWithDiscountsDisplay - (priceWithDiscountsDisplay / 100 * reduction);
        priceWithDiscountsDisplay = priceWithDiscountsDisplay.toFixed(2);
    }

5. Finally, calculate the price and update your spans or divs, like:

$('#our_price_display').text(formatCurrency(priceWithDiscountsDisplay * currencyRate * $('#quantity_wanted').val(), currencyFormat, currencySign, currencyBlank));
 //displayTotalPriceByQty(priceWithDiscountsDisplay * currencyRate);


    if (priceWithDiscountsDisplay.toFixed(2) != basePriceDisplay.toFixed(2)) {
        $('#old_price_display').text(formatCurrency(basePriceDisplay * currencyRate * $('#quantity_wanted').val(), currencyFormat, currencySign, currencyBlank));
        $('#old_price,#old_price_display,#old_price_display_taxes').show();


        // Then if it's not only a group reduction we display the discount in red box
        if (priceWithDiscountsWithoutTax != priceWithGroupReductionWithoutTax) {
            if (combination.specific_price.reduction_type == 'amount') {
                $('#reduction_amount_display').html('-' + formatCurrency(parseFloat(discountValue), currencyFormat, currencySign, currencyBlank));
                $('#reduction_amount').show();
            }
            else {
                $('#reduction_percent_display').html('-' + parseFloat(discountPercentage).toFixed(0) + '%');
                $('#reduction_percent').show();
            }
        }
    }
 

 

The additions I made were nessesary, because I got some errors in firebug and prices were only recalculated for products with combinations. Now it seems to work for all products and takes special offers into account.

 

I reused some code, that I found in this and similar threads, thanks to all.

 

 

Peter

Edited by imagetag (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
sergiomc87 Newbie

sergiomc87

Posted
Posted

Since I changed the template and the javascript alot, i can only add a brief description, how I've done it.

 

1. Add the updatePrice function to the +/- buttons and bind a change handler to the quantity field and call updatePrice there, too.

2. At the top of the updatePrice function you will find an if clause, which checks for combinations and ends the function, if there are none. You will have to check, if combinationsFromController is undefined, and only if it not, use the original clause. Instead of exiting the function set an additional variable, noCombs, for example and set it to true or false.

3. Add a 

if (!noCombs)...

to any line, where prices are recalculated by the use of the combination object.

4. Write a small iteration over your specific price display and define some variables to calculate the price later like:

$('#quantityDiscount tr').each(function(){
        if ("undefined" != typeof $(this).data('discount-quantity')){
            if(parseInt($(this).data('discount-quantity')) <= parseInt($('#quantity_wanted').val()) && parseInt($(this).data('discount-quantity')) > amount){
                reduction = $(this).data('discount');
                amount = parseInt($(this).data('discount-quantity'));
                if ($(this).data('discount-type').search("amount") < 0) rtype = "percent";
            [spam-filter]
    });


    if (rtype != "percent") priceWithDiscountsDisplay = priceWithDiscountsDisplay.toFixed(2) - reduction;
    else {
        priceWithDiscountsDisplay = priceWithDiscountsDisplay - (priceWithDiscountsDisplay / 100 * reduction);
        priceWithDiscountsDisplay = priceWithDiscountsDisplay.toFixed(2);
    }

5. Finally, calculate the price and update your spans or divs, like:

$('#our_price_display').text(formatCurrency(priceWithDiscountsDisplay * currencyRate * $('#quantity_wanted').val(), currencyFormat, currencySign, currencyBlank));
 //displayTotalPriceByQty(priceWithDiscountsDisplay * currencyRate);


    if (priceWithDiscountsDisplay.toFixed(2) != basePriceDisplay.toFixed(2)) {
        $('#old_price_display').text(formatCurrency(basePriceDisplay * currencyRate * $('#quantity_wanted').val(), currencyFormat, currencySign, currencyBlank));
        $('#old_price,#old_price_display,#old_price_display_taxes').show();


        // Then if it's not only a group reduction we display the discount in red box
        if (priceWithDiscountsWithoutTax != priceWithGroupReductionWithoutTax) {
            if (combination.specific_price.reduction_type == 'amount') {
                $('#reduction_amount_display').html('-' + formatCurrency(parseFloat(discountValue), currencyFormat, currencySign, currencyBlank));
                $('#reduction_amount').show();
            }
            else {
                $('#reduction_percent_display').html('-' + parseFloat(discountPercentage).toFixed(0) + '%');
                $('#reduction_percent').show();
            }
        }
    }
 

 

The additions I made were nessesary, because I got some errors in firebug and prices were only recalculated for products with combinations. Now it seems to work for all products and takes special offers into account.

 

I reused some code, that I found in this and similar threads, thanks to all.

 

 

Peter

Hi Peter,

 

Can you update your product.js to see the issue better? 

 

Thank you

  • Like 2
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...