Jump to content

Showing Total Price when changing quantity.


akumi
 Share

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Just tried product.zip, does it work with volume discount? seems to be showing same unit price. Also noticed that if you type in the qty manually, total won't update as well.

Share this post


Link to post
Share on other sites

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: )

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@Switchboard when i use your javascript i get this error in my console. Any idea?

 

combinationsFromController is not defined

can you post your product.tpl, 

Share this post


Link to post
Share on other sites

My mofification of product.js is for version 1.6.0.6

 

combinationsFromController was introduced in this version.

 

Line 666: https://github.com/PrestaShop/PrestaShop/blob/1.6/themes/default-bootstrap/product.tpl

 

You need to ugrade your shop

Still not quite working for me though. It shows the wrong prices when i change the combination. Can't work out whats wrong.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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.

Share this post


Link to post
Share on other sites

  • 3 weeks later...

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 3 weeks later...

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 4 weeks later...

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

  • 2 months later...
  • 2 weeks later...

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)

Share this post


Link to post
Share on other sites

  • 1 month later...

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)

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More