[user3161924]

I have a custom select tag on the Woocommerce cart which is setup as shown below. Everything seems to be working except that once you update the quantity on the cart, any further changes to the select dropdown box is no longer detected so it doesn’t save the newly select value. Is there some way to reset it (without reloading the page) so that additional change notifications are captured by the javascript code?

functions.php

// recreate proceeded to checkout button to be a form so custom cart checkout has $_POST data
add_action( 'woocommerce_proceed_to_checkout', 'add_agent_before_proceed_to_checkout', 15 );
function add_agent_before_proceed_to_checkout() {
    remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );
    wc_get_template('cart/cart-add-agent.php');
}

cart-add-agent.php

<form id="checkout_form" method="POST" action="<?php echo esc_url ( wc_get_checkout_url() ); ?>">
    <button type="submit" class="checkout-button button alt wc-forward" style="width:100%;"><?php
        esc_html_e( 'Proceed to checkout', 'woocommerce' ) ?></button>
    <div style="margin-top:5px">
        <select id="agent" name="agent">
            <option value="Agent1">Checkout with Agent1</option>
            <option value="Agent2">Checkout with Agent2</option>  
            <option value="Agent3">Checkout with Agent3</option>  
        </select>
    </div>
</form>

Bottom of cart.php

<script type="text/javascript">
    
jQuery(document).ready(function() {
    
    var item = window.localStorage.getItem('agent') || "Agent1";
    document.getElementById('agent').value=item;

    jQuery('#agent').on('change', function() {
        var item = jQuery(this).val();
        console.log("saving selected item " + item);

        window.localStorage.setItem('agent', item);
    });
});

jQuery( document.body ).on( 'updated_cart_totals', function() {
    var item = window.localStorage.getItem('agent') || "Agent1";
    document.getElementById('agent').value=item;
    console.log("selected item " + item);
}); 
    
</script>

[jtowell]

Can you please try this, I believe it it working fully.

 <script>
 jQuery(document).ready(function($){   
    var session_agent = sessionStorage.getItem('agent');
    console.log('get session value page loaded ' + session_agent);
    if (session_agent == null ){
      console.log('create agent not in session set to Agent1');
      sessionStorage.setItem('agent', 'Agent1');
      $('#agent').val('Agent1');
    }else{
      $('#agent').val(session_agent);
    }

    $( document ).on( 'change', '#agent', function() {
        sessionStorage.setItem('agent', $(this).val());
        console.log('update value in session ' + $(this).val());
    });
    
    $( document ).ajaxComplete( function() {
        var session_agent = sessionStorage.getItem('agent');
        console.log('ajax completed get session value and set dropdown ' + session_agent);
        $('#agent').val(session_agent);
    });     
 });
 </script>

I have left the console.log in there to help you with checking it. Obviously these need to be removed in the final version

You could change it probably to use window.localStorage also but I had already begun this approach, so I left it using session instead. Someone else might be able to advise of the pros and cons.

[Author]

Posts