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!
// 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");
});
});/* 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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML -->
<div class="wrapper">
<div class="col50">
<div class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable" 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 class="elOrderProductOptions elProductOptionsBox" width="100%">
<tbody>
<tr class="clearfix elOrderProductOptinLabel elOrderProductOptinLabelTable">
<th class="pull-left elOrderProductOptinItem" width="70%"></th>
<th class="pull-right elOrderProductOptinLabelPrice elOrderProductOptinPriceTable" width="30%"></th>
</tr>
<tr class="clearfix elOrderProductOptinProducts elOrderProductOptinProductName activeRadioProduct" data-cf-product-template="true">
<td class="pull-left elOrderProductOptinTableProductName">
<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 class="pull-right elOrderProductOptinPrice elOrderProductOptinTablePriceName" data-cf-product-price="true" taxamo-currency="USD">$27</td>
</tr>
<tr class="clearfix elOrderProductOptinProducts elOrderProductOptinProductName" data-cf-product-template="true">
<td class="pull-left elOrderProductOptinTableProductName">
<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 class="pull-right elOrderProductOptinPrice elOrderProductOptinTablePriceName" data-cf-product-price="true" taxamo-currency="USD">Add for only $9.97 more</td>
</tr>
</tbody>
</table>
</div>
<div class="inner">
<!-- <form>
<div class="form-group">
<ul class="products">
<li class="product">
<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 class="product">
<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 class="col50">
<div class="inner">
<div id="orderFormBump" class="dashed 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 class="sectioncontent" 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 class="checkbox inline" 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" class="checkbox-inline order-bump" style="margin: 4px 0px 0px -20px; cursor: pointer;float: left;" data-product-amount="29.97" data-storage="false">
</label>
<label class="checkbox inline" 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 class="text-center" 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 class="otoText"></b></font>
</u> <span class="otoText2">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" class="yesaddtoorder" id="aadtomyOrder">Yes! Add To My Order <i aria-hidden="true" class="fa fa-mouse-pointer"></i></button>
</div>
</div>
</div>
<!-- <div id="bump-offer" class="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 class="order-summary">
<form action="">
<ul class="purchase-summary">
<li class="text-red big">
Regular Price: <span><s>$97</s></span>
</li>
<li class="summary-item">
Your Price Today: <span>$27.00</span>
</li>
<li id="li-audiobook" class="summary-item" value="audiobookAddon">
AC Audiobook: <span>$9.97</span>
</li>
<li id="li-acq-theory" class="summary-item" value="acquisitionTheoryBump">
Advanced Acquisition Theory: <span><span>$29.97</span>
</li>
<li id="li-subtotal" class="summary-item">
Subtotal: <span id="subtotalValue">$0.00</span>
</li>
<li class="summary-item text-grey">
Tax: <span id="taxValue">$0.00</span>
</li>
<li id="li-total" class="summary-item big">
Total: <span id="totalValue">$0.00</span>
</li>
</ul>
<div class="place-order">
<a href="#submit-form" class="elButton elButtonSubtle elButtonSize1 elButtonColor1 elButtonFull deUppercase elBtnHP_00 elButtonShadow1 elButtonTxtColor1 de2pxLetterSpacing" style="color: rgb(0, 9, 36); background-color: rgb(233, 120, 40); font-size: 24px;">
<span class="elButtonMain">Place My Order<i class="fa_appended fas fa-mouse-pointer" contenteditable="false"></i></span>
<span class="elButtonSub"></span>
</a>
</div>
</form>
</div>
</div>
</div>
</div>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.