Woocommerce checkout: Checkbox that adds a product to cart issue

Question

Based on Checkbox field that add to cart a product in Woocommerce checkout page answer code, my following code attempt works perfectly: It allows the customer to add a specific product to the cart by clicking a checkbox, which then updates via AJAX to add or remove the product based on whether or not it is clicked.

The issue I am having is that there is a loophole. If the customer refreshes the checkout page, the checkbox reverts to unchecked and allows the customer to add a 2nd product or more (if they keep refreshing).

I also have a function that checks if a specific product is in the cart, and that works fine. What I can't seem to pull off is this...

If that particular product is in the cart when checkout loads, the default state of the custom checkbox should be checked.

Checkbox code below:

// -----------------------------------------
// ADD A $5 product TO THE CHECKOUT PAGE
$surprise_product_activated = get_field( 'surprise_product_activated', 'options' );
$surprise_product = get_field( 'surprise_product', 'options' );

if ( $surprise_product_activated == true ) {
// Display a custom checkout field
    add_action( 'woocommerce_before_order_notes', 'add_a_product' , 10, 2 );
}

function add_a_product() {
    $value = WC()->session->get('add_a_product');
    $surprise_product = get_field( 'surprise_product', 'options' );
    $product = wc_get_product( $surprise_product );
    $price = $product->get_price();


    woocommerce_form_field( 'cb_add_product', array(
        'type'          => 'checkbox',
        'label'         => '<div class="specialty-container f-grey"><div class="custom-checkbox float-right">
          <input type="checkbox" id="animated-checkbox" />
          <svg viewBox="0 0 35.6 35.6">
            <circle class="background" cx="17.8" cy="17.8" r="17.8"></circle>
            <circle class="stroke" cx="17.8" cy="17.8" r="14.37"></circle>
            <polyline class="check" points="11.78 18.12 15.55 22.23 25.17 12.87"></polyline>
          </svg></div>&nbsp;&nbsp;<span class="specialty-product clearfix"><span class="special-offer">Special Offer</span><br>' . __('Add a <strong>Surprise product</strong> for just ') . '<strong class="f-purple">$' . $price . '?</strong></span></div>',
        'class'         => array('form-row-wide five-dollar-product'),
    ), $value == 'yes' ? true : false );
}


// The jQuery Ajax request
add_action( 'wp_footer', 'checkout_custom_jquery_script' );
function checkout_custom_jquery_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):

    // Remove "ship_different" custom WC session on load
    if( WC()->session->get('add_a_product') ){
        WC()->session->__unset('add_a_product');
    }
    if( WC()->session->get('product_added_key') ){
        WC()->session->__unset('product_added_key');
    }
    // jQuery Ajax code
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on( 'change', '#animated-checkbox', function(){
            var value = $(this).prop('checked') === true ? 'yes' : 'no';

            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'add_a_product',
                    'add_a_product': value,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log(result);
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// The Wordpress Ajax PHP receiver
add_action( 'wp_ajax_add_a_product', 'checkout_ajax_add_a_product' );
add_action( 'wp_ajax_nopriv_add_a_product', 'checkout_ajax_add_a_product' );
function checkout_ajax_add_a_product() {
    if ( isset($_POST['add_a_product']) ){
        WC()->session->set('add_a_product', esc_attr($_POST['add_a_product']));
        echo $_POST['add_a_product'];
    }
    die();
}

// Add remove free product
add_action( 'woocommerce_before_calculate_totals', 'adding_removing_specific_product' );
function adding_removing_specific_product( $cart ) {
    if (is_admin() && !defined('DOING_AJAX'))
        return;

    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 )
        return;

    $surprise_product = get_field( 'surprise_product', 'options' );
    // HERE the specific Product ID
    $product_id = $surprise_product;

    if( WC()->session->get('add_a_product') == 'yes' && ! WC()->session->get('product_added_key') )
    {
        $cart_item_key = $cart->add_to_cart( $product_id );
        WC()->session->set('product_added_key', $cart_item_key);
    }
    elseif( WC()->session->get('add_a_product') == 'no' && WC()->session->get('product_added_key') )
    {
        $cart_item_key = WC()->session->get('product_added_key');
        $cart->remove_cart_item( $cart_item_key );
        WC()->session->__unset('product_added_key');
    }
}

And check to see if product is already in the cart:

// -----------------------------------------
// CHECK IF PRODUCT ALREADY IN CART
// -----------------------------------------
function woo_in_cart($product_id) {
    global $woocommerce;         
    foreach($woocommerce->cart->get_cart() as $key => $val ) {
        $_product = $val['data'];

        if($product_id == $_product->id ) {
            return true;
        }
    }         
    return false;
}

Answer 1

As you are using ACF instead of custom code, your code is not really testable globally.

To avoid your checkout reload issue, try to replace in checkout_custom_jquery_script() function:

if( WC()->session->get('product_added_key') ){
    WC()->session->__unset('product_added_key');
}

by:

if( $cart_item_key = WC()->session->get('product_added_key') ){
    WC()->cart->remove_cart_item( $cart_item_key );
    WC()->session->__unset('product_added_key');
}

It should avoid customer to be able to add multiple times the "surprise_product" if it reloads the checkout page…