Ad

Need "add To Cart" Button Price To Update With Correct Amount Depending On What Checkbox Is Checked

- 1 answer

Here is my html for the one-time price

    <label for="autodeliver_off_radio_{{product.id}}" id="auto_deliver_label">
        <input type="radio" name="autodeliver_{{product.id}}" class="autodeliver {{product.id}}" value="onetime" {% if subscription_only == 'false' %} checked="" {% endif %} id="autodeliver_off_radio_{{product.id}}"> <span class="label_background"></span>
        <span style="color:black;">ONE-TIME PURCHASE </span> <span id="one-time-price_{{product.id}}"></span>
        <br>
        <span class="one_time_product_price"> {{ product.price | money }}</span>
    </label>

here is my code for the subscription price

    <label for="autodeliver_on_radio_{{product.id}}" id="auto_deliver_label" style="font-weight:bold;">
          <hr style="margin-top:-5px;border-top: 1px solid #000;">
          <input type="radio" name="autodeliver_{{product.id}}" class="autodeliver {{product.id}}" value="autodeliver" {% if subscription_only == 'true' %} checked="" {% endif %} id="autodeliver_on_radio_{{product.id}}"><span class="label_background"></span>
          <span style="color:black;"> SUBSCRIBE 
          {% if discount_percentage != 0 %}
            AND SAVE</span> 
          <span>{{discount_percentage}}%</span> <span id='recurring-time-price_{{product.id}}'></span><br><span class="subscribe_product_price">{{product.price | divided_by: new_num_2 | money }}</span> {% endif %}
    </label>

and here is where is need the price to update

       <div class="add-to-cart__wrapper">
          <button type="submit" name="add" id="AddToCart" class="btn btn--large btn--full btn--clear uppercase">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }} </span>
            <span class="unicode">&#x2022</span>
            <span class="add-to-cart__price money"><span id="ButtonPrice">{{ product.price | money }}</span></span>
          </button>
        </div>

I was hoping there was an easy jquery solution for this but i cant seem to get it. Been trying to extract html value from beside the checkboxes and update the add to cart button but no luck. Really stumped and thanks in advance! I added a visual in case this was confusingenter image description here

Ad

Answer

Give this jQuery code a try:

$(function(){
    var buttonPrice = $('span#ButtonPrice');

    $('input[type="radio"].autodeliver').click(function(){
        _this = $(this);

        if ( _this.attr('value') === 'onetime' ) {
            buttonPrice.html( $('span.one_time_product_price').html() );
        } else if ( _this.attr('value') === 'autodeliver' ) {
            buttonPrice.html( $('span.subscribe_product_price').html() );
        };
    });
});
Ad
source: stackoverflow.com
Ad