I need help. (.wc-pao-addon-select) is a dropbox and it has a price in (data-price). But it's not adding and showing in (.price). Meanwhile checkbox is working fine
<script>
$=jQuery;
var fefaultprice = "<?php echo $product->get_price(); ?>";
var currencysyb = "<?php echo get_woocommerce_currency_symbol(); ?>";
$(".wc-pao-addon-checkbox").on("change",function(){
var selected = [fefaultprice];
$(".wc-pao-addon-checkbox:checked").each(function () {
selected.push($(this).attr("data-price"));
});
$(".wc-pao-addon-select:selected").each(function () {
selected.push($(this).attr("data-price"));
});
sum = 0;
$.each(selected,function(){sum+=parseFloat(this) || 0; });
$(".price").html('<span class="woocommerce-Price-amount amount"><bdi>'+sum.toFixed(2)+'<span class="woocommerce-Price-currencySymbol">'+currencysyb+'</span></bdi></span>');
});
</script>
price and currency in a parent wrapper data-* attributes, not in JS.Here's a remake of your Item amount calculator in pure JavaScript:
const EL = (sel, parent) => (parent||document).querySelector(sel);
const ELS = (sel, parent) => (parent||document).querySelectorAll(sel);
const calcItemInit = (EL_item) => {
// Get elements
const ELS_ckb = ELS(".wc-pao-addon-checkbox", EL_item);
const ELS_sel = ELS(".wc-pao-addon-select", EL_item);
const EL_amount = EL(".woocommerce-Price-amount", EL_item);
const EL_currency = EL(".woocommerce-Price-currencySymbol", EL_item);
// Get data
const price = parseFloat(EL_item.dataset.price);
const currency = EL_item.dataset.currency;
// Calc
const calc = () => {
let amount = price || 0;
// Add checkboxes values
ELS_ckb.forEach(el => {
if (el.checked) amount += parseFloat(el.value);
});
// Add select values
ELS_sel.forEach(el => {
amount += parseFloat(el.value || 0);
});
// Set Amount!
EL_amount.textContent = amount.toFixed(2);
EL_currency.textContent = currency;
};
// Events:
ELS_ckb.forEach(el => el.addEventListener("change", calc));
ELS_sel.forEach(el => el.addEventListener("change", calc));
// Init:
calc();
};
ELS(".calc").forEach(calcItemInit);<div class="calc" data-currency="€" data-price="12.00">
<div>Item: <b>JS Book Of The Year</b></div>
<div>Price: <b>12.00 €</b></div>
<div>Extras:
<label><input type="checkbox" class="wc-pao-addon-checkbox" value="3.99"> + Book cover</label>
<label><input type="checkbox" class="wc-pao-addon-checkbox" value="14.00"> + All pages</label>
<label>
<select class="wc-pao-addon-select">
<option value="29.99" selected>One year old</option>
<option value="10.25">Two years old</option>
<option value="10.15">Ten years old</option>
</select>
</label>
</div>
<div>
Final price:
<span class="woocommerce-Price-amount"></span>
<span class="woocommerce-Price-currencySymbol"></span>
</div>
</div>