Update price on quantity change in PrestaShop 1.7

[hari44]

Hi
Is it a possibility to live update price when I change product's quantity in the product page?
A few version ago was awesome tutorial ( https://www.youtube.com/watch?v=6znHv0zUao0 ).
I hope there is some solution.

[Naspinu]

Hi,

I need this too for Prestashop 1.7.2.4.
 

Thanks a lot

[Lev]

I've got the same question.

[SVS]

Hello,

Same request here on 1.7.5.1.

On cart details we have that working, changing quantity updates price, but on product page that doesn't work the same way...

Any help appreciated.

 

Best regards

[NemoPS]

It might not work in 1.7, but here is how it was working on 1.6

http://nemops.com/update-price-on-quantity-change-in-prestashop-1-6/#.XKs64pgzaUk

[digitalDot]

Hello, in this case, we wanted to recalculate a price field everytime the quantity varies, we included the following JavaScript code within the custom.js file in the theme designed fot the online shop in PrestaShop. If you have any questions you can contact us https://www.digitaldot.es/soporte-prestashop

 

prestashop.on('updatedProduct', calculate);

 

 function calculate (){

//operation

}

 

Regards

 

 

[digitalDot]

Please read of documentation of prestashop.

 

https://devdocs.prestashop.com/1.7/themes/reference/javascript-events/

 

Regards

[Alina007]

On 4/16/2019 at 7:41 PM, digitalDot said:

Hello, i added this code at the bottom of custom.js file but nothing happens.

prestashop.on('updatedProduct', calculate);

 

 function calculate (){

//operation

}

 

Do i have to do anything else?

 

Thank you

 

On 4/16/2019 at 7:41 PM, digitalDot said:

 

On 4/16/2019 at 7:41 PM, digitalDot said:

Hello, in this case, we wanted to recalculate a price field everytime the quantity varies, we included the following JavaScript code within the custom.js file in the theme designed fot the online shop in PrestaShop. If you have any questions you can contact us https://www.digitaldot.es/soporte-prestashop

 

prestashop.on('updatedProduct', calculate);

 

 function calculate (){

//operation

}

 

Regards

 

 

 

[Merlin-Naturkosmetik]

Okay, I try to use it. But the question is how I get in javascript the variation weight? And how I can display the correct weight direct at first loading of the article details view?

[Hissvard]

Came here from Google and figured I'd share my quickly hacked together solution.

• It was not tested too deeply so I take no responsibility for its proper functioning - please run your own checks.
• It assumes the initial input of the "quantity" field is "1", so it's gonna conflict if the initial value in that field is different due to another plugin or theme you use.
• It assumes the currency is euro
• It assumes you're using comma as decimal separator and dot as thousands separator, as is more common in Europe.

prestashop.on('updatedProduct', () => {
    updatePricesByQuantity();
});

function updatePricesByQuantity() {
    // the CSS classes that contain the prices to change. You might need to change these depending on theme.
    const classNames = ['.price', '.regular-price'];
    // change this if not using euros. You can specify multiple like this: /€£/
    const currencyRegex = /€/;
    
    classNames.forEach((className) => {
        $(className).each(function() {
            const $target = $(this);

            // save the original price corresponding to quantity=1
            if (!$target.data('original-price')) {
                $target.data('original-price', $target.text());
            }

            // find the quantity
            const quantity = $target.closest('.cart-item, form').find('[name=qty], .js-cart-line-product-quantity').val();
          
            // replace shown price with original price multiplied by quantity
            $target.text(twoDecimals(stringToNumber($target.data('original-price')) * quantity) + ' €');
        });
    });

    // 10,00 € -> 10.00
    function stringToNumber(str) {
        return parseFloat(str.replace(/ /, '').replace(currencyRegex, '').replace(/,/, '.'));
    }

    // 5.2 -> 5,20
    function twoDecimals(n) {
        return parseFloat(Math.round(n * 100) / 100).toFixed(2).replace('.', ',');
    }
}

There is a small delay before prestashop fires the "updatedProduct" event, if that's an issue you can run this every 50 milliseconds instead:

setInterval(updatePricesByQuantity, 50);

Do keep in mind that's more computationally expensive.

Edited June 16, 2023 by Hissvard
Additional gotchas (see edit history)