根据 Woocommerce 结帐中的单选按钮动态更新费用

Posted 2023-02-19

【中文标题】根据 Woocommerce 结帐中的单选按钮动态更新费用

【英文标题】：Update fee dynamically based on radio buttons in Woocommerce checkout

【发布时间】：2018-09-02 14:53:29

【问题描述】：

所以我正在开发一个用于 woocommerce 的插件，并且我添加了一个用于包装的选择，无论是塑料袋还是卡通盒，每个都有不同的成本。

用户选择其中一个选项我需要 WordPress 来刷新价格并通过使用以下方法添加正确的费用来更新成本：

WC_Cart $cart->add_fee( 'Emballagegebyr', intval($fees));

添加 WC_Cart 费用和更新价格的最佳方式是什么？代码应该是什么样子？

是否可以使用 $_GET 和 $_POST 来获取值，或者更好的是有没有办法使用 AJAX 来更新价格而不刷新页面？

目前，我正在使用 $_GET 通过以下代码从浏览器获取数据

function at87_add_custom_fees( WC_Cart $cart )
    $fees = 3; // fee amount
    $fees = isset($_GET['test']) ? $_GET['test'] : 3;

    $cart->add_fee( 'Emballagegebyr', intval($fees));

然后我的计划是添加如下所示的 javascript 代码，然后使用单选按钮刷新页面并传递所选选项。

add_action( 'wp_footer', 'woocommerce_add_gift_box' );
function woocommerce_add_gift_box() 
    if (is_checkout()) 
    ?>
    <script type="text/javascript">
    jQuery( document ).ready(function( $ ) 
       // $('#add_gift_box').click(function()
    //       jQuery('body').trigger('update_checkout');
    //    );

        $("#pakpose1 input:radio").change(function()
    // Do something interesting here
            alert("test");
        );
    );
    </script>
    <?php
    

我不确定这是否是最聪明的方法，或者是否有其他方法，这可能会更好，它可能会产生什么安全影响，也许有一些钩子可以得到相同的结果工作完成。

顺便说一句：为了在结帐页面中获取单选按钮，我制作了插件，它覆盖了 woocommerce review-order.php 并在该模板中添加了单选按钮，如下所示：

<tr class="packing-selections">
      <th>Pakning</th>
      <td>
                <input type="radio" id="pakpose1" name="pakpose" value="pakpose" checked="checked">Pak i pose <?php echo get_woocommerce_currency_symbol() ?>3.00<br>
                <input type="radio" id="pakpose2" name="pakpose" value="pakkasse">Pak i papkasse <?php echo get_woocommerce_currency_symbol() ?>9.00
     </td>
</tr>

【问题讨论】：

第一次加载页面时，您会向用户显示商品的价格吗？还是他们必须选择才能看到价格？为什么不在第一次加载页面时加载价格和每个选项的价格，而不是使用 JS 修改显示给用户的价格，而是根据发送到服务器的 $_POST 键计算实际价格。

好吧，我显示了每个选项的价格，所以有可能，然后我想我需要通过 JS 更新总价格，但是你如何确保正确的价格是一旦客户点击“下订单”，您如何使费用反映在发票中？

所以我不确定你必须绑定哪个钩子，但是提交时你检查 $_POST 值以获取提交表单的单选字段的值并添加 WC_Cart $cart->add_fee( 'Emballagegebyr', intval($fees));或其他代码行。

hookr.io/actions/woocommerce_cart_calculate_fees 在这里我看到一个钩子，当您在购物车中添加费用时。不确定这是否可行，您必须对其进行测试。另外我建议查看其他插件，看看他们是如何实现这一点的。 github.com/WPprodigy/woocommerce-product-fees/blob/master/…

【参考方案1】：

代码于 2019 年更新：也适用于未登录用户和上一个 WooCommerce 版本 3.7.x

这需要Ajax，没有它就无法做到……这是Ajax的方式。在这段代码中你得到了一切，所以在尝试之前删除你的相关自定义（意味着从模板和所有相关代码中删除你的单选按钮）......

完整代码（无需其他）：

// Customizing Woocommerce radio form field
add_action( 'woocommerce_form_field_radio', 'custom_form_field_radio', 20, 4 );
function custom_form_field_radio( $field, $key, $args, $value ) 
    if ( ! empty( $args['options'] ) && is_checkout() ) 
        $field = str_replace( '</label><input ', '</label><br><input ', $field );
        $field = str_replace( '<label ', '<label style="display:inline;margin-left:8px;" ', $field );
    
    return $field;


// Add a custom dynamic packaging fee
add_action( 'woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1 );
function add_packaging_fee( $cart ) 
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    $packing_fee = WC()->session->get( 'chosen_packing' ); // Dynamic packing fee
    $fee = $packing_fee === 'box' ? 9.00 : 3.00;
    $cart->add_fee( __( 'Packaging fee', 'woocommerce' ), $fee );


// Add a custom radio fields for packaging selection
add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_form_packing_addition', 20 );
function checkout_shipping_form_packing_addition() 
    $domain = 'woocommerce';

    echo '<tr class="packing-select"><th>' . __('Packing options', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_packing');
    $chosen   = empty($chosen) ? WC()->checkout->get_value('radio_packing') : $chosen;
    $chosen   = empty($chosen) ? 'bag' : $chosen;

    // Add a custom checkbox field
    woocommerce_form_field( 'radio_packing', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide packing' ),
        'options' => array(
            'bag' => __('In a bag '.wc_price(3.00), $domain),
            'box' => __('In a gift box '.wc_price(9.00), $domain),
        ),
        'default' => $chosen,
    ), $chosen );

    echo '</td></tr>';


// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_shipping_packing_script' );
function checkout_shipping_packing_script() 
    if ( ! is_checkout() )
        return; // Only checkout page
    ?>
    <script type="text/javascript">
    jQuery( function($)
        $('form.checkout').on('change', 'input[name=radio_packing]', function(e)
            e.preventDefault();
            var p = $(this).val();
            $.ajax(
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: 
                    'action': 'woo_get_ajax_data',
                    'packing': p,
                ,
                success: function (result) 
                    $('body').trigger('update_checkout');
                    console.log('response: '+result); // just for testing | TO BE REMOVED
                ,
                error: function(error)
                    console.log(error); // just for testing | TO BE REMOVED
                
            );
        );
    );
    </script>
    <?php



// Php Ajax (Receiving request and saving to WC session)
add_action( 'wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data' );
function woo_get_ajax_data() 
    if ( isset($_POST['packing']) )
        $packing = sanitize_key( $_POST['packing'] );
        WC()->session->set('chosen_packing', $packing );
        echo json_encode( $packing );
    
    die(); // Alway at the end (to avoid server error 500)

代码在您的活动子主题（或活动主题）的functions.php 文件中。 经过测试且有效。

类似：Add a dynamic fee based on a select field in Woocommerce checkout

【讨论】：

@fja3omega 我已经更新了代码。它也适用于未登录的用户。

我实际上添加了一个 nopriv，因为我也在为此进行研究。我应该在这里提到这一点。

感谢此代码@LoicTheAztec，它可以完美运行。我尝试将它挂在收银台之外的woocommerce_checkout_before_order_review 我实际上想要显示单选按钮的地方，我很惊讶它是如何正确对齐的。你是一个救生员

所以 $('body').trigger('update_checkout');将刷新结帐。我想做同样的事情，但在购物车页面。我应该使用什么来代替 update_checkout？我有一个复选框，如果选中，我将动态添加附加费

它不起作用。我需要通过外部 API 根据商品数量计算自定义附加费。我使用附加费成功更新了我的自定义组件（模板定制费），但未能更新购物车中的 woocommerce 附加费。它总是获取 WC()->session->get( 'custom_charge_amount', 0 ); 的 PREVIOUS 值而不是当前值。请您看一下：pastebin.com/TG2RDNrPpastebin.com/TG2RDNrP