Adding price to add to cart button in Impact theme

[TenPM]

Hi

I'm looking to add the price of a selected variant to the add to cart button.  We are using the Impact theme and also use recharge subscriptions

Url of the product is here - https://tenpm.co/products/the-night-drink

Any advice or help would be greatly appreciated!

[Huptech-Web · Accepted solution]

Hi @TenPM 
To achieve this, Add the below code to theme.liquid

<script>
window.addEventListener('load', function() {

    function updateAddToCartButton() {

        const selectedRadio = document.querySelector('.rc-radio__input:checked');
        
        if (selectedRadio) {

            const radioContainer = selectedRadio.closest('.rc-radio');

            const priceLabel = radioContainer.querySelector('.price-label');
            
            if (priceLabel) {

                const price = priceLabel.innerHTML;


                const addToCartButton = document.querySelector('.button[is="custom-button"] div');


                addToCartButton.innerHTML = "Add to cart"; 


                addToCartButton.innerHTML += ` - ${price}`;
            }
        }
    }


    updateAddToCartButton();


    document.querySelectorAll('.rc-radio').forEach(function(radio) {
        radio.addEventListener('click', function(event) {
            updateAddToCartButton();
        });
    });
});
</script>

Thank you

D.P.

[Huptech-Web · Accepted solution]

Hi @TenPM 
To achieve this, Add the below code to theme.liquid

<script>
window.addEventListener('load', function() {

    function updateAddToCartButton() {

        const selectedRadio = document.querySelector('.rc-radio__input:checked');
        
        if (selectedRadio) {

            const radioContainer = selectedRadio.closest('.rc-radio');

            const priceLabel = radioContainer.querySelector('.price-label');
            
            if (priceLabel) {

                const price = priceLabel.innerHTML;


                const addToCartButton = document.querySelector('.button[is="custom-button"] div');


                addToCartButton.innerHTML = "Add to cart"; 


                addToCartButton.innerHTML += ` - ${price}`;
            }
        }
    }


    updateAddToCartButton();


    document.querySelectorAll('.rc-radio').forEach(function(radio) {
        radio.addEventListener('click', function(event) {
            updateAddToCartButton();
        });
    });
});
</script>

Thank you

D.P.

[TenPM]

Hi D.P

thank you so much, this worked perfectly on the product I requested it for.  Can the code be tweaked so that on product pages without a radio button selector (e.g. https://tenpm.co/products/the-night-cookie-pack) then the price of the product is displayed as well in the add to cart button?

Thanks

[Huptech-Web · Accepted solution]

Hi @TenPM 
To achieve this where there are no variants add below code and also keep the previous code

<script>
window.addEventListener('load', function() {

    var salePriceElement = document.querySelector('sale-price');
    var regularPriceElement = document.querySelector('compare-at-price');
    

    var priceToDisplay;
    
    if (salePriceElement && salePriceElement.childNodes.length > 1) {
    
        priceToDisplay = salePriceElement.childNodes[salePriceElement.childNodes.length - 1].textContent.trim();
    } else if (regularPriceElement && regularPriceElement.childNodes.length > 1) {
    
        priceToDisplay = regularPriceElement.childNodes[regularPriceElement.childNodes.length - 1].textContent.trim();
    } else {
    
        priceToDisplay = 'Price not available';
    }


    var addToCartButton = document.querySelector('button[type="submit"].button.button--xl');


    if (addToCartButton) {
        var addToCartText = addToCartButton.querySelector('div').textContent.trim();
        addToCartButton.querySelector('div').textContent = `${addToCartText} - ${priceToDisplay}`;
    }
});
</script>

[TenPM]

Fantastic - thank you, works perfectly.