保留 Woocommerce 购物车自定义 Select 数量变化字段

Question

我在 Woocommerce 购物车上有一个自定义 select 标签，其设置如下所示。一切似乎都正常，只是一旦您更新购物车上的数量，将不再检测到 select 下拉框的任何进一步更改，因此它不会保存新的 select 值。有什么方法可以重置它（无需重新加载页面），以便 javascript 代码捕获其他更改通知？

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');
}

购物车添加-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>

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>

Answer 1

你能试试这个吗，我相信它能正常工作。

 <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>

我已将 console.log 留在那里以帮助您检查它。显然这些需要在最终版本中删除

您也可以将其更改为使用 window.localStorage，但我已经开始使用这种方法，因此我将其保留为使用会话。其他人可能能够建议利弊。

保留 Woocommerce 购物车自定义 Select 数量变化字段

Retain Woocommerce Cart Custom Select Field on Quantity Change

woocommerce

hook-woocommerce

woocommerce-rest-api

woocommerce-theming