I’ve a problem. I want to execute function after two checkboxes are checked. I’ve tried everything but nothing works. (This should replace price in Woocommerce)
My PHP function:
jQuery(function($) {
var cb = 'input[name="extra1_option"]'
cb1 = 'input[name="extra2_option"]'
cb2 = 'input[name="extra1_option"], input[name="extra2_option"]'
pp = 'price';
// On change / select a variation
$(cb2).on( 'change', function(){
if( $(cb).prop('checked') === true){
$(pp).html('<?php echo $disp_price_sum_p_html; ?>');
}
else if( $(cb1).prop('checked') === true){
$(pp).html('<?php echo $disp_price_sum_n_html; ?>');
}
else if( ($(cb).is(':checked') === true) && ($(cb1).prop('checked') === true)){ // I've tried everythiing here
$(pp).html('<?php echo $disp_price_sum_pn_html; ?>');
}
else
$(pp).html('<?php echo $active_price_html; ?>');
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<?php
$active_price = 100;
$extra_price1 = 2;
$extra_price2 = 3;
$extra_price1_html = 2;
$extra_price2_html = 3;
$active_price_html = 100;
$disp_price_sum_n_html = $active_price + $extra_price1;
$disp_price_sum_n_html = $active_price + $extra_price2;
$disp_price_sum_pn_html = $active_price + $extra_price1 + $extra_price2;
echo '<div class="hidden-field">
<p class="form-row form-row-wide" id="extra1_option_field" data-priority="">
<label class="checkbox"> 'Extra Field 1: .
' <input type="checkbox" class="input-checkbox " name="extra1_option" id="extra1_option" value="extra1"> + ' . $extra_price1_html .'</label></span></p>
<input type="hidden" name="extra_price1" value="' . $extra_price1 . '">
<p class="form-row form-row-wide" id="extra2_option_field" data-priority="">
<label class="checkbox"> 'Extra Field 2: .
' <input type="checkbox" class="input-checkbox " name="extra2_option" id="extra2_option" value="extra2"> + ' . $extra_price2_html .
'</label></span></p>
<input type="hidden" name="extra_price1" value="' . $extra_price1 . '">
<input type="hidden" name="extra_price2" value="' . $extra_price2 . '">
<input type="hidden" name="active_price" value="' . $active_price . '">
<p>Price: + ' . $price .'
</div>';
?>
function product_option_custom_field(){
global $product;
$active_price = (float) $product->get_price();
$extra_price1 = (float) $product->get_meta( '_extra_field1' );
$extra_price2 = (float) $product->get_meta( '_extra_field2' );
$extra_price1_html = strip_tags( wc_price( wc_get_price_to_display( $product, array('price' => $extra_price1 ) ) ) );
$extra_price2_html = strip_tags( wc_price( wc_get_price_to_display( $product, array('price' => $extra_price2 ) ) ) );
$active_price_html = wc_price( wc_get_price_to_display( $product ) );
$disp_price_sum_p_html = wc_price( wc_get_price_to_display( $product, array('price' => $active_price + $extra_price1) ) );
$disp_price_sum_n_html = wc_price( wc_get_price_to_display( $product, array('price' => $active_price + $extra_price2) ) );
$disp_price_sum_pn_html = wc_price( wc_get_price_to_display( $product, array('price' => $active_price + $extra_price1 + $extra_price2) ) );
echo '<div class="hidden-field">
<p class="form-row form-row-wide" id="extra1_option_field" data-priority="">
<span class="woocommerce-input-wrapper"><label class="checkbox"> ' . __("Extra Field 1:", "Woocommerce") .
' <input type="checkbox" class="input-checkbox " name="extra1_option" id="extra1_option" value="1"> + ' . $extra_price1_html .
'</label></span></p>
<input type="hidden" name="extra_price2" value="' . $extra_price2 . '">
<p class="form-row form-row-wide" id="extra2_option_field" data-priority="">
<span class="woocommerce-input-wrapper"><label class="checkbox"> ' . __("Extra field 2:", "Woocommerce") .
' <input type="checkbox" class="input-checkbox " name="extra2_option" id="extra2_option" value="1"> + ' . $extra_price2_html .
'</label></span></p>
<input type="hidden" name="extra_price2" value="' . $extra_price2 . '">
<input type="hidden" name="active_price" value="' . $active_price . '"></div>';
My Jquery:
<script type="text/javascript">
jQuery(function($) {
var cb = 'input[name="extra1_option"]'
cb1 = 'input[name="extra2_option"]'
cb2 = 'input[name="extra1_option"], input[name="extra2_option"]'
pp = 'p.price';
// On change / select a variation
$(cb2).on( 'change', function(){
if( $(cb).prop('checked') === true){
$(pp).html('<?php echo $disp_price_sum_p_html; ?>');
}
else if( $(cb1).prop('checked') === true){
$(pp).html('<?php echo $disp_price_sum_n_html; ?>');
}
else if( ($(cb).is(':checked') === true) && ($(cb1).prop('checked') === true)){ // I've tried everythiing here
$(pp).html('<?php echo $disp_price_sum_pn_html; ?>');
}
else
$(pp).html('<?php echo $active_price_html; ?>');
})
});
</script>
I’ve also tried to make two functions, Is any one available to help me?
I’ve tried to remake statements and add another function
EDITED:
Sorry,I’m tring all the time run this but still can’t even invoke this to test:
const updatePrice = () => {
var extra1Checked = $('input[name="extra1_option"]').is(':checked');
var extra2Checked = $('input[name="extra2_option"]').is(':checked');
// Determine the correct price HTML to display
if (extra1Checked && extra2Checked) alert("a");
else if (extra1Checked) alert("a1");
else if (extra2Checked) alert("a2");
// Update the price paragraph
$priceParagraph.html($priceParagraph.data(priceData));
}
$('div.hidden-field input.input-checkbox').on('change', updatePrice);
// Call updatePrice on script load to set the initial price state
updatePrice();
});
2
Answers
Please note you have TWO hidden
name="extra_price2"
You can do this to make it more DRY and readable
The following will, when selecting any extra options:
The complete code (based on your product custom setting fields):
Code goes in functions.php file of your child theme (or in a plugin). Tested and works.