Magento 2 change the addtocart button text on detail page based on the product increment

Question

I am doing customisation on PDP page as per my client requirement, For my requirement i am using the grouped product, also added a option to increase/decrease each product quantity count, when increase or decrease a product quantity need to change the "addtocart" button based on the quantity and the each item price.

Example: One group product has 3 mapped product, each simple product price is $200, so when i added one quantity on each the item, then the "addtocart" button text need to change "Add 3 items to Basket($600.00), if i decrease so need to change the addtocart button text.

Kindly check the attached screen and share your idea.

Answer 1

It seems you need three things to achieve this

1. I hope you added the Increment/Decrement button by overriding Magento_GroupedProduct::product/view/type/grouped.phtml in which please add data-item-price="<?= /* @noEscape */ ($_item->getFinalPrice()) ?>" line in QTY Input as shown below.
2. Pass the currency Symbol while initiating JS. (References How to get current Currency and symbol in PHTML File? or Get current currency symbol in Magento2)
3. In the increment decrement method in JS, at last line of each method, call one custom method such as self.updateItemsAndPrice();. In that custom method, add below code

updateItemsAndPrice: function () {
                    let self = this;
                    let totalSelectedItemsCount = 0;
                    let totalSelectedItemPrice = 0;
        
                    $('.input-text-qty').each(function () {
                        let qty = $(this).val();
                        if (qty > 0) {
                            totalSelectedItemsCount++;
                            totalSelectedItemPrice += (qty * parseInt($(this).attr('data-item-price')));
                        }
                    })
        
                    if (totalSelectedItemsCount > 0) {
                        $('#product-addtocart-button > span').text("Add " + totalSelectedItemsCount + " item(s) to Basket (" + self.options.currency_symbol + totalSelectedItemPrice + ")");
                    } else {
                        $('#product-addtocart-button > span').text("Add to Cart");
                    }
                }