I'm developing a custom checkout and have a bit of trouble with the jQuery. What I want is for each item that's checked to be added to the Subtotal and the Total values. Also, when an item is unchecked, it is no longer added to the subtotal and total.
Currently, when I click on an option, it's added to the sub total and total values. However, when I UNcheck an item, it still adds again to the totals.
Here's the URL to the Pen I'm working in right now: https://codepen.io/BFrancoeur/pen/abyQJqj
What I've tried:
-- Unbind each event with .off(). This had no effect whatsoever on the totals -- Use .one() to limit each event to a single firing (or trigger). This didn't work, either. -- Create conditional (ternary) operators for each item and return sum = 0 when false. This had no impact on the results
What am I missing here? This is the only thing that's holding me up.
To view the code directly, see below.
Thanks!
<!-- HTML -->
<div >
<div >
<div id="tmp_orpo-44887" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false">
<table width="100%">
<tbody>
<tr >
<th width="70%"></th>
<th width="30%"></th>
</tr>
<tr data-cf-product-template="true">
<td >
<input type="radio" id="pid-3727024-0" name="purchase[product_id]" value="3727024" data-product-label="Funnel Fusion Book" data-product-payment-type="onetime" data-product-amount="27.00" data-payment-gateway-type="" data-product-currency-code="USD" data-business-name="WebSapientClickFunnels" data-product-name="Funnel Fusion Book">
<label for="pid-3727024-0" data-cf-product-name="true">Funnel Fusion Book</label>
</td>
<td data-cf-product-price="true" taxamo-currency="USD">$27</td>
</tr>
<tr data-cf-product-template="true">
<td >
<input type="radio" id="pid-3728625-0" name="purchase[product_id]" value="3728625" data-product-label="eBook Audiobook (Add for only $9.97 more)" data-product-payment-type="onetime" data-product-amount="9.97" data-payment-gateway-type="" data-product-currency-code="USD" data-business-name="WebSapientClickFunnels" data-product-display-amount="Add for only $9.97 more" data-product-name="eBook Audiobook">
<label for="pid-3728625-0" data-cf-product-name="true">eBook Audiobook </label>
</td>
<td data-cf-product-price="true" taxamo-currency="USD">Add for only $9.97 more</td>
</tr>
</tbody>
</table>
</div>
<div >
<!-- <form>
<div >
<ul >
<li >
<div id="product_1">
<input id="pid-3727024-0" type="radio" name="addon">
<label for="ebook">eBook Only <span>$27.00</span></label>
</div>
</li>
<li >
<div id="product_2">
<input id="pid-3728625-0" type="radio" name='addon'>
<label for="audiobook">eBook Audiobook <span>$9.95</span></label>
</div>
</li>
</ul>
</div>
</form> -->
</div>
</div>
<div >
<div >
<div id="orderFormBump" style="border: 3px dashed rgb(255, 0, 0); box-sizing: border-box; padding: 15px 20px 45px 20px; background-color: #ffffff; text-align: left;">
<div style=" text-align: left;">
<div style="padding: 1px 10px; margin-bottom: 10px; background-color: #ffffff; text-align: center; background-position: initial initial; background-repeat: initial initial; text-align: left;">
<label style=" cursor: pointer; font-size: 14px; font-weight: normal; line-height: 20px; display: inline-block; margin-bottom: 0px; min-height: 20px; padding-left: 20px; padding-top: 0px; margin-top:-1px; vertical-align: middle;">
<img src="https://assets.clickfunnels.com/templates/listhacking-sales/images/arrow-flash-small.gif" alt="" style="max-width: 100%; height: auto; vertical-align: middle; border: 0px; float: left; position: relative; left: -25px;" data-cf-id="flashing-arrow" data-cf-note="flashing arrow" data-cf-editable-type="image">
<input type="checkbox" name="purchase[product_ids][]" id="bump_offer_1" style="margin: 4px 0px 0px -20px; cursor: pointer;float: left;" data-product-amount="29.97" data-storage="false">
</label>
<label style="font-weight: bold; color: #ff0000; line-height: 20px; display: inline; min-height: 20px; vertical-align: middle; margin-bottom: 0px; padding-left: 0px; padding-top: 5px;"><strong style="color: #ff0000;">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></strong>
</label>
</div>
<div style="text-align: center;">
<p style="text-align: left" data-cf-id="order-bump" data-cf-note="orderform bump" data-cf-editable-type="rich-text">
<font size="2"><u>
<font color="#CC3300"><b ></b></font>
</u> <span >Get instant access to the <em><strong><u>Advanced Acquisition Theory Course</u></strong></em>, an in depth step-by-step course that will show you the <u>latest cutting edge strategies</u>, <u>techniques</u> and <u>tactics</u> for growing your online business - using <strong>strategies very few online business owners even know exist</strong>. You will be able to get more customers, get more clients and scale your business faster than you ever thought possible. Usually <s>$197</s>, <strong>but today's special deal is $29.95 ($167.05 savings).</strong></span></font>
</p>
<button type="button" opt-val="no" id="aadtomyOrder">Yes! Add To My Order <i aria-hidden="true" ></i></button>
</div>
</div>
</div>
<!-- <div id="bump-offer" >
<h2>Bump Offer</h2>
<input type="checkbox" id="advanced-acquisition-theory" name="advanced-acquisition-theory" value="29.95">
<label for="advanced-acquisition-theory">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate enim nulla aliquet porttitor lacus. Et netus et malesuada fames ac turpis. Neque vitae tempus quam pellentesque nec nam aliquam. Faucibus interdum posuere lorem ipsum dolor sit. Neque convallis a cras semper auctor neque vitae tempus quam. Posuere ac ut consequat semper. Donec massa sapien faucibus et molestie ac feugiat sed lectus. Dolor morbi non arcu risus quis. In ornare quam viverra orci sagittis eu volutpat odio.</p>
<button type="button" id="btn-bump-offer">Yes! Add To My Order Now!</button>
</div> -->
<div >
<form action="">
<ul >
<li >
Regular Price: <span><s>$97</s></span>
</li>
<li >
Your Price Today: <span>$27.00</span>
</li>
<li id="li-audiobook" value="audiobookAddon">
AC Audiobook: <span>$9.97</span>
</li>
<li id="li-acq-theory" value="acquisitionTheoryBump">
Advanced Acquisition Theory: <span><span>$29.97</span>
</li>
<li id="li-subtotal" >
Subtotal: <span id="subtotalValue">$0.00</span>
</li>
<li >
Tax: <span id="taxValue">$0.00</span>
</li>
<li id="li-total" >
Total: <span id="totalValue">$0.00</span>
</li>
</ul>
<div >
<a href="#submit-form" style="color: rgb(0, 9, 36); background-color: rgb(233, 120, 40); font-size: 24px;">
<span >Place My Order<i contenteditable="false"></i></span>
<span ></span>
</a>
</div>
</form>
</div>
</div>
</div>
</div>
/* CSS */
body {
height: 100%;
background-color: #f0f0f0;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 0 auto;
display: flex;
font-family: "Open Sans", sans-serif;
}
.col50 {
width: 50%;
padding: 0 10%;
}
.col50:last-child {
padding: 30px;
background-color: #f0f0f0;
}
.text-red {
color: #ff0000;
}
.text-grey {
color: #888;
}
.big {
font-size: 26px;
}
ul {
list-style-type: none;
padding: 15px;
}
ul li {
width: 100%;
font-weight: 600;
line-height: 2;
}
li {
text-align: left;
}
li > span {
float: right;
}
.products div {
width: 100%;
}
.products div label {
width: 100%;
text-align: left;
}
.products label span {
float: right;
text-align: right;
}
// jQuery
$(document).ready(function () {
// check ebook radio button by default
$("#pid-3727024-0").attr("checked", "checked");
// hide audiobook and bump offer line items by default
$("#li-audiobook").hide();
$("#li-acq-theory").hide();
var $ebookRadio = $("#pid-3727024-0");
var $audiobookRadio = $("#pid-3728625-0");
var $checkboxOffer = $("#bump_offer_1");
var $btnAddToMyOrder = $("#aadtomyOrder");
var $inputs = $("input[type=radio], input[type=checkbox]");
var $audiobookLineItem = $("#li-audiobook");
var $checkboxOfferLineItem = $("#li-acq-theory");
let sum = 0;
var $inputs = $("input[type=radio], input[type=checkbox]");
var $inputDataProductAmount = $inputs.attr("data-product-amount");
var inputArray = [];
var index = 0;
// update the line items
function updateOrderSummary() {
$audiobookRadio.is(":checked")
? $audiobookLineItem.show()
: $audiobookLineItem.hide();
$checkboxOffer.is(":checked")
? $checkboxOfferLineItem.show()
: $checkboxOfferLineItem.hide();
}
// update subtotal and total
function updateCheckout() {
$ebookRadio.is(":checked")
? (sum = parseFloat($ebookRadio.data("product-amount")))
: false;
$audiobookRadio.is(":checked")
? (sum =
parseFloat($audiobookRadio.data("product-amount"))
parseFloat($ebookRadio.data("product-amount")))
: false;
$checkboxOffer.is(":checked")
? (sum = parseFloat($checkboxOffer.data("product-amount")))
: false;
$("#subtotalValue").text("$" sum.toFixed(2));
$("#totalValue").text("$" sum.toFixed(2));
// updateOrderSummary();
}
$ebookRadio.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$audiobookRadio.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$checkboxOffer.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$btnAddToMyOrder.on("click", function () {
$checkboxOffer.trigger("click");
});
});
CodePudding user response：
The only time sum has the value of 0 is when the .ready() function is fired. Every time the updateCheckout() function is fired you only add to sum and never subtract from it.
What you need to do is set sum=0; at the very beginning of that function so that every thing gets completely recalculated every time.